ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryのソースコードでJavaScriptを学ぶ(3)_jquery

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

WBOY
リリース: 2016-05-16 17:45:07
オリジナル
1005 人が閲覧しました

質問

最初の記事で、ブロガーが次のような質問をしました。理解できましたら、1 つまたは 2 つ教えてください。

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

var str = "test" ;
for(var a in str){
console.log(a ":" str[ a ])
}

出力結果
これは String オブジェクトなので、for を使用すると上記の状況が発生します。

自己呼び出し匿名関数 (function(){})(window)
コードをコピーコードは次のとおりです:

(function(window, unknown){
// jquery code
})(window);

コード分析:

最初の括弧: 匿名関数を作成します。
2 番目の括弧: すぐに実行します。

ウィンドウ変数を渡す理由:
ウィンドウ変数をグローバル変数からローカル変数に変更します。アクセスを高速化するためにスコープ チェーンを最上位スコープに戻す必要はありません。窓へ。
パラメータ リストに未定義を追加する理由:
自己呼び出し匿名関数のスコープ内で、未定義が本当に未定義であることを確認します。
この設計の利点:
プライベート名前空間を作成します。関数本体内の変数とメソッドはグローバル空間に影響を与えません。他のプログラムの変数と競合しません。

関数拡張 extend()

一般的な設計習慣に従って、ドット (.) 構文を通じて直接実装するか、プロトタイプ オブジェクトに属性を追加することによって実装できます。構造。 。 ——jQuery フレームワークは、extend() 関数による関数拡張を実装します。
同様の方法を実行してみましょう。 ——指定されたパラメータ オブジェクトに含まれるすべてのプロパティを cQuery または cQuery.prototype オブジェクトにコピーします。
コードをコピー コードは次のとおりです。

(function(){
var
_cQuery = window.cQuery,
cQuery = function(){
return new cQuery.fn.init();

cQuery.fn = cQuery.prototype = {
init : function () {
これを返します;
}
};
cQuery.fn.init.prototype = cQuery.fn; cQuery.fn .extend = function( obj ) {
for (var prop in obj) {
this[ prop ] = obj[ prop ];
return this; 🎜>
cQuery.fn.extend({
test : function() {
console.log('Test!');
}
}); = window.cQuery = cQuery;
})();
C().test(); の利点:
ユーザーが迅速に拡張できるように jQuery フレームワークの機能は、jQuery フレームワークのプロトタイプ構造を破壊しません。
2. 便利な管理。
注:
プロトタイプによって拡張されたオブジェクトの場合、インスタンス化関数 (cQuery().test() など) を通じて呼び出す必要がありますが、cQuery.test() は使用できません。


オブジェクト URL パラメータ化された param()




コードをコピー


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

(function (){
var
_cQuery = window.cQuery, cQuery = function(){ return new cQuery.fn.init(); }; cQuery .fn = cQuery.prototype = { init : function () {
return this;
}
};

cQuery.param = function(obj); 🎜> var prefix, s = [];
for ( prefix in obj ) {
s[ s.length ] = encodeURIComponent( prefix ) "=" encodeURIComponent( obj[ prefix ]); 🎜> return s.join( "&" );
}


cQuery.fn.init.prototype = cQuery.fn;
window.C = window.cQuery = cQuery;
})();

var param({"名前":"川山家", "年齢":30}); >

結果の出力



オブジェクト URL のパラメータ化: 構造化とメンテナンスの容易化に役立ちます。 URLの後にパラメータリストを追加すると、目まいがしませんか?


まとめ


とりあえずここに書いておきます 何か補足があれば幸いです。 ——もっとコミュニケーションをとって、お互い学び合いましょう。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート