Plug-ins de modèles jquery couramment utilisés - jQuery Boilerplate introduction_jquery

Lorsque nous développons pour la première fois des plug-ins jquery, nous ne savons souvent pas par où commencer. Bien sûr, nous pouvons développer des plug-ins simples selon le format officiel fourni par jquery, mais souvent, ce n'est pas parfait. Si vous n'y faites pas attention, nous créerons un très "mauvais" plug-in. "Plug-ins : difficiles à maintenir, difficiles à étendre, encombrants à utiliser, performances médiocres... Au fur et à mesure que nous accumulions lentement grâce à une pratique continue, certains problèmes sont effectivement apparus. évité, mais cela a également apporté de nouveaux problèmes : parmi les nombreux modèles de développement de plug-ins jquery, quel modèle est le meilleur ?

Ce serait formidable si un modèle pouvait être fourni pour aider les développeurs à résoudre la « confusion » dans le développement de plug-ins jquery à travers certaines contraintes et spécifications ! Ici, nous présentons principalement le prochain plug-in de modèle jquery le plus couramment utilisé dans le développement actuel : jQuery Boilerplate

jQuery Boilerplate n'est pas une solution miracle pour le développement de plug-ins jquery. Il ne fournit pas de solutions parfaites pour différents modes. Bien sûr, ce n'est pas l'objectif qu'il poursuit. Son objectif est uniquement de fournir un modèle le plus basique pour les débutants. , il vous suffit d'apporter les modifications correspondantes en fonction de ce modèle. Jetons un coup d'œil à un modèle de base fourni par jQuery Boilerplate (est-ce que cela vous semble familier ? Oui, bootstrap est ce modèle) :

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

Le modèle ci-dessus est un modèle de base léger qui peut répondre à la plupart de nos besoins pendant le développement, tels que : les objets ne sont instanciés qu'une seule fois, les appels en chaîne, les paramètres par défaut et les appels aux méthodes publiques et privées. Regardons un exemple :

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

Mais dans le développement réel, en particulier dans le développement de composants d'une certaine échelle, nous sommes encore confrontés à de nombreux problèmes qui doivent être résolus, tels que les conflits d'espaces de noms, l'évolutivité des plug-ins et comment appeler facilement des méthodes publiques ? Bien sûr, cela est dû en partie à des préférences personnelles. J’aime utiliser d’autres modes de développement. Ici, jQuery Boilerplate propose également plusieurs modes différents de développement de composants. Vous pouvez choisir celui qui vous convient :

.

Le mode léger (de base) fournit un modèle de base simple et universel pour les débutants, comprenant des objets par défaut de base, des constructeurs simples, la fusion des paramètres par défaut et des paramètres passés, et des constructeurs pour empêcher plusieurs instanciations d'objets.

Mode usine de widgets, oui, le mode typique utilisé par jquery ui, utilisant une approche orientée objet pour créer des composants avec état complexes. La plupart des composants de jquery ui s'appuient sur le composant de base de l'usine de widgets. un grand nombre de Certaines des méthodes par défaut, y compris les méthodes déclenchées par des événements.
Usine de widgets RequireJS Il s'agit d'une simple encapsulation de l'usine de widgets utilisant RequireJS pour prendre en charge la spécification de chargement modulaire AMD.
Modèle d'espace de noms : lorsqu'il est utilisé avec d'autres plug-ins, le modèle d'espace de noms est utilisé pour éviter les conflits avec d'autres plug-ins.