常用的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 命名空間模式，在和其他外掛程式一起使用時，採用命名空間模式避免和其他外掛程式的衝突問題。