ExtJsソース学習のnamespaceとurlEncode
4946 ワード
[size=medium]
本当に耻ずかしくて、1时间半かけてやっと2つの関数を読み终わって、私はやはり比较的に简単なことを选んで见ます.2つの原因があります.一つ目は自分の基礎がしっかりしていないに違いない.正直に言うと、私のjsの基礎は確かにあまりよくなくて、いくつかのよく使われる関数でいくつかの普通の機能を実現することを知っています.自分があまり使わない関数を見ても見たくない.いくつかの関数のコードを読んでから、これらの関数はよく使われていないのではなく、もっとよく使われているようにパッケージされていることがわかりました.すべて浮躁の道に着いて、痛定は考えたことがあって、きっと直さなければなりません.第2の原因、extを书くあれらの大牛达は本当に牛すぎて、行を惜しんで金のようで、大量に|、&&と三目演算子を使って、人は十数行のコードの大牛达の一行が完成する必要があります.結果コードはコンパクトですが、可読性は低くなります.例えば、buf.push('&', e(key), '=', (!Ext.isEmpty(val) && (val != key || !empty)) ? (Ext.isDate(val) ? Ext.encode(val).replace(/"/g, '') : e(val)) : '');
感慨をあまり発表しないで、今日の読書の収穫をまとめてみましょう.
まずExt.namespace()のソースコードで、この関数の使い方については言わないで、はっきりしないのはドキュメントを調べて、Extクラスの中で.
最初の難点はo=window[d[0]=window[d[0]|{};この文の上にまずwindow[d[0]|{};Windows[d[0]]が空またはundefinedの場合は{}を返し、そうでない場合はwindow[d[0]]を返します.次にwindow[d[0]=.このwindow[val]は少し理解しにくいように見えます.Windowsオブジェクトのvalという属性に値を割り当てることを意味し、valという変数を作成することを意味する.例えばwindow['abc']='abc'の効果とvar abc='abc';同じです.(なぜか知りたいなら、W 3 CSchoolでwindowsオブジェクトの説明を見てもいいです).最後にo=window[d[0]]を実行する.
私が出会った2番目の穴はslice関数にあります.それを見たばかりの頃はどう見ているのかよく知らなかったが、W 3 CSchoolを調べてみると、配列オブジェクトの関数であるarrOjbであることが分かった.slice(start,end)は、文字列のsubstring()に似ている.汗の顔!もう一度感慨します:基礎がしっかりしていません!
この関数の戻り値は、作成したすべてのオブジェクトではなく、最後のオブジェクトを作成します.Ext.namespace(「a」,「b」,「c.d.e」)のように;オブジェクトeを返します.
そしてExt.urlEncodeです.よく使うからではなく、いじめやすいように見えるからだ.
このコードは私にとって3つの壁があります.最初のカンはe=encodeURIComponentです.「encodeURI()関数は文字列をURIとして符号化できる.URIコンポーネントに区切り記号が含まれている場合、たとえば?および#は、encodeURIComponent()メソッドを使用して、各コンポーネントをそれぞれ符号化する必要があります.’encodeURIComponentをeに付与するのは、純粋に使いやすいためです.
2番目の壁は
そうですね.この大きなコードは最初から読めませんでした.ドキュメントの関数の説明は「Takes an object and converts it to an encoded URL.e.g. Ext.urlEncode({foo: 1, bar: 2}); would return "foo=1&bar=2". Optionally, property values can be arrays, instead of keys and the resulting string that's returned will contain a name/value pair for each array value.’, この関数はjsonオブジェクトを処理してもよいし,配列を処理してもよいという意味である.パラメータがjsonオブジェクトである場合、この関数の実行過程は容易に理解できるが、パラメータが配列である場合はそれほど直接的ではない.Ext.iterateは配列オブジェクトを["a","b"]のように処理するとき、jsonオブジェクト{a:0,b:1}として見ていることが、私が上記のalertに参加するまで少し分かりません.
bufについてはpush('&', e(key), '=', (!Ext.isEmpty(val) && (val != key || !empty)) ? (Ext.isDate(val) ? Ext.encode(val).replace(/"/g,"):e(val):');この文は少し長すぎます.buf.push('&',e(key),'=')とbuf.push((!Ext.isEmpty(val)&(val!=key|!empty)?(Ext.isDate(val)?Ext.encode(val).replace(/')/g,'):e(val);では一番理解しにくいのは!Ext.isEmpty(val)&&&(val!=key|!empty)という判断になりました.今までvalが分からなかった!=key || !Emptyという条件は、valがkeyに等しい場合、どのような場合に作用しますか?もしかして{...,undefined:undefinde,...}または{...,null=null,...}この2つのパラメータの場合?この2つの奇妙なパラメータが入力されていなければ(!Ext.isEmpty(val)&&(val!=key|!empty))を簡略化することができます!Ext.isEmpty(val)になりました.残りも理解できました.
3番目のカンはbufです.shif()この関数:arrayObject.shift()メソッドは、配列の最初の要素を削除し、最初の要素の値を返すために使用されます.
ps:出会ったカンジが多ければ多いほど、驚かされない限り、収穫は大きくなる.
昨日はExt.extendのソースコードを見ていたのですが、さすがにショックでした.
[/size]
本当に耻ずかしくて、1时间半かけてやっと2つの関数を読み终わって、私はやはり比较的に简単なことを选んで见ます.2つの原因があります.一つ目は自分の基礎がしっかりしていないに違いない.正直に言うと、私のjsの基礎は確かにあまりよくなくて、いくつかのよく使われる関数でいくつかの普通の機能を実現することを知っています.自分があまり使わない関数を見ても見たくない.いくつかの関数のコードを読んでから、これらの関数はよく使われていないのではなく、もっとよく使われているようにパッケージされていることがわかりました.すべて浮躁の道に着いて、痛定は考えたことがあって、きっと直さなければなりません.第2の原因、extを书くあれらの大牛达は本当に牛すぎて、行を惜しんで金のようで、大量に|、&&と三目演算子を使って、人は十数行のコードの大牛达の一行が完成する必要があります.結果コードはコンパクトですが、可読性は低くなります.例えば、buf.push('&', e(key), '=', (!Ext.isEmpty(val) && (val != key || !empty)) ? (Ext.isDate(val) ? Ext.encode(val).replace(/"/g, '') : e(val)) : '');
感慨をあまり発表しないで、今日の読書の収穫をまとめてみましょう.
まずExt.namespace()のソースコードで、この関数の使い方については言わないで、はっきりしないのはドキュメントを調べて、Extクラスの中で.
namespace : function(){
var o, d;
Ext.each(arguments, function(v) {
d = v.split(".");
o = window[d[0]] = window[d[0]] || {};
Ext.each(d.slice(1), function(v2){
o = o[v2] = o[v2] || {};
});
});
return o;
}
最初の難点はo=window[d[0]=window[d[0]|{};この文の上にまずwindow[d[0]|{};Windows[d[0]]が空またはundefinedの場合は{}を返し、そうでない場合はwindow[d[0]]を返します.次にwindow[d[0]=.このwindow[val]は少し理解しにくいように見えます.Windowsオブジェクトのvalという属性に値を割り当てることを意味し、valという変数を作成することを意味する.例えばwindow['abc']='abc'の効果とvar abc='abc';同じです.(なぜか知りたいなら、W 3 CSchoolでwindowsオブジェクトの説明を見てもいいです).最後にo=window[d[0]]を実行する.
私が出会った2番目の穴はslice関数にあります.それを見たばかりの頃はどう見ているのかよく知らなかったが、W 3 CSchoolを調べてみると、配列オブジェクトの関数であるarrOjbであることが分かった.slice(start,end)は、文字列のsubstring()に似ている.汗の顔!もう一度感慨します:基礎がしっかりしていません!
この関数の戻り値は、作成したすべてのオブジェクトではなく、最後のオブジェクトを作成します.Ext.namespace(「a」,「b」,「c.d.e」)のように;オブジェクトeを返します.
そしてExt.urlEncodeです.よく使うからではなく、いじめやすいように見えるからだ.
urlEncode : function(o, pre){
var empty,
buf = [],
e = encodeURIComponent;
Ext.iterate(o, function(key, item){
//alert("key="+key+",item="+item);
empty = Ext.isEmpty(item);
Ext.each(empty ? key : item, function(val){
buf.push('&', e(key), '=', (!Ext.isEmpty(val) && (val != key || !empty)) ? (Ext.isDate(val) ? Ext.encode(val).replace(/"/g, '') : e(val))
: '');
});
});
if(!pre){
buf.shift();
pre = '';
}
return pre + buf.join('');
}
このコードは私にとって3つの壁があります.最初のカンはe=encodeURIComponentです.「encodeURI()関数は文字列をURIとして符号化できる.URIコンポーネントに区切り記号が含まれている場合、たとえば?および#は、encodeURIComponent()メソッドを使用して、各コンポーネントをそれぞれ符号化する必要があります.’encodeURIComponentをeに付与するのは、純粋に使いやすいためです.
2番目の壁は
Ext.iterate(o, function(key, item){
empty = Ext.isEmpty(item);
Ext.each(empty ? key : item, function(val){
buf.push('&', e(key), '=', (!Ext.isEmpty(val) && (val != key || !empty)) ? (Ext.isDate(val) ? Ext.encode(val).replace(/"/g, '') : e(val))
: '');
});
});
そうですね.この大きなコードは最初から読めませんでした.ドキュメントの関数の説明は「Takes an object and converts it to an encoded URL.e.g. Ext.urlEncode({foo: 1, bar: 2}); would return "foo=1&bar=2". Optionally, property values can be arrays, instead of keys and the resulting string that's returned will contain a name/value pair for each array value.’, この関数はjsonオブジェクトを処理してもよいし,配列を処理してもよいという意味である.パラメータがjsonオブジェクトである場合、この関数の実行過程は容易に理解できるが、パラメータが配列である場合はそれほど直接的ではない.Ext.iterateは配列オブジェクトを["a","b"]のように処理するとき、jsonオブジェクト{a:0,b:1}として見ていることが、私が上記のalertに参加するまで少し分かりません.
bufについてはpush('&', e(key), '=', (!Ext.isEmpty(val) && (val != key || !empty)) ? (Ext.isDate(val) ? Ext.encode(val).replace(/"/g,"):e(val):');この文は少し長すぎます.buf.push('&',e(key),'=')とbuf.push((!Ext.isEmpty(val)&(val!=key|!empty)?(Ext.isDate(val)?Ext.encode(val).replace(/')/g,'):e(val);では一番理解しにくいのは!Ext.isEmpty(val)&&&(val!=key|!empty)という判断になりました.今までvalが分からなかった!=key || !Emptyという条件は、valがkeyに等しい場合、どのような場合に作用しますか?もしかして{...,undefined:undefinde,...}または{...,null=null,...}この2つのパラメータの場合?この2つの奇妙なパラメータが入力されていなければ(!Ext.isEmpty(val)&&(val!=key|!empty))を簡略化することができます!Ext.isEmpty(val)になりました.残りも理解できました.
3番目のカンはbufです.shif()この関数:arrayObject.shift()メソッドは、配列の最初の要素を削除し、最初の要素の値を返すために使用されます.
ps:出会ったカンジが多ければ多いほど、驚かされない限り、収穫は大きくなる.
昨日はExt.extendのソースコードを見ていたのですが、さすがにショックでした.
[/size]