jQuery 学習レッスン 7 jQuery プラグインの機能拡張 Development_jquery

jQuery の本体は次のとおりです:

(function(){ ……})();

は Javascript が苦手な人にとっては奇妙です。実際、この式は匿名関数 (最初の括弧) を宣言し、それを実行します (2 番目の括弧)。この関数で一連の jQuery メソッドとオブジェクトの定義が完了します。 24 行目は重要です。

コードをコピーします コードは次のとおりです:

jQuery = window。 jQuery = window.$ = function( selector, context ) {
// jQuery オブジェクトは実際には単に init コンストラクター '強化された'
return new jQuery.fn.init( selector, context );

ここでは、非常に強力な $ 関数が定義されています。 $ は実際には jQuery のエイリアスです。 jQuery は「本物の」jQuery 関数であり、$ の定義はプログラマによる入力の量を減らすためだけにあります。 $ は他のライブラリと競合しやすいため、たとえば、有名なプロトタイプ ライブラリもこの名前を使用します。ただし、jQuery が他のライブラリと競合する可能性ははるかに低いため、jQuery を使用する方が $ よりも安全です。次に競合について話しましょう。戻りオブジェクト fn の定義、35 行目を見てください。

コードをコピー コードは次のとおりです。

jQuery.fn = jQuery.prototype = {
init: function( selector, context ) { … }, …
};

明らかに fn は単なる jQuery のプロトタイプです略語。 init関数が定義されています。実際、init は jQuery のコンストラクターとして機能します。 var i=$('selector') のようなコードを使用すると、変数 i が jQuery によってラップされていることがわかります。つまり、 i は jQuery.fn メソッドをもたらします。明らかに、i のプロトタイプは jQuery.fn を指しています。 Javascript の世界では、i は jQuery のインスタンスであると言えます。i instanceof jQuery を実行すると、true が返されます。ただし、ここでは i=new $(selector) は使用されていません。$ はよく使われる関数なので、毎回 new を使用してオブジェクトを作成する必要があるのは非常に面倒です。 init が存在する場合、 $ 自体は非常に単純な関数として定義されており、内部のコードは 1 行だけで、 init オブジェクトを返します。 $(selector) メソッドを呼び出すたびに、jQuery オブジェクトが返されます。ちょっとファクトリーモードっぽい匂いがします。もちろん、JavaScript に精通していれば、これでは不十分であることがわかるでしょう。コードの 541 行目で、init のプロトタイプを jQuery.fn に設定する必要があります。

jQuery.fn.init.prototype = jQuery.fn ;

540 行目までは、すべて定義された jQuery プロトタイプ オブジェクトであり、540 行目以降、一連の jQuery メソッドが定義されています。静的メソッドと同等です。この時点では、メソッドの具体的な実装 (中には難しすぎるものもあります) に関係なく、jQuery の構造は基本的に明確です。拡張機能から始めましょう。

jQuery を拡張するときに最初に注意すべきことは、名前の競合、特に一般的な $ を避けることです。 jQuery は、jQuery.noConflict() メソッドを慎重に設計しました。これにより、jQuery は、他のライブラリとの競合を避けるために $ 記号を放棄でき、プログラマーは完全な記号 jQuery を使用して、jQuery が提供するメソッドを呼び出すことができます。 noConflict()の実装はシンプルで賢いです ちなみに、まず21行目で、

//
_$ = window.$, jQueryを上書きする場合に$を上書きします。最初に windows .$ を記録します。このコード行は非常に早い段階で実行され、jQuery 関数が実行される前に実行されることに注意してください。もちろん、ここで競合が発生する可能性はありますが、その可能性は非常に低いです。誰がそのような奇妙な名前をキー変数として使用するでしょうか。この時点で、$ が他のライブラリによって占有されている場合、その値はいつでも _$ に残ります。次のコードを使用して jQuery.noConflict メソッド (行 619) を呼び出すだけです:

。 コードをコピーします コードは次のとおりです。

noConflict: function( deep ) {
window.$ = _$; 🎜>if ( deep )
window.jQuery = _jQuery;
return jQuery;
},


このように$が返されます。

プラグイン開発者として、$ が解放されるかどうかを保証することはできません。最も安全なのは、jQuery メソッドを呼び出すことです。ただし、他の部分に影響を与えずに単純な $ を保持するためのトリックがあります。 :

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

(function($){

// プラグインコードがここにあり、$ を安全に使用できます。


Regarding the naming of the plugin’s js file, it is usually jquery.pluginname.js.

It is easy to extend jQuery tool functions (static functions). The following example implements a function that expands a number into a string of fixed digits.

Copy code The code is as follows:

(function($) {
$.toFixedWidth = function(value, length, fill) {
var res = value.toString();
if (!fill) fill = 0;
var padding = length - res.length;
if (padding < 0) {
res = res.substr(-padding);
} else {
for (var n = 0; n < padding; n )
res = fill res ;
}
return res;
}
})(jQuery);

It is equally easy to write a wrapper set. Here is a way to make the form elements only Reading method:

Copy code The code is as follows:

$.fn.setReadOnly = function( readonly) {
return this.find('input:text').attr('readonly', readonly).css('opacity', readonly ? 0.5 : 1.0);
}

Write a small page for testing below. This page simulates the order submission page. If the user needs an invoice, he or she needs to fill in the invoice information, otherwise the invoice information cannot be filled in.

Copy code The code is as follows:

Order ID:

Invoice Required

Inovice Tilte:
Invoice Content: