常用的jquery模板插件——jQuery Boilerplate介绍_jquery

在初次进行jquery插件开发时,我们往往无从下手,当然我们可以按照jquery官方提供的格式进行简单的插件开发,但是很多时候往往不尽完美,一不小心,就造出一个很“烂”的插件:难以维护、难以扩展、使用繁琐、性能不佳...当我们在不断的实践中,慢慢积累下来时,有些问题得到了有效的避免,但也带来了新的问题:在众多纷杂的jquery插件开发模式中,究竟哪一种模式才是最好的呢?

如果能提供一个模板,通过一定的约束和规范为开发者解决在jquery插件开发中的“迷惘”那该多好!在这里主要介绍下一个在实际开发中最常用的jquery模板插件——jQuery Boilerplate

jQuery Boilerplate不是jquery插件开发的银弹,他并没有提供各种模式的完美解决方案,当然这也不是他所追求的目标,他的目的只是提供一个最基础的模板,对于初学者而言,你只需要在这个模板的基础上做相应的修改即可。来看一下jQuery Boilerplate提供的一个基础模板(是不是觉得很熟悉呢?没错,bootstrap就是这个模式):

  // 这个分号的作用是防止和其他jquery插件合并时,别人不规范的jquery插件忘记使用分号结束
  //影响到我们当前的插件,导致无法运行的问题。
  ;(function ( $, window, document, undefined ) {

      // undefined作为形参的目的是因为在es3中undefined是可以被修改的
      //比如我们可以声明var undefined = 123,这样就影响到了undefined值的判断,幸运的是在es5中,undefined不能被修改了。
      // window和document本身是全局变量,在这个地方作为形参的目的是因为js执行是从里到外查找变量的(作用域),把它们作为局部变量传进来,就避免了去外层查找,提高了效率。

      // 声明默认属性对象
      var pluginName = "defaultPluginName",
          defaults = {
          propertyName: "value"
      };

      // 构造函数
      function Plugin ( element, options ) {
          this.element = element;
          // 将默认属性对象和传递的参数对象合并到第一个空对象中
          this.settings = $.extend( {}, defaults, options );
          this._defaults = defaults;
          this._name = pluginName;
          this.init();
      }

      // 为了避免和原型对象Plugin.prototype的冲突,这地方采用继承原型对象的方法
      $.extend(Plugin.prototype, {
          init: function () {
                // 初始化,由于继承自Plugin原型,
                // 你可以在这里直接使用this.element或者this.settings
              console.log("xD");
          },
          yourOtherFunction: function () {
              // some logic
          }
      });

      // 对构造函数的一个轻量级封装,
      // 防止产生多个实例
      $.fn[ pluginName ] = function ( options ) {
          this.each(function() {
              if ( !$.data( this, "plugin_" + pluginName ) ) {
                  $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
              }
          });

          // 方便链式调用
          return this;
      };

  })( jQuery, window, document );

上面的模板是一个轻量级的基础模板,在开发中已经能满足我们大部分需求,例如:对象只实例化一次,链式调用、默认参数、以及公有和私有方法的调用。来看一个示例:

http://jsfiddle.net/mirandaasm/wjPvF/3/

但是在实际开发中,尤其在有一定规模的组件开发中,我们还面临着很多问题需要解决,比如命名空间的冲突、插件的可扩展性以及公有方法如何方便的调用?当然还有一部分是个人爱好的原因,我就喜欢使用其他模式的开发方式。这里jQuery Boilerplate也提供了几种不同模式的组件开发方式,你可以选择一个适合你的使用:

轻量级(基础)模式 为初学者提供的一个简单通用的基础模板,包括基础的默认对象、简单的构造函数、默认参数和传递参数的合并以及防止对象多次实例化的构造函数的简单封装。

Widget factory 工厂模式,没错,jquery ui使用的典型模式,使用面向对象的方式构建复杂有状态的组件,jquery ui中的组件大部分依赖于widget factory基础组件,这个基础模板提供了大部分的默认方法,包括事件触发方法。
Widget factory + RequireJS 这是个使用RequireJS对Widget factory进行简单封装,使其支持AMD模块化加载规范。
Namespaced pattern 命名空间模式,在和其他插件一起使用时,采用命名空间模式避免和其他插件的冲突问题。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
模板插件
jquery 模板插件、jquery 插件开发模板、jquery弹出框插件模板、jquery的常用插件、jquery常用插件,以便于您获取更多的相关知识。

