Häufig verwendete JQuery-Vorlagen-Plug-Ins – jQuery Boilerplate Introduction_jquery

Wenn wir zum ersten Mal ein JQuery-Plug-In entwickeln, wissen wir oft nicht, wo wir anfangen sollen. Natürlich können wir einfache Plug-Ins gemäß dem von JQuery bereitgestellten offiziellen Format entwickeln, aber oft ist es nicht perfekt Wenn wir nicht aufpassen, werden wir ein sehr „schlechtes“ Plug-In erstellen: „Plug-Ins: schwer zu warten, schwer zu erweitern, umständlich zu verwenden, schlechte Leistung ... Als wir uns durch kontinuierliches Üben langsam anhäuften, wurden einige Probleme effektiv.“ vermieden, brachte aber auch neue Probleme mit sich: Welches Modell unter den vielen JQuery-Plug-In-Entwicklungsmodellen ist das beste?

Es wäre großartig, wenn eine Vorlage bereitgestellt werden könnte, die Entwicklern hilft, die „Verwirrung“ bei der Entwicklung von JQuery-Plug-Ins durch bestimmte Einschränkungen und Spezifikationen zu lösen! Hier stellen wir hauptsächlich das zweithäufigste verwendete JQuery-Vorlagen-Plug-In in der tatsächlichen Entwicklung vor: JQuery Boilerplate

jQuery Boilerplate ist kein Allheilmittel für die Entwicklung von JQuery-Plug-Ins. Es ist natürlich nicht das Ziel, eine möglichst einfache Vorlage für Anfänger bereitzustellen . Sie müssen lediglich entsprechende Änderungen auf Basis dieser Vorlage vornehmen. Werfen wir einen Blick auf eine grundlegende Vorlage, die von jQuery Boilerplate bereitgestellt wird (kommt Ihnen das bekannt vor? Ja, Bootstrap ist dieses Modell):

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

Die obige Vorlage ist eine einfache Basisvorlage, die die meisten unserer Anforderungen während der Entwicklung erfüllen kann, z. B.: Objekte werden nur einmal instanziiert, Kettenaufrufe, Standardparameter und Aufrufe öffentlicher und privater Methoden. Schauen wir uns ein Beispiel an:

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

Aber in der tatsächlichen Entwicklung, insbesondere bei der Komponentenentwicklung einer bestimmten Größenordnung, stehen wir immer noch vor vielen Problemen, die gelöst werden müssen, wie z. B. Namespace-Konflikte, Plug-In-Skalierbarkeit und wie kann man öffentliche Methoden bequem aufrufen? Natürlich liegt es zum Teil an persönlichen Vorlieben, dass ich gerne andere Entwicklungsmodi verwende. Hier bietet jQuery Boilerplate auch mehrere verschiedene Modi der Komponentenentwicklung. Sie können den für Sie passenden auswählen:

Der Lightweight-Modus (Basismodus) bietet eine einfache und universelle Basisvorlage für Anfänger, einschließlich grundlegender Standardobjekte, einfacher Konstruktoren, Zusammenführung von Standardparametern und übergebenen Parametern sowie Konstruktoren zur Verhinderung mehrfacher Instanziierungen von Objekten.

Widget-Factory-Factory-Modus, ja, der typische Modus, der von jquery ui verwendet wird und einen objektorientierten Ansatz zum Erstellen komplexer zustandsbehafteter Komponenten verwendet. Die meisten Komponenten in jquery ui basieren auf der Basiskomponente der Widget-Factory große Anzahl Einige der Standardmethoden, einschließlich ereignisgesteuerter Methoden.
Widget-Factory RequireJS Dies ist eine einfache Kapselung der Widget-Factory unter Verwendung von RequireJS zur Unterstützung der modularen Ladespezifikation von AMD.
Namespace-Muster: Bei Verwendung mit anderen Plug-Ins wird das Namespace-Muster verwendet, um Konflikte mit anderen Plug-Ins zu vermeiden.