JavaScript フレームワーク設計の読書ノート シード module_javascript スキル

1. ネームスペース :

js の名前空間は、オブジェクトのプロパティを使用して拡張されます。たとえば、ユーザーは A オブジェクトを定義します。A オブジェクトの下には、B 属性と C 属性が存在します。同時に、B 属性と C 属性もオブジェクトです。したがって、A={B:{},C:{}} の場合、ユーザーは B オブジェクトと C オブジェクトに同じメソッドとプロパティを定義できます。したがって、B と C は異なる名前空間に属します。オブジェクト B および C のメソッドを呼び出すときは、A.B.like() および A.C.like() を通じて呼び出すことができます。もちろん、A は window オブジェクトのプロパティに属します。

しかし、たとえば boke.jsp ページで jquery.js とprototype.js (これらは window オブジェクトに $ 属性を追加します) を導入すると、競合が発生するという状況があります。

したがって、jquery.js には競合を処理するための noConflict() があります。実行プロセス: このとき、プロトタイプは window の $ 属性を占有します。その後、jquery が導入されると、jquery は前のウィンドウの $ 属性を _$ に格納し、$ 属性自体を使用します。現時点では、$ を介して jquery メソッドを呼び出すことができます。今は jquery を使用する必要はないが、プロトタイプを使用したい場合は、$.noConflict() を呼び出すことができます。$ はプロトタイプ オブジェクトに復元されます。現時点では、$ を通じてプロトタイプ メソッドを使用できます。

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

var _$ = window.$、_jQuery= window.jQuery
noConflict:function(deep){
window.$ = _$;
if(deep) window.jQuery = _jQuery;
jQuery を返します。
}

2. オブジェクト拡張子 :

名前空間オブジェクトができたので、機能を拡張する必要があります。例: オブジェクト A のすべてのプロパティとメソッドをオブジェクト B にコピーする必要があります。 B オブジェクトに 1 つずつコードを記述する必要はありません。

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

