jQueryフレームワークの使い方を詳しく解説

今回は、jQueryフレームワークの使用方法と、jQueryフレームワークを使用する際の注意事項について詳しく説明します。実際のケースを見てみましょう。

以下、jQueryの実装アイデアを中心に簡略化したコードで紹介していきます~>_<~

//匿名立即执行函数
//.防止污染全局空间
//.选择性保护内部变量
(function(window, undefined){
//第二参数undefined设置而不传的原因：
// 外部发生这种情况:var undefined = 时，undefined会被篡改
// 设置第二参数而不传，则undefined就会被重置回原来值
function jQuery(sel){
return new jQuery.prototype.init(sel);
}
jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle，这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}
}
jQuery.prototype.init.prototype = jQuery.prototype;
//对外暴露jQuery：将jQuery绑定在window上面
window.$ = jQuery;
})(window);

---------------------- -- --

jQuery は最初に匿名の即時実行関数で内部をラップし、5 行目で外部に公開します。

いわゆる匿名の即時実行関数は、この関数が匿名 (名前なし) であることを意味します。定義された直後に呼び出されます

$("p") を外部から呼び出すと、実際には内部の jQuery("p") が呼び出されます;

(function(window, undefined){
//内部变量
//对外暴露jQuery：将jQuery绑定在window上面
window.$ = jQuery;
})(window);
$("p")

-------------- --- -------

さて、もう少し複雑にしましょう。次のコードは主に図に示すように相互参照を実装します。

$('p') 呼び出しを例に挙げます。コードの 2 行目からわかるように、jQuery は jQuery.prototype.init を使用して jQuery オブジェクトをインスタンス化しますが、これにより問題が発生します。 インスタンス化されたオブジェクトは、 init の下に変数があり、jQuery.prototype にアクセスできません (jQuery によって提供される API はこのオブジェクトにバインドされています)。

それでは、コードの 21 行目を記述して、init.prototype を jQuery.prototype にポイントするだけです。 これで完了です。init を使用してインスタンス化すると、init スコープで jQuery.prototype にアクセスできるようになります。

function jQuery(sel){
return new jQuery.prototype.init(sel);
}
jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle，这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}
}
jQuery.prototype.init.prototype = jQuery.prototype;

jQuery 関数を直接使用するのではなく、jQuery.prototype.init を使用してオブジェクトをインスタンス化するのはなぜですか?

jQuery 関数を使用してオブジェクトをインスタンス化すると、オブジェクト間の参照を実際に jQuery-->jQuery.prototype に単純化できるとします。

しかし、呼び出しは new $('p') のように複雑になるため、この考慮事項に基づいて (推測 (⊙0⊙))、より複雑な実装が内部で使用されて呼び出しが簡素化されます。

--------------------------

さて、最後に init の実装を見てみましょう。コードも簡素化され、最も一般的に使用される状況のみが実装されています。 jQuery は、取得した nodeList を配列に処理し (その後の使用のために)、その配下に長さやセレクターなどの変数をマウントします。

init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle，这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}

この記事の事例を読んだ後、あなたはその方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JS で一般的に使用されるテクニックとは何ですか

JS 配列メソッドの概要

以上がjQueryフレームワークの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。