jQuery プラグインとメソッドの拡張は非常に強(qiáng)力で、開発時(shí)間を大幅に節(jié)約できます。この記事では、jQuery プラグイン開発の基本、ベスト プラクティス、およびよくある落とし穴について概説します。

1. はじめに

jQuery プラグインの作成は、jQuery.fn に新しい関數(shù)屬性を追加することから始まります。コードは次のとおりです。

jQuery.fn.myPlugin = function(){
//你自己的插件代碼
};

ユーザーに愛(ài)されたシンボルはどこへ行ってしまったのでしょうか?まだ存在しますが、他の JavaScript ライブラリとの競(jìng)合を避けるために、jQuery を自己実行の閉じたプログラムに渡し、jQuery がシンボルとしてマップされるようにして、$ 記號(hào)が他のライブラリによって上書きされるのを避けることをお?jiǎng)幛幛筏蓼埂?。

コードは次のとおりです:

(function ($) {
$.fn.myPlugin = function () {
//你自己的插件代碼
};
})(jQuery);

この閉じたプログラムでは、jQuery 関數(shù)を表すために $ 記號(hào)を制限なく使用できます。

2. 環(huán)境

ここで、実際のプラグイン コードの作成を開始できます。 ただし、その前に、プラグインが配置されている環(huán)境について理解しておく必要があります。 プラグインのスコープでは、this キーワードはプラグインが実行する jQuery オブジェクトを表します。これは、コールバックを含む他の jQuery 関數(shù)では、this キーワードがネイティブ DOM 要素を表すためです。 。これにより、開発者は、以下に示すように、jQuery で this キーワードを誤って不必要にラップすることがよくあります。

コードは次のとおりです:

(function ($) {
$.fn.myPlugin = function () {
//此處沒(méi)有必要將this包在$號(hào)中如$(this)，因?yàn)閠his已經(jīng)是一個(gè)jQuery對(duì)象。
//$(this)等同于 $($('#element'));
this.fadeIn('normal', function () {
//此處callback函數(shù)中this關(guān)鍵字代表一個(gè)DOM元素
});
};
})(jQuery);
$('#element').myPlugin();

3. 基本知識(shí)

jQuery プラグインの基本を理解したので、何かを行うためのプラグインを作成しましょう。

コードは次のとおりです:

(function ($) {
$.fn.maxHeight = function () {
var max = 0;
this.each(function () {
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度
   
這是一個(gè)簡(jiǎn)單的插件，利用.height()返回頁(yè)面中高度最大的div元素的高度。

4. チェーン可能性を維持する

多くの場(chǎng)合、プラグインの目的は、単に収集された要素を何らかの方法で変更し、チェーン內(nèi)の次のメソッドに渡すことです。 これが jQuery の設(shè)計(jì)の美しさであり、jQuery が人気がある理由の 1 つです。 したがって、プラグインのチェーン可能性を維持するには、プラグインが this キーワードを返すようにする必要があります。

コードは次のとおりです:

(function ($) {
$.fn.lockDimensions = function (type) {
return this.each(function () {
var $this = $(this);
if (!type || type == 'width') {
$this.width($this.width());
}
if (!type || type == 'height') {
$this.height($this.height());
}
});
};
})(jQuery);
$('div').lockDimensions('width').CSS('color', 'red');

プラグインはこのキーワードを返すため、jQuery によって収集された要素が .css などの jQuery メソッドによって引き続き制御できるように連鎖性が維持されます。 したがって、プラグインが組み込み値を返さない場(chǎng)合は、常にスコープ內(nèi)で this キーワードを返す必要があります。 さらに、プラグインに渡されるパラメータはプラグインのスコープ內(nèi)で渡されると推測(cè)することもできます。 したがって、前の例では、文字列「width」がプラグインの型パラメータになります。

5. デフォルト値とオプション

より複雑で多くのカスタマイズ可能なオプションを提供するプラグインの場(chǎng)合は、プラグインの呼び出し時(shí)に ($.extend を使用して) 拡張できるデフォルト設(shè)定を用意するのが最善です。 したがって、多數(shù)のパラメーターを使用してプラグインを呼び出す代わりに、オーバーライドする設(shè)定を含むオブジェクト パラメーターを使用してプラグインを呼び出すことができます。コードは次のとおりです:

(function ($) {
$.fn.tooltip = function (options) {
//創(chuàng)建一些默認(rèn)值，拓展任何被提供的選項(xiàng)
var settings = $.extend({
'location': 'top',
'background-color': 'blue'
}, options);
return this.each(function () {
// Tooltip插件代碼
});
};
})(jQuery);
$('div').tooltip({
'location': 'left'
});

この例では、ツールチップ プラグインを呼び出すと、デフォルト設(shè)定の location オプションが上書きされ、background-color オプションはデフォルト値のままになります。したがって、最終的に呼び出される設(shè)定値は次のとおりです:

コードは次のとおりです:

{
'location': 'left',
'background-color': 'blue'
}

これは、開発者が利用可能なすべてのオプションを定義する必要がなく、高度に構(gòu)成可能なプラグインを提供する非常に柔軟な方法です。

6. 名前空間

プラグインに正しく名前を付けることは、プラグイン開発の非常に重要な部分です。 適切な名前空間を使用すると、プラグインが他のプラグインや同じページ上の他のコードによって上書きされる可能性が非常に低いことが保証されます。 また、名前空間を使用すると、メソッド、イベント、データをより適切に追跡できるため、プラグイン開発者としての作業(yè)が容易になります。

7. プラグインのメソッド

いずれの場(chǎng)合も、1 つのプラグインが jQuery.fnjQuery.fn オブジェクト內(nèi)に複數(shù)の名前空間を持つべきではありません。コードは次のとおりです:

(function ($) {
$.fn.tooltip = function (options) {
// this
};
$.fn.tooltipShow = function () {
// is
};
$.fn.tooltipHide = function () {
// bad
};
$.fn.tooltipUpdate = function (content) {
// !!!
};
})(jQuery);

.fn は .fn 名前空間を亂雑にするため、これはお?jiǎng)幛幛筏蓼护蟆?この問(wèn)題を解決するには、オブジェクト テキスト內(nèi)のすべてのプラグインのメソッドを収集し、メソッドの文字列名をプラグインに渡してそれらを呼び出す必要があります。コードは次のとおりです:

(function ($) {
var methods = {
init: function (options) {
// this
},
show: function () {
// is
},
hide: function () {
// good
},
update: function (content) {
// !!!
}
};
$.fn.tooltip = function (method) {
// 方法調(diào)用
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method' + method + 'does not exist on jQuery.tooltip');
}
};
})(jQuery);
//調(diào)用init方法
$('div').tooltip();
//調(diào)用init方法
$('div').tooltip({
foo: 'bar'
});
// 調(diào)用hide方法
$(‘div').tooltip(‘hide');
//調(diào)用Update方法
$(‘div').tooltip(‘update', ‘This is the new tooltip content!');

このタイプのプラグイン アーキテクチャでは、すべてのメソッドを親パッケージにカプセル化し、メソッドの文字列名とこのメソッドに必要な追加パラメータを渡すことでメソッドを呼び出すことができます。 。 このタイプのカプセル化とアーキテクチャは jQuery プラグイン コミュニティの標(biāo)準(zhǔn)であり、jQuery UI のプラグインやウィジェットを含む無(wú)數(shù)のプラグインで使用されています。

8. イベント

bind メソッドのあまり知られていない機(jī)能により、イベントの名前空間をバインドできます。 プラグインがイベントをバインドする場(chǎng)合、このイベントに名前空間を付けることをお?jiǎng)幛幛筏蓼埂?こうすることで、バインドを解除するときに、すでにバインドされている可能性のある同じタイプの他のイベントに干渉することがなくなります。 これを行うには、「.」を介してバインドする必要があるイベントに名前空間を追加します。

(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
$(window).bind('resize.tooltip', methods.reposition);
});
},
destroy: function () {
return this.each(function () {
$(window).unbind('.tooltip');
})
},
reposition: function () {
//...
},
show: function () {
//...
},
hide: function () {
//...
},
update: function (content) {
//...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
$('#fun').tooltip();
//一段時(shí)間之后… …
$(‘#fun').tooltip(‘destroy');

在這個(gè)例子中，當(dāng)tooltip通過(guò)init方法初始化時(shí)，它將reposition方法綁定到resize事件并給reposition非那方法賦予命名空間通過(guò)追加.tooltip。 稍后， 當(dāng)開發(fā)人員需要銷毀tooltip的時(shí)候，我們可以同時(shí)解除其中reposition方法和resize事件的綁定，通過(guò)傳遞reposition的命名空間給插件。 這使我們能夠安全地解除事件的綁定并不會(huì)影響到此插件之外的綁定。

九、數(shù)據(jù)

通常在插件開發(fā)的時(shí)候，你可能需要記錄或者檢查你的插件是否已經(jīng)被初始化給了一個(gè)元素。 使用jQuery的data方法是一個(gè)很好的基于元素的記錄變量的途徑。盡管如此，相對(duì)于記錄大量的不同名字的分離的data, 使用一個(gè)單獨(dú)的對(duì)象保存所有變量，并通過(guò)一個(gè)單獨(dú)的命名空間讀取這個(gè)對(duì)象不失為一個(gè)更好的方法。

. 代碼如下:

(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $(&#39;<div />&#39;, {
text: $this.attr(&#39;title&#39;)
});
// If the plugin hasn&#39;t been initialized yet
if (!data) {
/*
Do more setup stuff here
*/
$(this).data(&#39;tooltip&#39;, {
target: $this,
tooltip: tooltip
});
}
});
},
destroy: function () {
return this.each(function () {
var $this = $(this),
data = $this.data(&#39;tooltip&#39;);
// Namespacing FTW
$(window).unbind(&#39;.tooltip&#39;);
data.tooltip.remove();
$this.removeData(&#39;tooltip&#39;);
})
},
reposition: function () {
// ...
},
show: function () {
// ...
},
hide: function () {
// ...
},
update: function (content) {
// ...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === &#39;object&#39; || !method) {
return methods.init.apply(this, arguments);
} else {
$.error(&#39;Method &#39; + method + &#39; does not exist on jQuery.tooltip&#39;);
}
};
})(jQuery);

將數(shù)據(jù)通過(guò)命名空間封裝在一個(gè)對(duì)象中，可以更容易的從一個(gè)集中的位置讀取所有插件的屬性。

十、總結(jié)和最佳做法

編寫jQuery插件允許你做出庫(kù)，將最有用的功能集成到可重用的代碼，可以節(jié)省開發(fā)者的時(shí)間，使開發(fā)更高效。 開發(fā)jQuery插件時(shí)，要牢記：

1.始終包裹在一個(gè)封閉的插件：

. 代碼如下:

(function($) {
/* plugin goes here */
})(jQuery);

2.不要冗余包裹this關(guān)鍵字在插件的功能范圍內(nèi)

3.除非插件返回特定值，否則總是返回this關(guān)鍵字來(lái)維持chainability 。

4.傳遞一個(gè)可拓展的默認(rèn)對(duì)象參數(shù)而不是大量的參數(shù)給插件。

5.不要在一個(gè)插件中多次命名不同方法。

3.始終命名空間的方法，事件和數(shù)據(jù)。

最后加一個(gè)自己寫的放大鏡的插件`

(function($){$.fn.Fdj=function(){
$('#smallImg').on('mouseover', function() {
$('#slider').show();
})
$('#smallImg').on('mouseout', function() {
$('#slider').hide();
})
$('#smallImg').on('mousemove', function(e) {
var x = e.clientX - $('#slider').width() / 2;
var y = e.clientY - $('#slider').height() / 2;
if(x <= 0) {
x = 0
}
if(x > $(&#39;#smallImg&#39;).width() - $(&#39;#slider&#39;).width()) {
x = $(&#39;#smallImg&#39;).width() - $(&#39;#slider&#39;).width();
}
if(y <= 0) {
y = 0
}
if(y > $(&#39;#smallImg&#39;).height() - $(&#39;#slider&#39;).height()) {
y = $(&#39;#smallImg&#39;).height() - $(&#39;#slider&#39;).height();
}
$(&#39;#slider&#39;).css({
&#39;left&#39;: x,
&#39;top&#39;: y
})
var X=x/$(&#39;#smallImg&#39;).width()*800
var Y=y/$(&#39;#smallImg&#39;).height()*800
$(&#39;#img&#39;).css({
left:-X,
top:-Y
})
})
}
})(jQuery)

? ?