一般的に使用される jQuery テンプレート プラグイン - jQuery ボイラープレート導入_jquery

初めて jquery プラグインを開発するときは、どこから始めればよいのかわかりません。もちろん、jquery が提供する公式形式に従って簡単なプラグインを開発することもできますが、多くの場合、それは完璧ではありません。注意しないと、非常に「悪い」プラグインが作成されてしまいます。「プラグイン: 保守が難しく、拡張が難しく、使いにくく、パフォーマンスが低い... 継続的な練習を通じて徐々に蓄積されていくうちに、いくつかの問題は効果的に解決されました。は避けられましたが、新たな問題も引き起こしました。多くの jquery プラグイン開発モデルの中で、どのモデルが最適なのでしょうか?

特定の制約や仕様による jquery プラグイン開発における「混乱」を開発者が解決できるように、テンプレートを提供できれば素晴らしいと思います。ここでは実際の開発で次によく使われるjQueryテンプレートプラグイン、jQuery Boilerplate

を中心に紹介します。

jQuery ボイラープレートは、jquery プラグイン開発のための特効薬ではありません。もちろん、これは初心者向けに最も基本的なテンプレートを提供することだけが目的ではありません。 . 必要なのは、このテンプレートに基づいて対応する変更を行うことだけです。 jQuery Boilerplate が提供する基本的なテンプレートを見てみましょう (見覚えはありますか? はい、ブートストラップがこのモデルです):

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

上記のテンプレートは、開発中のほとんどのニーズを満たすことができる軽量の基本テンプレートです。たとえば、オブジェクトは 1 回だけインスタンス化され、呼び出しをチェーンし、デフォルトのパラメーターを呼び出し、パブリック メソッドとプライベート メソッドを呼び出します。例を見てみましょう:

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

しかし、実際の開発、特に一定規模のコンポーネント開発では、名前空間の競合、プラグインのスケーラビリティ、パブリック メソッドの便利な呼び出し方法など、解決すべき多くの問題に直面しています。もちろん、これは私が他の開発モードを使用したいという個人的な好みによるものです。ここで、jQuery Boilerplate には、いくつかの異なるコンポーネント開発モードも用意されており、自分に合ったものを選択できます。

軽量 (基本) モードでは、基本的なデフォルト オブジェクト、単純なコンストラクター、デフォルト パラメーターと渡されたパラメーターのマージ、オブジェクトの単純なカプセル化を防ぐためのコンストラクターなど、初心者向けのシンプルで普遍的な基本テンプレートが提供されます。

ウィジェット ファクトリ ファクトリ モード、はい、jquery ui で使用される典型的なモードで、オブジェクト指向のアプローチを使用して、jquery ui のコンポーネントのほとんどはウィジェット ファクトリの基本コンポーネントに依存しています。多数のデフォルト メソッド (イベント トリガー メソッドなど)。

ウィジェット ファクトリ RequireJS これは、AMD モジュラー読み込み仕様をサポートするために、RequireJS を使用したウィジェット ファクトリの単純なカプセル化です。
名前空間パターン: 他のプラグインと併用する場合、他のプラグインとの競合を避けるために名前空間パターンが使用されます。