JavaScript_jquery 用の jQuery ライブラリ プラグインの簡単な開発ガイド

jQuery プラグインは通常 2 つのカテゴリに分類されます。

1. セレクターベースのプラグイン (チェーン操作をサポート)
2. セレクターに基づいていないプラグイン (チェーン操作をサポートしていません)

私は少し前に jQuery プラグイン開発を簡単に学び、2 つの単純なプラグインを開発しました。以下に 2 つのプラグインの開発モデルの簡単な概要を示します。
セレクターベースのプラグイン

通常の開発モデルは次のとおりです:

(function($, window, undefined) {
 $.fn.PluginName = function(opts) {
 var defaults = {
  // 插件自定义选项的默认值
 };

 // 以用户的自定义选项覆盖默认选项
 var options = $.extend(defaults, opts || {});

 return this.each(function() { // 让插件支持链式操作
  // 在这里编写插件功能代码
 });
 };
})(jQuery, window);

まず、仮パラメータ $ 、 window と未定義の実パラメータ jQuery と window を使用して匿名の自己実行関数を作成します。

え？未定義に渡される対応する実際のパラメータがないのはなぜですか?これはちょっとしたトリックで、変数名 unknown が他の場所で JavaScript コードに値が割り当てられ、その本当の意味が失われている可能性があることを考慮して、匿名の自己実行関数内にあることを保証するために、ここではこのパラメーターを渡しません。 . 本当に不定です。

jQuery が渡された後は、$ に対応します。これにより、プラグインで呼び出される $ は Prototype などのライブラリではなく jQuery であることが保証されます。

このタイプのプラグインの呼び出しメソッドは、通常 $(selector).PluginName(); の形式になります。

そのような具体的な例は、https://github.com/libuchao/KTwitter で見つけることができます
非セレクターベースのプラグイン

このタイプのプラグインはセレクターに依存しないため、チェーン操作はありません。一般的な開発モデルは次のとおりです:

(function($, window, undefined) {
 $.PluginName = function(opts) {
 var defaults = {
  // 插件自定义选项的默认值
 };

 // 以用户的自定义选项覆盖默认选项
 var options = $.extend(defaults, opts || {});

 // 在这里编写插件功能代码
 };
})(jQuery, window);

このタイプのプラグインの呼び出し形式は通常 $(selector).PluginName(); です。