jquery プラグイン開発の extjs_jquery での extend の使用法の概要

jquery では、実際にはプラグインを作成するときに extend が使用されることが多くなります。今日は jquery と ext js での extend の使用法を同時にまとめます。まず、jquery での extend の使用法を見てみましょう。

1) extend(dest,src1,src2,src3...);

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

var start = {
id: 123,
count: 41,
desc: 'これは情報です',
title: 'ベース オブジェクト ',
タグ: '未分類',
値: [1,1,2,3,5,8,13]};
var more = { name: 'Los Techies',タグ: ' javascript'};
var extra = { カウント: 42、タイトル: null、説明: 未定義、値: [1,3,6,10]}; , more, extra);
console.log(JSON.stringify(extended));


出力結果は次のとおりです:

{ "id": 123,
"count ": 42、
"desc": "これは情報です"、
"title": null、
"tag": "javascript"、
"values": [1, 3, 6 , 10],
"name": "Los Techies"}
ご覧のとおり、実際には
extend(dest,src1,src2,src3...); src1 を拡張しています。 ,src2,src3.. .Merge into dest、戻り値はマージ後の dest の構造を変更することがわかります。マージされた結果を取得したいが、dest の構造を変更したくない場合は、次のように使用できます:
var newSrc=$.extend({},src1,src2,src3...)/ /つまり、destパラメータとして「{}」を変更します。
例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
その後マージ 結果
result={name:"Jerry",age:21,sex:"Boy"}
つまり、次のパラメータが前のパラメータと同じ名前を持つ場合、後者のパラメータも同じになります。以前のパラメータ値が上書きされます。
また、最初の例では、"desc": unknown が結果に表示されないことに注意してください。
結合すると、desc の元の値が保持されます。ただし、title:null の場合は、extend
の結果に表示されます。

2) jquery extend

1. $.extend(src) このメソッドは、次のように src を jquery のグローバル オブジェクトにマージします。 .extend({ hello:function(){alert('hello');} }); jqueryのグローバルオブジェクトにhelloメソッドをマージすることです。
2. $.fn.extend(src)
このメソッドは、次のように src を jquery インスタンス オブジェクトにマージします。
$.fn.extend({ hello:function(){alert(' hello' );} });
は、hello メソッドを jquery インスタンス オブジェクトにマージすることです。
一般的に使用される拡張の例をいくつか示します:
$.extend({net:{}});
これは、jquery グローバル オブジェクトの net 名前空間を拡張します。
$.extend($.net,{ hello:function(){alert('hello');} })
これは、以前に拡張された Jquery net 名前空間に hello メソッドを拡張します。
3 ディープコピー
// Previous.extend()
jQuery.extend( false,
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
)
// result:
// => { name: “John”, last: “Resig”, location : { 州: “MA” } }
jQuery.extend( true,
{ 名前: “ジョン”, 場所: { 都市: “ボストン” } },
{ 最後: “Resig”, 場所: { 状態: "MA" } }
);
// 結果
// => {名前: "ジョン"、姓: "Resig"、
// 場所: { 都市: “Boston”、state: “MA” } }

3) ext js の場合、違いを確認します
:


コピーcode

コードは次のとおりです: var start = { id: 123,

count: 41,

desc: 'this情報です'、
タイトル: 'ベース オブジェクト'、
タグ: '未分類'、
値: [1,1,2,3,5,8,13]}; = { 名前: 'Los Techies'、タグ: 'javascript'};
var extra = { カウント: 42、タイトル: null、説明: 未定義、
値: [1,3,6,10]} ;
var extend = Ext.apply(start, more, extra);console.log(JSON.stringify(extended));

出力
:
{ "id": 123、"count": 42、"title": null、"tag": "javascript"、"values": [1,3,6,10]、"name": "Los Techies"}
extjs では apply が使用されており、結合結果では desc が実際に失われていることがわかります。これは、extjs が undefind のものは結合結果に表示されるべきではないと考え、元のものが消去されると考えるためです。 、これに注意する必要があります