1。名前空間:
JSの名前空間は、オブジェクトのプロパティを使用して拡張されます。たとえば、ユーザーはAオブジェクトとAオブジェクトの下にc属性を持つAオブジェクトを定義し、b属性とc属性はオブジェクトです。したがって、a = {b:{}、c:{}}、ユーザーはbオブジェクトとcオブジェクトに同じメソッドと属性を定義できます。したがって、BとCは異なる名前空間に属します。 bおよびcオブジェクトのメソッドを呼び出すと、ablike()とaclike()を介してそれらを呼び出すことができます。もちろん、Aはウィンドウオブジェクトのプロパティです。
ただし、たとえば状況があります。boke.jsページは、jquery.jsとprototype.js(ウィンドウオブジェクトに$属性を追加します)を導入し、競合が発生します。
したがって、jquery.jsには紛争を処理するnoconflict()があります。実行プロセス:ページは最初にプロトタイプを導入します。この時点で、プロトタイプはウィンドウの$属性を占有します。その後、jQueryが導入されると、jQueryは前のウィンドウの$属性を_ $に保存し、それ自体で$属性を使用します。この時点で、$を介してjQueryメソッドを呼び出すことができます。 jqueryを使用する必要はないが、プロトタイプを使用する場合は、$ .noconflict()を呼び出すことができ、$はプロトタイプオブジェクトに復元できます。現時点では、$を介してプロトタイプメソッドを使用できます。
コードコピーは次のとおりです。
var _ $ = window。$、_jquery = window.jquery;
noconflict:function(deep){
ウィンドウ。$ = _ $;
if(deep)window.jquery = _jquery;
jqueryを返します。 //値を返すと、Chaojidanなどの他の変数名に値を割り当てることができます。そうすれば、Chaojidanを介してJqueryのメソッドを呼び出すことができます。
}
2。オブジェクト拡張子:
名前空間オブジェクトがある場合、関数を拡張する必要があります。たとえば、オブジェクトAのすべてのプロパティとメソッドをオブジェクトBにコピーする必要があります。Bオブジェクトに1つずつコードを記述する必要はありません。
コードコピーは次のとおりです。
関数ミックス(ターゲット、ソース){
var args = [] .slice.call(arguments)、i = 1、
iScover = typeof args [args.length-1] == "boolean"? args.pop():true; //書かれていない、デフォルトは真、デフォルトはオーバーライドされています。
if(args.length == 1){
ターゲット=!this.window?これ:{};
//オブジェクトパラメーターが1つしかない場合は、このオブジェクトを拡張します。たとえば、オブジェクトAのコンテキストでミックス(b)を呼び出します。これはこの時点でAであるため、BのプロパティとメソッドがオブジェクトAに追加されます。ただし、ミックス(b)がウィンドウで呼び出されると、bオブジェクトのプロパティとメソッドがこの空のオブジェクトに追加され、ウィンドウオブジェクトの同名のプロパティとメソッドが上書きされます。 (ウィンドウオブジェクトのみがウィンドウプロパティを持っています)
i = 0;
}
while((source = args [i ++])){
for(ソースのキー){
if(isCover ||!(ターゲットのキー))//上書きの場合、値を直接割り当てます。上書きしない場合は、最初にキーがターゲットオブジェクトに存在するかどうかを判断します。存在する場合、値は割り当てられません。
{
ターゲット[key] = source [key];
}
}
}
ターゲットを返します。
}
大企業のインタビュアーは、配列をチェックするのが好きです。あなたはそれをチェックすることができます。配列内の各アイテムはオブジェクトであり、オブジェクトAとオブジェクトBに同じプロパティとメソッドがある場合でも、それらは等しくありません。 123や「123」などの文字列と数字は、オンラインで検索することで完全に見つけることができます。
3.配置:
ブラウザには多くのクラス配列オブジェクトがあります。
特別なライティングスタイルのカスタムオブジェクトもあります
コードコピーは次のとおりです。
var arraylike = {
0:「A」、
1:「B」、
長さ:2
}
このオブジェクトは、jQueryオブジェクトとして書かれています。
上記のクラス配列オブジェクトを配列オブジェクトに変換する必要があります。
[] .slice.callメソッドは解決できます。ただし、IEの古いバージョンのHTMLCollectionとNodeListはオブジェクトのサブクラスではなく、[] .slice.callメソッドは使用できません。
したがって、スライス方法をオーバーライドできます。
コードコピーは次のとおりです。
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;
if(end == undefined || typeof end === "number" && isfinite(end)){// && griontyは||よりも高いため、endは書き込まれていないか、endは有限数であり、入力してください
start = parseint(start、10)|| 0; // STARTが存在しないか、数値がない場合、値は0に割り当てられます。
end = end ==未定? n:parseint(end、10); // endが存在しない場合、値はnです。
if(start <0)start + = n;
if(end <0)end + = n;
if(end> n)end = n;
for(var i = start; i <end; i ++){
ret [i-start] = nodes [i]; //低バージョンIEは配列割り当てフォームを使用します
}
}
返品;
}
4。タイプ判断:
JSには5つの単純なデータタイプがあります。NULL、未定義、ブール値、数字、文字列です。
複雑なデータ型もあります。オブジェクト、関数、regexp、日付、カスタムオブジェクトなど:人など。
Typeofは通常、ブール値、数字、文字列、InstanceOFの判断に使用されます。しかし、それらにはすべて欠陥があります。たとえば、Firemeの配列インスタンスは、親ウィンドウの配列のインスタンスではなく、Calling InstanceOFがfalseを返します。 (この質問は、360キャンパスの募集中に尋ねられました)。 Typeof New Boolean(True)//「オブジェクト」、オブジェクトを包みます。ブール、数字、および文字列は、JS Advanced Programmingで説明されている3種類のパッケージオブジェクトです。
多くの人がtypeof document.allを使用して、IEであるかどうかを判断します。実際、これは非常に危険です。 GoogleとFirefoxもこのプロパティを好むため、この状況はGoogle Chrome:Typeof document.all //未定義で発生します。
ただし、object.prototype.tostring.callメソッドを使用してタイプを決定できます。この方法は、オブジェクト内に[[class]]を直接出力できます。ただし、IE8以下のウィンドウオブジェクトはこの方法を使用できません。 window == document // true document == window // false IE6,7,8を使用できます。
nodeType(1:要素2:属性3:テキストテキスト9:ドキュメント)
jQueryのタイプを審査する方法:
コードコピーは次のとおりです。
class2type = {}
jquery.each( "boolean number string function array date regexp object" .split( "")、function(i、name){
class2type ["[object" + name + "]"] = name.tolowercase();
// class2Type = {"[object boolean]":boolean、 "[object number]":number、 "[object string]": "[object function]":function、 "[object array]":array ......}}
});
jquery.type = function(obj){// objがnull、未定義などの場合、文字列「null」、「未定義」。そうでない場合は、tostringメソッドを呼び出して、それが呼び出されたかどうかを判断し、可能であれば、オブジェクト(window、dom、およびその他のActivexObjectオブジェクトをIEの下位バージョンのオブジェクト)を返します)
obj == nullを返しますか? string(obj):class2type [toString.call(obj)] || "物体";
}
5.domedyready
JSによってDOMノードを操作する場合、ページはDOMツリーを構築する必要があります。したがって、window.onloadメソッドが通常使用されます。ただし、すべてのリソースがロードされた後、オンロードメソッドは実行されません。ページにユーザー操作への応答を速くするためには、DOMツリーが構築された後にJS操作を使用するだけです。すべてのリソースがロードされるのを待つ代わりに(画像、フラッシュ)。
したがって、DomContentLoadedイベントが発生し、DOMツリーが構築された後にトリガーされます。ただし、IEの古いバージョンはそれをサポートしていないため、ハックがあります。
コードコピーは次のとおりです。
if(document.readystate === "complete"){// jsファイルがロードされた後にのみJSファイルがロードされた場合。この時点で、FNメソッド(実行する方法)はこの判断を通じて実行されます。ドキュメントが読み込まれた後、document.readystateの値が完了したため
setimeout(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下でのiframesのセキュリティの場合、オンロード実行が優先され、場合によってはそうでない場合があります。
if(document.readystate === "complete"){
fn();
}
});
window.attachevent( "onload"、fn); //他のリスニングイベントが取得されない場合に常に役割を果たすため、少なくともFNメソッドはオンロードイベントによってトリガーされる可能性があります。
var top = false; //それがiframeにあるかどうかを確認します
try {// window.frameelementは、このページを含むiframeまたはフレームオブジェクトです。そうでない場合、それはnullです。
top = window.frameelement == null && document.documentelement;
} catch(e){}
if(top && top.doscroll){// iframeがない場合、それはieです
(functiondoscrollcheck(){
試す{
top.doscroll( "left"); // IEで、DOMツリーが構築されている場合、HTMLのDoScrollメソッドを呼び出すことができます
} catch(e){
return setimeout(doscrollcheck、50); //まだ構築されていない場合は、聞き続けてください
}
fn();
})
}
}
FNメソッドには、すべてのバインディングイベントの削除を含める必要があります。
もちろん、IEはScript Defer Hackを使用することもできます。原則は次のとおりです。Deferによって指定されたスクリプトは、DOMツリーが構築された後にのみ実行されます。ただし、これには追加のJSファイルを追加する必要があり、別々のライブラリではめったに使用されません。
使用の原則:スクリプトタグをドキュメントに追加し、script.src = "xxx.js"を使用して、スクリプトのonreadystatechangeイベントを聞きます。 this.readystate == "Complete"の場合、FNメソッドが実行されます。
言い換えれば、DOMが構築された後にのみ、xxx.jsが実行され、this.readystateが完了します。
上記は、JavaScript Framework Designの最初の章の読書メモです。コンテンツは比較的簡単であるため、誰もがこの章の基本的な内容をよりよく理解しやすくなります。