『JavaScriptモード』読書ノート(2)—基本テクニック1

4110 ワード

この文章の主な内容は、jsプログラミングの基本的なテクニックを紹介しています.実は、これらのテクニックは、開発の過程で、多かれ少なかれ使用されているか、自分のコードやプロジェクトに熟練して応用されています.では、この文章では、これらの「基本テクニック」を振り返ってみましょう.
 
保守可能なコードの作成
私たちが想像してみてください.私たちの仕事の過程で、バグを変更しなければなりません.このバグは前の十数人が維持していたプロジェクトのためかもしれません.規範がなく、JSLintがなく、コードは大草原で緩和されているように、好きなように、無欲です.今日になって、ちょうどあなたがこのプロジェクトを受け入れて、テストはこのシステムの中に潜んでいたが、今日暴露された問題を発見しました.そして、あなたはこれらのコードを見て、心の中でコードの作者の祖先の16代に挨拶しました.しかし、いずれにしても、あなたは座って、安心して、これらの乱れた、規則のないコードの中から、このバグを解決しなければなりません.
多くの人がこのような問題に直面したことがあると信じています.規範のない会社、企業、プロジェクトでも、これは本当に普遍的なことです(私は今経験しています).その時、メンテナンス可能なコードを書くことがどれほど重要かがわかります.
メンテナンスが容易なコードは、コードに次の機能があることを意味します.
    1. 読解力がよい.
    2. 一貫性がある.
    3. 予見性がよい.
    4. 一人で書いたように見えます.
    5. ドキュメントがあります.
 
グローバル変数の使用を最小限に抑える
グローバル変数の問題は、JavaScriptアプリケーションまたはWebページ全体で共有されていることです.グローバルネーミングスペースに生存し、ネーミング競合が発生する可能性があります.
JavaScriptは、JavaScriptの2つの特性のため、知らず知らずのうちに予想外にグローバル変数を作成します.最初の特性は、JavaScriptが変数を直接使用し、宣言する必要もないことです.2つ目の特性は、JavaScriptにグローバル変数を示す概念があります.つまり、任意の変数は、宣言されていない場合、グローバルオブジェクトのすべて(正しく生命されたグローバル変数のようにアクセスできます)です.例:
function sum (x,y) {
  //   :        
  result = x + y;
  return result;            
} 

この例では、関数内部の変数resultは宣言なしに使用されます.もちろん、単純な環境では問題はありませんが、関数を呼び出すと、外部空間で別のresult変数が使用されます.
function sum(x, y) {
    result = x + y;
    return result;
}
sum(1, 2)
var result = 6
console.log(result)

したがって、最も重要なルールはvarを使用して変数を宣言することです.
function sum (x,y) {
  var  result = x + y;
  return result;            
}

もう1つの暗黙的なグローバル変数を作成する逆モードvar宣言付きチェーン付与:
//   ,    
function foo() {
    var a = b = 0;

    //...
}

上のコードは、右から左のオペレータ優先度のためです.したがって、上記のコードは実際には次のようになっています.
function foo() {
    var a = ( b = 0 );

    //...
}

ただし、チェーンに割り当てられたすべての変数を宣言すると、予期せぬグローバル変数が作成される心配はありません.
function foo() {
    var a ,b;
    //...
    a = b = 0;  
}

また、nodeやwindowなどの異なるホスト環境でコードを楽しく走りたい場合は、グローバル変数の使用に注意してください.Windowsには存在しない変数が、nodeのグローバル変数に使われているのかもしれないからだ.
 
変数解放時の副作用
隠しグローバル変数は、deleteオペレータを使用して変数を取り消すことができるかどうかで、明確に定義されているグローバル変数とはわずかに異なります.
  • varを使用して作成されたグローバル変数(このような変数は関数の外部で作成されます)は削除できません.
  • 非実用varによって作成された暗黙のグローバル変数は、関数内で作成されているにもかかわらず削除できます.

  • これは、グローバル変数が厳密には真の変数ではなく、グローバルオブジェクトの属性であることを示しています.プロパティはdeleteオペレータで削除できますが、変数はできません.
    var a = '1';
    b = 2;
    (function () {
        c = 3;
    }()) 
    delete a;
    delete b;
    delete c;
    
    console.log(typeof a)
    console.log(typeof b)
    console.log(typeof c)

     
    単一varモード
    1つのvarのみを使用して関数の上部で変数宣言を行うのは非常に有用なモードです.メリットは次のとおりです.
  • は、関数に必要なすべてのローカル変数を検索するために、単一のアドレスを提供する.
  • は、変数が定義される前に使用される論理エラーを防止する.
  • は、宣言する変数を保持し、グローバル変数をできるだけ少なく使用する.
  • より少ない符号化(入力コードも伝送コードもより少ない).

  • 例:
    function func() {
        var a = 1,
            b = 2,
            sum = a + b,
            obj = {},
            i,
            j;
    }
    

    初期化されておらず、宣言されていない変数はすべてundefinedであることを覚えておいてください.この言葉はあまり理解しにくいですが、宣言していない以上、存在しないことを意味しますね.間違いなく、存在しないのはundefinedです.ではundefinedといえばnullの意味を簡単に言えばnullは存在を表すが、空である.
     
    昇格:凌散変数の問題
    JavaScriptでは、関数の任意の場所で複数の変数を宣言できます.どこで宣言しても、効果は関数の上部で宣言するのと同じです.これがいわゆる「昇進」です.先に使用して宣言すると、論理エラーが発生する可能性があります.JavaScriptでは、変数が同じ範囲(同じ関数)にある限り、宣言済みとみなされ、その列は変数宣言前に使用されます.例:
    //    
    name = 'global'; // function func() { alert(name); // " " var name = 'local'; alert(name); // " " } func();

    最初のalertの結果はglobalだと思いますか?では、太字の部分をもう一度読んでください.実際には、コードはこのように実行されています.
    name = 'global'; //     
    function func() {
        var name;
        alert(name); // "   "
        name = 'local';
        alert(name); // "    "
    }
    func();

    注意:実際には、コード処理には2つのフェーズがあります.1つ目は、変数、関数宣言、および形式パラメータを作成するフェーズです.これは解析とオンライン質問に入る段階です.2番目のフェーズは、コード実行時にプロシージャを実行し、関数表現と不合格識別子(変数を定義していない)を作成します.しかし、実際に使用する目的のために、ECMAScript規格には存在しないにもかかわらず、「アップグレード」という概念を使用しました.はい、私たちのこの1編の内容はここまでで、実際には、基本的なテクニックだけで、後ろには多くの内容があります.私は紙幅が短くて、そんなにうんざりしないことを望んでいます.