Pemalam templat jquery yang biasa digunakan - jQuery Boilerplate introduction_jquery

Apabila kita mula-mula membangunkan pemalam jquery, kita sering tidak tahu di mana untuk memulakan. Sudah tentu, kita boleh membangunkan pemalam mudah mengikut format rasmi yang disediakan oleh jquery, tetapi banyak kali ia tidak sempurna tidak berhati-hati, kami akan mencipta pemalam yang sangat "buruk" "Pemalam: sukar diselenggara, sukar untuk dikembangkan, menyusahkan untuk digunakan, prestasi yang lemah... Semasa kami terkumpul secara perlahan melalui latihan berterusan, beberapa masalah telah berkesan. dielakkan, tetapi ia juga membawa masalah baharu: Antara banyak model pembangunan pemalam jquery, model manakah yang terbaik?

Alangkah baiknya jika templat boleh disediakan untuk membantu pembangun menyelesaikan "kekeliruan" dalam pembangunan pemalam jquery melalui kekangan dan spesifikasi tertentu! Di sini kami terutamanya memperkenalkan pemalam templat jquery seterusnya yang paling biasa digunakan dalam pembangunan sebenar-jQuery Boilerplate

jQuery Boilerplate bukan peluru perak untuk pembangunan plug-in jquery Ia tidak menyediakan penyelesaian yang sempurna untuk pelbagai mod . , anda hanya perlu membuat pengubahsuaian yang sepadan berdasarkan templat ini. Mari kita lihat templat asas yang disediakan oleh jQuery Boilerplate (adakah ia kelihatan biasa? Ya, bootstrap ialah model ini):

  // 这个分号的作用是防止和其他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 );

Templat di atas ialah templat asas ringan yang boleh memenuhi kebanyakan keperluan kita semasa pembangunan, seperti: objek dibuat seketika sahaja, panggilan berantai, parameter lalai dan panggilan kepada kaedah awam dan peribadi. Mari lihat contoh:

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

Tetapi dalam pembangunan sebenar, terutamanya dalam pembangunan komponen skala tertentu, kami masih menghadapi banyak masalah yang perlu diselesaikan, seperti konflik ruang nama, kebolehskalaan pemalam dan cara memanggil kaedah awam dengan mudah? Sudah tentu, sebahagian daripadanya adalah kerana keutamaan peribadi saya suka menggunakan mod pembangunan lain. Di sini jQuery Boilerplate juga menyediakan beberapa mod pembangunan komponen yang berbeza Anda boleh memilih yang sesuai dengan anda:

Mod ringan (asas) menyediakan templat asas yang ringkas dan universal untuk pemula, termasuk objek lalai asas, pembina ringkas, penggabungan parameter lalai dan parameter yang diluluskan, dan pembina untuk mengelakkan pengkapsulan berbilang objek.

Mod kilang widget, ya, mod biasa yang digunakan oleh jquery ui, menggunakan pendekatan berorientasikan objek untuk membina komponen stateful yang kompleks Kebanyakan komponen dalam jquery ui bergantung pada komponen asas kilang widget ini menyediakan a sejumlah besar Beberapa kaedah lalai, termasuk kaedah yang dicetuskan peristiwa.
Kilang widget RequireJS Ini ialah enkapsulasi ringkas kilang Widget menggunakan RequireJS untuk menyokong spesifikasi pemuatan modular AMD.
Corak ruang nama: Apabila digunakan dengan pemalam lain, corak ruang nama digunakan untuk mengelakkan konflik dengan pemalam lain.