jQueryのソースコードでJavaScriptを学ぶ(2)_jquery-jsチュートリアル-php.cn

jQueryのソースコードでJavaScriptを学ぶ(2)_jquery

WBOY

リリース： 2016-05-16 17:45:10

オリジナル

1058 人が閲覧しました

賢い 1: 関数

関数は、JavaScript コードでは稀な才能です。
♥ コードセグメントを配置し、比較的独立した関数をカプセル化できます。
♥ クラスを実装し、OOP アイデアを注入することもできます。
jQuery は関数ですが、クラスと考えることもできます (笑、それ自体がクラスです)。

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

 
(function(){ 
var jQuery = function() { 
// 関数本体 
} 
window.jQuery = window.$ = jQuery; 
console.log(jQuery); ; 

 

上記の空の関数は、いわゆるコンストラクターです。コンストラクターは、オブジェクト指向言語のクラスの基本メソッドです。

賢い 2: 拡張プロトタイプ
プロトタイプオブジェクトとは何ですか?
http://www.jb51.net/article/32857.htm について読むことができるブログ投稿を紹介します。
JavaScript はプロトタイプ属性をすべての関数にバインドし、この属性はプロトタイプオブジェクトを指します。クラスの継承されたプロパティとメソッドをプロトタイプオブジェクトで定義します。

プロトタイプオブジェクトは、JavaScript が継承を実装するための基本メカニズムです。

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

(function(){ 
var jQuery = function () { 
// 関数本体 
} 
jQuery.fn = jQuery.prototype = { 
// 拡張プロトタイプ オブジェクト 
jquery: "1.8.3", 
test: function() { 
console.log('test'); 
} 
} 
window.jQuery = window.$ = jQuery; 
 >
(new jQuery()).test(); 

 
 賢い 3: ファクトリ メソッドを使用してインスタンスを作成する 

上記のメソッドは次のように呼び出す必要があります。メソッドを使用すると、大量のオブジェクトが生成され、メモリが無駄に消費されます。

(new jQuery()).test();
jQuery のソースコードは、呼び出しに非常にソフトなメソッド (よく知られたファクトリーメソッドでもあります) を使用します。

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

(function(){

var jQuery = function () { 
// 関数本体
return jQuery.fn.init(); 
} 
jQuery.fn = jQuery.prototype = { 
// 拡張プロトタイプ オブジェクト
jquery : "1.8.3", 
init: function() { 
return this; 
}, 
test: function() { 
console.log('test') ; 
} 
} 
window.jQuery = window.$ = jQuery; 
jQuery().test(); 

想像 1: jQuery 関数本体がオブジェクトを直接返すようにします - 私はこれを使用します

コードをコピー

コードは次のとおりです: (function(){ var jQuery = function() { return this; }

jQuery.fn = jQuery.prototype = {

//拡張プロトタイプ オブジェクト
jquery: "1.8.3", 
test: function() { 
console.log('test'); 🎜>} 
} 
window.jQuery = window.$ = jQuery; 
})(); 

出力結果

 これが Window オブジェクトを指していることがわかりました。

想像 2: jQuery 関数本体がクラスのインスタンスを直接返すようにします。

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

(function(){ var jQuery = function() { return new jQuery(); } jQuery.fn = jQuery.prototype = { // 拡張プロトタイプオブジェクト

jquery: "1.8. 3",

test: function() { 
console.log('test'); 
} 
} 
window.jQuery = window.$ = jQuery; 
}) (); 
console.log(jQuery()); 

 
結果の出力




上記は再帰的な無限ループであり、メモリオーバーフローが発生していることがわかりました。 

賢い 4: スコープを分ける

考え方 1: init() メソッドによって返される this スコープは何ですか?

コードをコピー

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

 
(function(){ 
var jQuery = function() { 
// 関数本体
return jQuery.fn.init(); 
} 
jQuery.fn = jQuery.prototype = { 
// 拡張プロトタイプ オブジェクト 
jquery: "1.8.3", 
init: function() { 
this.init_jquery = '2.0' >return this; ; 
} 
} 
window.jQuery = window.$ = jQuery; 
console.log(jQuery().jquery); (jQuery().init_jquery); 

 
出力結果

init() メソッドのこのスコープ: this キーワードは init() 関数を参照しますスコープが配置されているオブジェクトは、上位レベルのオブジェクトである jQuery.fn オブジェクトの関数にアクセスすることもできます。 ——このような考え方はスコープの独立性を破壊することになり、jQueryフレームワークに悪影響を及ぼす可能性があります。

考え 2: init() でこれを jQuery.fn オブジェクトから分離するにはどうすればよいでしょうか? ——init 初期化タイプをインスタンス化します。

コードをコピーコードは次のとおりです。 (function(){

var jQuery = function () {

// 関数本体
return new jQuery.fn.init(); 
} 
jQuery.fn = jQuery.prototype = { 
// 拡張プロトタイプ オブジェクト
 jquery: "1.8.3", 
init: function() { 
this.init_jquery = '2.0'; 
return this; 
} 
} 
ウィンドウ。 jQuery = ウィンドウ .$ = jQuery; 
console.log(jQuery().jquery); 

 
 出力結果 


 は、init() 型をインスタンス化することによって初期化され、これを init() メソッド内で制限し、init() 関数内でのみアクティブになり、外部に出力されるのを防ぎます。範囲。 

Ingenious 5:

を渡すプロトタイプ考え方 1: Ingenious 4 では、これを init() 内で jquery.fn オブジェクトから分離します。では、「Smart 4」を確保しながら jQuery プロトタイプオブジェクトにアクセスするにはどうすればよいでしょうか? ——原型譲渡。
jQuery のプロトタイプオブジェクトで init() コンストラクターのプロトタイプオブジェクトをオーバーライドします。

コードをコピー

コードは次のとおりです。 jQuery.fn.init.prototype = jQuery .fn;

すべてのコード:

コードをコピー

コードは次のとおりです: (function(){ var jQuery = function() { // 関数本体

return new jQuery.fn.init();

} 
jQuery. fn = jQuery.prototype = { 
// 拡張プロトタイプ オブジェクト 
jquery: "1.8.3", 
init: function() { 
this.init_jquery = '2.0' 
return;これ; 
} 
} 
jQuery.fn.init.prototype = jQuery.fn; 
window.jQuery = window.$ = jQuery; 
コンソール.log(jQuery() .jquery); 
console.log(jQuery().init_jquery); 

 
出力結果