関数 mix(ターゲット, ソース){
var args = [].slice.call(引数),i=1,
IScover = Typeof ARGS [ARGS.Length-] == "Boolean"? Args.pop (): True; // 書き込みません。デフォルトは true で、デフォルトはカバーされます。
if(args.length == 1){ target = !this.window? this:{};
//オブジェクトパラメータが 1 つだけの場合は、このオブジェクトを展開します。たとえば、A オブジェクトのコンテキストで mix(B) を呼び出します。すると、これは A なので、B のプロパティとメソッドが A オブジェクトに追加されます。ただし、mix(B) が wi​​ndow で呼び出された場合、B オブジェクト内のプロパティとメソッドは空のオブジェクトに追加され、window オブジェクト内の同じ名前のプロパティとメソッドが上書きされないように空のオブジェクトが返されます。 (window オブジェクトのみ window 属性を持ちます)
i =0;
}
while((source = args[i ])){
for(ソース内のキー){
If (iSCOVER ||! (Key in target) // カバーされている場合は、直接割り当てられます。カバーされていない場合は、まずキーがターゲット オブジェクト内にあるかどうかを判断し、キーが存在する場合はキーを割り当てません。値
{
ターゲット[キー] = ソース[キー];
}
}
}
ターゲットを返す;
}

大企業の面接官は、配列の重複チェックについてよく質問します。配列内の各項目はオブジェクトである可能性がありますが、オブジェクト A とオブジェクト B は同じプロパティとメソッドを持っていますが、それらは同じではありません。等しい。 123 や「123」などの文字列と数字については、オンラインで検索すると完全な方法が見つかります。

3. 配列化 :

ブラウザーには、引数、document.forms、document.links、form.elements、document.getElementsByTagName、childNodes など (HTMLCollection、NodeList) など、配列のようなオブジェクトが多数あります。

特別な方法で書かれたカスタムオブジェクトもあります

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

var arrayLike = {
0:"a"、
1:"b"、
長さ:2
}

このオブジェクトの記述方法は、jQuery オブジェクトの記述方法と同じです。

上記の配列のようなオブジェクトを配列オブジェクトに変換する必要があります。

[].slice.call メソッドでこの問題を解決できます。ただし、旧バージョンのIEにおけるHTMLCollectionやNodeListはObjectのサブクラスではないため、[].slice.callメソッドは使用できません。

それで、slice メソッドをオーバーライドできます。

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

A.slice = window.dispatchEvent ? function(nodes,start,end){ return [].slice.call(nodes,start,end); //ウィンドウにdispatchEvent属性があれば、[].slice.callメソッドとケイパビリティ検出をサポートしていることが証明される。
:function(nodes,start,end){
var ret = [],n=nodes.length;
​​​​ Start = PARSEINT (Start, 10) || 0; // 開始値が存在しない場合、または数値でない場合は、0 が割り当てられます。 end = end == 未定義 ? if(start if(end if(end>n) end = n;
for(var i = start;i RET [I-Start] = NODES [i] // 下位バージョンの IE は配列代入の形式を使用します
;                                                                                                                                                                                                                                                                 }
return ret;
}




4. 型判定
:

js の 5 つの単純なデータ型は、null、unknown、boolean、number、string です。

オブジェクト、関数、正規表現、日付、人物などのカスタム オブジェクトなど、複雑なデータ型もあります。

Typeof は通常、ブール値、数値、文字列を決定するために使用され、instanceof は通常、オブジェクト タイプを決定するために使用されます。しかし、それらにはすべて欠点があります。たとえば、firame の配列インスタンスは親ウィンドウの Array インスタンスではないため、instanceof を呼び出すと false が返されます。 （この質問は360スクール募集時に行われたものです）。 typeof new Boolean(true) // "object" 、パッケージ化オブジェクト。ブール値、数値、文字列の 3 つのパッケージ化オブジェクトがあります。これらについては、js 高度なプログラミングで説明します。

多くの人が typeof document.all を使用して IE かどうかを判断します。実際、これは非常に危険です。Google と Firefox もこの属性を好むため、Google Chrome では次のような状況が発生します。 , document.all //HTMLAllCollection, typeofで未定義と判定されるが、この属性値は読み取れる。

ただし、Object.prototype.toString.call メソッドを使用して型を決定できるようになりました。このメソッドはオブジェクト内の[[クラス]]を直接出力できますが、IE8以下のウィンドウオブジェクトにはこのメソッドは使用できません。 IE6、7、8では window == document // true document == window // false を使用できます。

NodeType (1: 要素 2: 属性 3: テキスト テキスト 9: ドキュメント)

jquery で型を決定するために使用されるメソッド:

コードをコピー

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

class2type ={}
jQuery.each("ブール数値文字列関数配列日付 RegExp オブジェクト".split(" "),function(i,name){
class2type [ "[オブジェクト " name "]" ] = name.toLowerCase();
//class2type = {"[object Boolean]":boolean,"[object Number ]":number ,"[object String ]":string ,"[object Function ]":function ,"[object Array ]":array 。 .....}
});
jQuery.type = function(obj){ //obj が null 、未定義な​​どの場合は、文字列「null」、「未定義」を返します。そうでない場合は、toString メソッドを呼び出し、呼び出せるかどうかを判断し、オブジェクト (以前のバージョンの IE では window や Dom などの ActiveXobject オブジェクト) を返します
return obj == null ? : class2type [ toString.call(obj) ] || "オブジェクト";
}

5.domReady

js が dom ノードを操作する場合、ページは dom ツリーを構築する必要があります。したがって、通常は window.onload メソッドが使用されます。ただし、onload メソッドは、すべてのリソースがロードされるまで実行されません。ユーザー操作に対するページの応答を速くするには、DOM ツリーの構築後に js 操作を使用するだけで済みます。すべてのリソース (写真、フラッシュ) がロードされるまで待つ必要はありません。

そのため、Dom ツリーの構築後にトリガーされる DOMContentLoaded イベントが表示されます。ただし、古いバージョンの IE はそれをサポートしていないため、ハックが存在します。

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

if(document.readyState === "complete"){ //Dom ドキュメントがロードされた後にのみ js ファイルがロードされる場合。このとき、この判定により fn メソッド（実行したいメソッド）が実行されます。ドキュメントがロードされた後、document.readyState の値は complete
になるためです。 setTimeout(fn); setTimeout(fn);ここでは jQuery での使い方を説明しますが、理解する必要はありません。
}
else if(document.addEventListener){//DOMContentLoaded イベントをサポートします
document.addEventListener("DOMContentLoaded",fn,false) // バブル
; window.addEventListener("load",fn,false); //DOM ツリーの構築後に js ファイルがロードされる場合。この時点では、DOMContentLoaded イベントはトリガーされません (トリガーされています)。ロード イベント
のみがトリガーされます。 }
それ以外{
document.attachEvent("onreadystatechange",function(){//IE での iframe セキュリティでは、onload の実行が優先される場合とそうでない場合があります。
if(document.readyState ==="complete"){
fn();
}
});
window.attachEvent("onload",fn); //他の監視イベントが取得されない場合でも常に機能するため、少なくとも fn メソッドは onload イベントを通じてトリガーできます。
var top = false;//iframe
内にあるかどうかを確認します Try{//window.frameElement は、このページを含む iframe またはフレーム オブジェクトです。そうでない場合は null です。
top = window.frameElement == null && document.documentElement;
}キャッチ(e){}
If(top && top.doScroll){ //iframe がなく IE の場合
(関数 doScrollCheck(){
試してみる{
top.doScroll("left");//IEではDomツリーが構築されていればhtmlのdoScrollメソッドを呼び出すことができます
}catch(e){
Return settimeout (doscrollcheck, 50); // ビルドされていない場合は、
のリッスンを続行します。 }
fn();
})
}
}

fn メソッドには、すべてのバインドされたイベントの削除が含まれている必要があります。

もちろん、IE でもスクリプト遅延ハックを使用できます。原則として、遅延が指定されたスクリプトは、DOM ツリーが構築されるまで実行されません。ただし、これには追加の js ファイルを追加する必要があり、別のライブラリで使用されることはほとんどありません。

使用原則: ドキュメントに script タグを追加し、script.src = "xxx.js" を使用してスクリプトの onreadystatechange イベントをリッスンし、this.readyState == "complete" のときに fn メソッドを実行します。

つまり、DOM が構築された後、xxx.js が実行され、その this.readyState が完了します。

上記は、JavaScript フレームワーク設計の第 1 章の読書メモです。この章の基本的な内容を誰もがよりよく理解できるように、内容は比較的簡潔です。