时间: 2024-12-21 05:13:54

常用的jquery模板插件——jQuery Boilerplate介绍_jquery的相关文章

JQuery模板插件jquery.tmpl-动态ajax扩展

   在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以特地写成jquery工具函数,加入了本地数据和ajax数据加载模板,数据的方式. 参数说明: Tmpl: function(template, data, fun) 1:template: 1): url: 为ajax的加载url,ajax当且仅当remote= true时候加载. 2):da

JQuery模板插件 jquery.tmpl 动态ajax扩展_jquery

在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以特地写成jquery工具函数,加入了本地数据和ajax数据加载模板,数据的方式. 参数说明: Tmpl: function(template, data, fun) 1:template: 1): url: 为ajax的加载url,ajax当且仅当remote= true时候加载. 2):data:

jQuery simpleModal插件的使用介绍_jquery

SimpleModal是一个轻量级的jQuery插件,它提供了一个模式对话框发展强大的接口.是一个模态对话框的框架. SimpleModal使您可以灵活地构建任何你可以设想,而屏蔽相关的跨浏览器问题. (0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simplemodal.js 1.4.4 chrome49 去官网下载simpleModal,可以省去很多麻

JQuery模板插件-jquery.tmpl

  在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQuery官方贡献的模板插件,网址:http://api.jquery.com/jquery.tmpl/.     Tmpl提供了几种tag: ${}:等同于{{=}},是输出变量,通过了html编码的. {{html}}:输出变量html,但是没有html编码,适合输出html代码. {{if }} {{else}}:提供了分支逻辑. {{each}}:提供循环逻辑,$value访问迭代变量. 下面一个简单的模板tmpl实例:(代

常用的jquery模板插件

 在初次进行jquery插件开发时,我们往往无从下手,当然我们可以按照jquery官方提供的格式进行简单的插件开发,但是很多时候往往不尽完美,一不小心,就造出一个很"烂"的插件:难以维护.难以扩展.使用繁琐.性能不佳...当我们在不断的实践中,慢慢积累下来时,有些问题得到了有效的避免,但也带来了新的问题:在众多纷杂的jquery插件开发模式中,究竟哪一种模式才是最好的呢? 如果能提供一个模板,通过一定的约束和规范为开发者解决在jquery插件开发中的"迷惘"那该多好

jQuery树形插件jquery.simpleTree.js用法分析_jquery

本文实例讲述了jQuery树形插件jquery.simpleTree.js用法.分享给大家供大家参考,具体如下: 最近写项目的cms系统,客户要求后台管理可以通过一棵树来展现整个帮助文档的结构,并通过拖拽操作来实现文章和栏目的位置排列变化,我在网上找来半天,决定使用jQuery.simpleTree.js来实现. 这个树控件支持拖动节点到新的位置,通过其提供aftermove函数的覆写,我们可以在其拖动完成后在aftermove函数中调用ajax来后台更改数据库来保存拖动的结果 同时这个树的节点

Jquery日历插件制作简单日历_jquery

在页面开发中,经常遇到需要用户输入日期的操作.通常的做法是,提供一个文本框(text),让用户输入,然后,编写代码验证输入的数据,检测其是否是日期类型.这样比较麻烦,同时,用户输入日期的操作也不是很方便,影响用户体验.如果使用jQuery UI中的datepicker(日历)插件,这些问题都可以迎刃而解.该插件调用的<span style="color:#cc66cc;"><strong>语法格式</strong></span>如下: 

jQuery时间插件jquery.clock.js用法实例(5个示例)_jquery

本文实例讲述了jQuery时间插件jquery.clock.js用法.分享给大家供大家参考,具体如下: Example 1: Basic clock, no options <html> <head> <title>jclock</title> <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2

jQuery提示插件alertify使用指南_jquery

1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两个css(alertify.core.css,alertify.default.css),用于设置提示框的样式.一个js(alertify.min.js或alertify.js),用于实现提示框的功能. 2.实现提示框代码 alertify使用非常简单,主要步骤为:初始化(初始化alertify)->绑定(绑