jQueryプラグインの開発方法を詳しく解説

jQuery プラグインの開発

一般的に、jQuery プラグインの開発は 2 つのタイプに分けられます。1 つは jQuery 名前空間の下にぶら下がっているグローバル関数 (静的メソッドとも呼ばれます)、もう 1 つは jQuery オブジェクトです。レベル メソッド、つまり、セレクターを通じて取得された jQuery オブジェクト インスタンスもこのメソッドを共有できるように、jQuery プロトタイプの下にハングされるメソッドです。

1. jQuery 拡張

1. $.extend(object)

jQuery を拡張するために使用される .Net 拡張メソッドと同様。その後、 $.. を使用して呼び出すことができます。

$(function(){
$.extend({ fun1: function () { alert("为jQuery扩展一个fun1函数!"); } });
$.fun1();
})

2. $.fn.extend(object)

jQueryオブジェクトを拡張します。

$.fn.extend({ fun2: function () { alert("执行方法2"); } });
$("#id1").fun2();

Google を使用して確認できます:

上記の記述は、次と同等です:

$.fn.fun2 = function () { alert("执行方法2"); }
$(this).fun2();

2. プライベート ドメイン

次のように定義されます。えー

次のコードがポップアップ 123 します。

(function ($) { })(jQuery);
//相当于
var fn = function (xxoo) { };
fn(jQuery);

3. プラグインを定義する基本手順

1. スコープを定義する

jQuery プラグインを開発するときは、まずプラグイン コードを外部コードから分離する必要があります。プラグインの内部コンテンツに直接アクセスすることは許可されていないため、プラグイン内のコードは外部に影響を与えません。

//ステップ 1 プラグインのプライベート スコープを定義します

$(function(){
var fn = function (xxoo) { };
fn(alert(123));
})

これにより、プラグイン内のコードが外部の世界から確実に隔離されます。

2. jQueryを拡張する

スコープを定義した後、外部呼び出しを許可するために、プラグインをjQueryに拡張する必要があります。

(function ($) {
 
})(jQuery);

3. デフォルト値

jQuery プラグインを定義した後、一部のパラメーターにデフォルト値を持たせたい場合は、この方法で指定できます。

//步骤1 定义私有作用域
 (function ($) {
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
   
 }
 })(jQuery);

4. jQuery セレクターをサポート

//步骤1 定义私有作用域
 (function ($) {
 //步骤3 插件的默认值属性
 var defaults = {
  Id: '#id1',
 };
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
  //步骤3 合并用户自定义属性，默认属性(如果options为空，则使用defaults)
  var options = $.extend(defaults, options);
 }
 })(jQuery);

5. jQuery チェーン呼び出しをサポート

//步骤1 定义私有作用域
(function ($) {
//步骤3 插件的默认值属性
var defaults = {
 Id: '#id1',
};
//步骤2 插件的扩展方法名称
$.fn.MyFrame = function (options) {
 //步骤3 合并用户自定义属性，默认属性(如果options为空，则使用defaults)
 var options = $.extend(defaults, options);
}
//步骤4 支持jQuery选择器
this.each(function () {
 
});
})(jQuery);

6. プラグイン内部メソッド

//步骤1 定义私有作用域
 (function ($) {
 //步骤3 插件的默认值属性
 var defaults = {
  Id: '#id1',
 };
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
  //步骤3 合并用户自定义属性，默认属性(如果options为空，则使用defaults)
  var options = $.extend(defaults, options);
 }
 //步骤4 支持jQuery选择器
 //步骤5 支持链式调用(将步骤4返回)
 return this.each(function () {
 
 });
 })(jQuery);

スコープ関係による、ステップ 6 のプライベート関数は現在、プラグインによる内部使用が許可されています。