Javascript の高度なスキルの共有_JavaScript スキル

前回、Ajax の部分を整理しました。今週は高度なスキルの部分を読んだ後、それも整理しましょう。

1. 型検出
Object.prototype.toString.call(obj) を使用します。
typeof も instanceof も変数の型を正確に決定できないためです。

2. 安全なコンストラクター
通常、コンストラクターを定義するときは、

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

function Person(name){
this.name = name;
}

ただし、そうでない場合は、var person = new Person("cnblogs") に進みます。
代わりに、var person = person("cnblogs") となります。そうなると、これは別の場所を指し、他のオブジェクトの汚染を引き起こします。
解決策は、this.property を設定するときに
このインスタンス
を決定することです。そうでない場合は、 new Person(x,x,x);

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

function Person(name){
if(this instanceof Person){
this.name = 名前;
} else {
新しい人 (名前);
}
}

x) このように継承が実装された場合。
その関数のプロトタイプは、インスタンス化の前に person を指していることに注意してください。

3. 遅延ロード関数
関数を呼び出すとき、関数がブラウザの関数を判断する必要がある状況がよくあります。
例

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

function createSomething() {
if(supportH5){
関数は常にサポートされている必要があるため、コードを実行するたびに判定する必要はなく、一度判定すれば十分です。

コードをコピーします


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

>function createSomething(){ if(supportH5){ createSomething = function(){ //createSomething function

を書き直しました

}
}


このように、初めて呼び出されたときに判定が行われますが、後でこの関数を書き換えると当然判定されなくなります。


4. 関数バインディング
js で最も混乱するのは、おそらくこれが誰を指すかです。
実は、私は長い間 JS を勉強していて、ある結論に達しました。
関数内の this は、最終的にその関数を呼び出すオブジェクトを指します。つまり、どのオブジェクトがこの関数を呼び出すのか、ということです。これはそのオブジェクトを指します。
これを理解した後は、関数バインディングは問題ではなくなりました。
関数内のこの点を変更するメソッドは call と apply ですが、どちらのメソッドも関数を実行します。
関数を実行したくないが、関数にパラメーターとして関数を渡し、これを変更したい場合は、最新のバインドを使用してください。


5. タイマー
setTimeou、setInterval、または Ajax はマルチスレッドと同様に非同期ですが、js はシングルスレッドです。
実際、これらのメソッドはスレッドを追加しません。
setTimeout(fn,300) は、300 ミリ秒後に fn を js 実行キューに入れることを意味します。
キュー内に実行するトランザクションがない場合 (つまり、js インタープリターがアイドル状態の場合)、トランザクションはすぐに実行されます。それ以外の場合は、キューのトランザクションが処理されるまで待機してから、この関数を実行します。
したがって、setTimeout または setInterval を使用することは正確な​​時間制御ではありません。
もう 1 つ注意すべき点は、setTimeout を使用して setInterval をシミュレートすると、最小実行時間間隔を正確に制御できることです。


6. タイマーを使用して時間実行方法を固定します。
メソッドの実行に時間がかかり、ブラウザが短時間応答しなくなる可能性がある場合は、タイマーを使用してメソッドの一部を一定の時間に実行できます。これにより、js が常にビジーになる (ブラウザーが応答しなくなる) ことがなくなり、他のタスクを処理するための時間が確保されます。たとえば、長さが 1000 の配列ループがある場合、毎回 100 回実行できるため、js は間隔を置いて他の操作を自由に実行できます。


7. 機能のスロットリング。
関数のスロットルはパフォーマンスを向上させるための良い方法であり、場合によっては効率を数倍向上させることができます。
たとえば、ドラッグを実行するときや、onresize イベントで発生するいくつかの操作を実行するとき。
手術を行うたびに、実際には何度も手術を行っていることになります。例:

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

var i = 0;
window.onresize = function(){
console.log(i );
}

ブラウザを拡張しようとすると、コンソールの i が瞬時に 100 を超えることがわかります。
記述を変更します。例:

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

var i = 0, j = 1;
window.onresize = function(){
if(j % 2 == 0){
console.log(i );
}
j ;
}

変数 j を作成して、j が偶数になるたびに実行されるようにすると、実行回数が半分になります。
このような処理を行うと実行回数が 50% 削減されますが、ユーザーはその違いを感じません。

タイマーを使用して実装された機能スロットリングもあります。
コア コードは次のとおりです:

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

function throttle(method, context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},100);
}

ここでは、実行関数と関数の実行環境 (つまり、実行関数内で this が指すオブジェクト) が渡され、最初にアクション キューがクリアされてから、アクションが実行されます。
このフォームにより、アクションの頻度をより適切に制御できます。
これがブラウザーのストレッチ アクションであると仮定すると、十分な速度でストレッチし、各トリガー間の時間間隔が 100 ミリ秒以内である限り、最後の結果のみが実行されます。


8. カスタム イベント
は本質的にオブザーバー モードです。基本モードには 3 つの関数が必要です。
1 つの関数はイベントをバインドするもの、1 つの関数はイベントをトリガーするもの、もう 1 つはバインディングを削除するものです。
このモードでは、コード結合を大幅に削減できます。