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

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

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

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

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

  // undefined作为形参的目的是因为在es3中undefined是可以被<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>的
  //比如我们可以声明var undefined = 123,这样就影响到了undefined值的判断，幸运的是在es5中,undefined不能被<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>了。
  // window和document本身是<a href="https://www.jb51.cc/tag/quanjubianliang/" target="_blank" class="keywords">全局变量</a>，<a href="https://www.jb51.cc/tag/zaizhe/" target="_blank" class="keywords">在这</a>个地方作为形参的目的是因为js执行是从里到外查找变量的（作用域），把它们作为局部变量传进来，就避免了去外层查找，提高了效率。

  // 声明<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>对象
  var pluginName = "defaultPluginName",defaults = {
      propertyName: "value"
  };

  // 构造<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
  function Plugin ( element,options ) {
      this.element = element;
      // 将<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>对象和传递的参数对象合并到第<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>空对象中
      this.settings = $.extend( {},defaults,options );
      this._defaults = defaults;
      this._name = pluginName;
      this.init();
  }

  // 为了避免和原型对象Plugin.prototype的冲突，这地方采用继承原型对象的<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>
  $.extend(Plugin.prototype,{
      init: function () {
            // 初始化，由于继承自Plugin原型，
            // 你可以<a href="https://www.jb51.cc/tag/zaizheli/" target="_blank" class="keywords">在这里</a>直接使用this.element或者this.settings
          console.log("xD");
      },yourOtherFunction: function () {
          // some logic
      }
  });

  // 对构造<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>的<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>轻量级封装，
  // 防止产生多个实例
  $.fn[ pluginName ] = function ( options ) {
      this.each(function() {
          if ( !$.data( this,"plugin_" + pluginName ) ) {
              $.data( this,"plugin_" + pluginName,new Plugin( this,options ) );
          }
      });

      // 方便链式<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>
      return this;
  };

})( jQuery,document );

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

fiddle.net/mirandaasm/wjPvF/3/">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 Boilerplate介绍

相关推荐