$.extend()メソッドと(function($){...})(jQuery)詳細
5002 ワード
1 $.extend()
プロジェクトの中にはこの方法が役に立つところがあるので、その時もどういう意味なのか分からなかったので、たくさん見たら知りたいです.もともとこの方法はとても役に立ち、プラグインの作成に多く使われていました.もちろん、それ自体にもいくつかのリロードプロトタイプがあります.
1.1 extend(result,item1,item2…..)
ここでこの方法は主にマージに用いられ,すべてのパラメータ項目をresultにマージしてresultを返すが,resultの構造を破壊する.
1.2 extend({},item1,item2,……)
この方法では,得られた結果をすべて{}に集計して返すことができ,既存のアイテムの構造を破壊することはない.
例:
Var item={name:”olive”,age:23};
Var item1={name:”Momo”,sex:”gril”};
Var result=$.extend({},item,item1);
結果:
Result={name:”Momo”,age:23,sex:”gril”};
説明:
以上の結果はextendメソッドがすべてのアイテムを{}に統合していることを示していますが、注意するとitem 1のname:“Momo”がitemのname:“olive”を上書きしていることがわかります.これはどういうことですか.続けて下を見てください.
1.3 extend(bool,{},item1,item2….)
Extendメソッドにはbool型パラメータ付きのリロードもあります.
bool型パラメータがtrueであれば深いコピー,falseであれば浅いコピーを表す.具体的には、以下の例で説明します.
例:
var item={name:“olive”,age:23,address{provice:“河南”,city:“鄭州”}};
var item 1={sex:"girl",address{city:"北京"}};
var result=$.extend(true,item,item1);
var result1=$.extend(false,item,item1);
結果:
Result={name:[olive],age:23,sex:[gril],address:{provice:[河南],city:[北京]}}};
Result 1={name:[olive],age:23,sex:[gril],address:{city:[北京]}}
説明:
以上の結果から,パラメータがtureの場合,すなわち深コピーであり,サブアイテムitem 1のサブアイテムがitemのサブアイテムと同じ属性の値と異なる場合,item 1のサブアイテムの値はitemのサブアイテムの値を上書きし,サブアイテムitem 1の属性がitemの属性と異なる場合,itemとマージする.
パラメータがfalseの場合、サブアイテムitem 1のサブアイテムはitemのサブアイテム属性と同じであり、item 1のサブアイテムの属性値はitemの値を完全に上書きします.
1.4 $.extend(item)
この方法はitemをJqueryのグローバルオブジェクトにマージすることであり、Jqueryのグローバルオブジェクトに1つ追加することに相当する.
スタティックメソッド(ここでのスタティックメソッドに対応して、もちろん実例メソッドもありますが、後述します).
例:
$.extend({SayHello:function(value){alert(“hello “+value);}});
このように書くと、SayHelloメソッドを直接呼び出すことができます.
$.SayHello(“Olive”);
説明:このメソッドは、Jqueryクラスに新しいメソッドを追加することに相当します.
1.5 $.fn.extend(item)
上記の$extend(item)はJqueryクラスに静的メソッドを追加したと言いますが、ここの$.fn.extend(item
)は、インスタンスごとにインスタンスメソッドを追加することです.
例:
$.fn.extend({hello:function(value){alert(“hello “+value);}});
このように書くと、各例を取得した後、メソッドを呼び出すことができます.
$(“#id”).hello(“Olive”);
2.(function($){….})(jQuery)
初めてこの書き方を見たとき、霧が立ち込めて、何が起こっているのか分からなかった.ネットでいくつかの資料を探してからやっと少し分かりました.まず最初の括弧の中の内容を見てみましょう:function($){....}これは匿名の関数ではないでしょうか.しかし、そのパラメータは比較的奇妙で、$で、ここでは主に他のライブラリと衝突しないためです.これにより、最初のカッコ内の内容が匿名関数を定義していることが分かりやすくなります.関数を呼び出すときは、関数名の後ろにカッコと実パラメータを付けますが、オペレータの優先度で定義した匿名関数も()で囲む必要があります.
今、皆さんはこの言葉がどういう意味なのかよく知っていると思います.1番目の括弧は匿名関数を定義し、2番目の関数はその関数が伝達するパラメータを表し、全体的に結合すると、匿名関数を定義し、その後、jQueryとして実パラメータを呼び出すことを意味します.
function fun($){...};fun(jQuery);
この方法は開発したプラグインを格納するために多く用いられ,その中のコードを実行するとDomオブジェクトが必ずしもロードされるとは限らない.これとは逆に$(function(){})であり,この方法は使用時にページのDomオブジェクトがロードされた.実際、この方法のすべては$(document)と書かれています.ready(function(){});
いったい「(function($){...})(jQuery)」はどのように理解しますか.
コード1:
説明:ブラウザで上記のコードを実行すると、GaoHuanjieというダイアログボックスが表示されます.
上のコードで実行されるJavaScriptスクリプトと"(function($){...})(jQuery)「同じです.つまり」(function($){...})(jQuery)」の関数は自動的に実行されますが、「(function($){...}(jQuery)」は?“(function($){...})(jQuery)」は実際に呼び出し状態にある匿名関数:function($){...}を表す.は、$として定義された匿名関数です(パラメータを$と宣言したのは、他のライブラリと競合しないためです).この関数を呼び出すために匿名関数の後ろに括弧と実参(ここではjQuery)を付けたが、オペレータの優先度のため、関数自体も括弧を使う必要があるため、匿名関数に括弧を加えた.疑問を解きほぐす:
一、私は次のコードを実行してなぜエラーを報告したのか--jQuery is not defined:
うんうん、ブラウザは上述のjsスクリプトを解析する時確かに問題が発生することができて、もしjQueryのために英語の二重引用符を追加するならば、再びブラウザを使って上述のスクリプトを実行して間違いがなくて、どうしてプラスしないで間違いが発生することができて、ほほほ、実はここのjQueryはまだ1つの変数で、上述のコードのためにjQueryライブラリを導入するならば、ブラウザを使用して上記のコードを再度実行しても問題は発生しません.
jQueryライブラリを導入してもエラーが発生しないのは、jQueryライブラリでjQuery変数が定義されているためです.
二、$(function(){})と比較して、(function($){...})(jQuery)の実行タイミングも、ページDOMのロードが完了してから実行されるのでしょうか?
いいえ、例えば次の例です.
上記の例ではブラウザで実行中にエラーが発生しますが、その原因を究明します(function(){...})()関数の実行タイミングは、DOMのロードが完了した後に実行されるのではなく、ページが上から下になるにつれて実行されます.次のコードに変更すると、ブラウザを使用してスクリプトを再度実行しても問題はありません.
一言:$(function(){});」操作DOMオブジェクトを格納するためのコードであり、コードを実行するとDOMオブジェクトが既に存在する.“(function(){})(jQuery);”開発プラグインを格納するためのコードであり,コードを実行する際にDOMが存在するとは限らない.
プロジェクトの中にはこの方法が役に立つところがあるので、その時もどういう意味なのか分からなかったので、たくさん見たら知りたいです.もともとこの方法はとても役に立ち、プラグインの作成に多く使われていました.もちろん、それ自体にもいくつかのリロードプロトタイプがあります.
1.1 extend(result,item1,item2…..)
ここでこの方法は主にマージに用いられ,すべてのパラメータ項目をresultにマージしてresultを返すが,resultの構造を破壊する.
1.2 extend({},item1,item2,……)
この方法では,得られた結果をすべて{}に集計して返すことができ,既存のアイテムの構造を破壊することはない.
例:
Var item={name:”olive”,age:23};
Var item1={name:”Momo”,sex:”gril”};
Var result=$.extend({},item,item1);
結果:
Result={name:”Momo”,age:23,sex:”gril”};
説明:
以上の結果はextendメソッドがすべてのアイテムを{}に統合していることを示していますが、注意するとitem 1のname:“Momo”がitemのname:“olive”を上書きしていることがわかります.これはどういうことですか.続けて下を見てください.
1.3 extend(bool,{},item1,item2….)
Extendメソッドにはbool型パラメータ付きのリロードもあります.
bool型パラメータがtrueであれば深いコピー,falseであれば浅いコピーを表す.具体的には、以下の例で説明します.
例:
var item={name:“olive”,age:23,address{provice:“河南”,city:“鄭州”}};
var item 1={sex:"girl",address{city:"北京"}};
var result=$.extend(true,item,item1);
var result1=$.extend(false,item,item1);
結果:
Result={name:[olive],age:23,sex:[gril],address:{provice:[河南],city:[北京]}}};
Result 1={name:[olive],age:23,sex:[gril],address:{city:[北京]}}
説明:
以上の結果から,パラメータがtureの場合,すなわち深コピーであり,サブアイテムitem 1のサブアイテムがitemのサブアイテムと同じ属性の値と異なる場合,item 1のサブアイテムの値はitemのサブアイテムの値を上書きし,サブアイテムitem 1の属性がitemの属性と異なる場合,itemとマージする.
パラメータがfalseの場合、サブアイテムitem 1のサブアイテムはitemのサブアイテム属性と同じであり、item 1のサブアイテムの属性値はitemの値を完全に上書きします.
1.4 $.extend(item)
この方法はitemをJqueryのグローバルオブジェクトにマージすることであり、Jqueryのグローバルオブジェクトに1つ追加することに相当する.
スタティックメソッド(ここでのスタティックメソッドに対応して、もちろん実例メソッドもありますが、後述します).
例:
$.extend({SayHello:function(value){alert(“hello “+value);}});
このように書くと、SayHelloメソッドを直接呼び出すことができます.
$.SayHello(“Olive”);
説明:このメソッドは、Jqueryクラスに新しいメソッドを追加することに相当します.
1.5 $.fn.extend(item)
上記の$extend(item)はJqueryクラスに静的メソッドを追加したと言いますが、ここの$.fn.extend(item
)は、インスタンスごとにインスタンスメソッドを追加することです.
例:
$.fn.extend({hello:function(value){alert(“hello “+value);}});
このように書くと、各例を取得した後、メソッドを呼び出すことができます.
$(“#id”).hello(“Olive”);
2.(function($){….})(jQuery)
初めてこの書き方を見たとき、霧が立ち込めて、何が起こっているのか分からなかった.ネットでいくつかの資料を探してからやっと少し分かりました.まず最初の括弧の中の内容を見てみましょう:function($){....}これは匿名の関数ではないでしょうか.しかし、そのパラメータは比較的奇妙で、$で、ここでは主に他のライブラリと衝突しないためです.これにより、最初のカッコ内の内容が匿名関数を定義していることが分かりやすくなります.関数を呼び出すときは、関数名の後ろにカッコと実パラメータを付けますが、オペレータの優先度で定義した匿名関数も()で囲む必要があります.
今、皆さんはこの言葉がどういう意味なのかよく知っていると思います.1番目の括弧は匿名関数を定義し、2番目の関数はその関数が伝達するパラメータを表し、全体的に結合すると、匿名関数を定義し、その後、jQueryとして実パラメータを呼び出すことを意味します.
function fun($){...};fun(jQuery);
この方法は開発したプラグインを格納するために多く用いられ,その中のコードを実行するとDomオブジェクトが必ずしもロードされるとは限らない.これとは逆に$(function(){})であり,この方法は使用時にページのDomオブジェクトがロードされた.実際、この方法のすべては$(document)と書かれています.ready(function(){});
いったい「(function($){...})(jQuery)」はどのように理解しますか.
コード1:
<script type="text/javascript">
(function(name){
alert(name);
})("GaoHuanjie");
</script>
説明:ブラウザで上記のコードを実行すると、GaoHuanjieというダイアログボックスが表示されます.
上のコードで実行されるJavaScriptスクリプトと"(function($){...})(jQuery)「同じです.つまり」(function($){...})(jQuery)」の関数は自動的に実行されますが、「(function($){...}(jQuery)」は?“(function($){...})(jQuery)」は実際に呼び出し状態にある匿名関数:function($){...}を表す.は、$として定義された匿名関数です(パラメータを$と宣言したのは、他のライブラリと競合しないためです).この関数を呼び出すために匿名関数の後ろに括弧と実参(ここではjQuery)を付けたが、オペレータの優先度のため、関数自体も括弧を使う必要があるため、匿名関数に括弧を加えた.疑問を解きほぐす:
一、私は次のコードを実行してなぜエラーを報告したのか--jQuery is not defined:
<script type="text/javascript">
(function($){
alert($);
})(jQuery);
</script>
うんうん、ブラウザは上述のjsスクリプトを解析する時確かに問題が発生することができて、もしjQueryのために英語の二重引用符を追加するならば、再びブラウザを使って上述のスクリプトを実行して間違いがなくて、どうしてプラスしないで間違いが発生することができて、ほほほ、実はここのjQueryはまだ1つの変数で、上述のコードのためにjQueryライブラリを導入するならば、ブラウザを使用して上記のコードを再度実行しても問題は発生しません.
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
(function($){
alert($);
})(jQuery);
</script>
jQueryライブラリを導入してもエラーが発生しないのは、jQueryライブラリでjQuery変数が定義されているためです.
二、$(function(){})と比較して、(function($){...})(jQuery)の実行タイミングも、ページDOMのロードが完了してから実行されるのでしょうか?
いいえ、例えば次の例です.
<script type="text/javascript">
(function(){
alert(document.getElementById("name").value);
})();
</script>
上記の例ではブラウザで実行中にエラーが発生しますが、その原因を究明します(function(){...})()関数の実行タイミングは、DOMのロードが完了した後に実行されるのではなく、ページが上から下になるにつれて実行されます.次のコードに変更すると、ブラウザを使用してスクリプトを再度実行しても問題はありません.
<script type="text/javascript">
(function(){
alert(document.getElementById("name").value);
})();
</script>
一言:$(function(){});」操作DOMオブジェクトを格納するためのコードであり、コードを実行するとDOMオブジェクトが既に存在する.“(function(){})(jQuery);”開発プラグインを格納するためのコードであり,コードを実行する際にDOMが存在するとは限らない.