高品質のJSコードを作成します.(変数の声明とforサイクル)

5229 ワード

才能溢れるStyan Stefanovは、彼が書いたO’Reillyの初版の新書『JavaScript Patterns』(JavaScriptモード)において、具体的には、JavaScriptの高い要素を編纂することであり、例えばグローバル変数を回避し、単一変数声明を使用し、循環中にlength(長さ)をプリキャッシュし、コードに従って読み、更に多くを読むことである.
1、保守可能なコードソフトのバグを書く修復は高価であり、時間が経つにつれてこれらのバグのコストも増加します.特に大きなプロジェクトや会社にとって、バグを修復するのはコードを書く人ではありません.そのため、コードを理解するのにかかる時間を低くしなければなりません.時間の前に自分で書いたコードも、チームの中の他のメンバーが書いたコードも.また、アプリケーションが成熟すると、他にも多くのことが発生します.これについては、審査、修正、調整が必要です.これはなぜ保守可能なコードを作成するのがアプリケーションの成功に重要です.メンテナンス可能なコードは、
  • によって読み取り可能な
  • 一致の
  • 予測可能な
  • は同じ人が書いたように見えます.
  • に2、グローバル変数が記録されている問題
  • jsが関数を通して変数の作用領域を管理するため、関数内部で宣言された変数はこの関数の内部だけになり、関数外では利用できません.一方、大域変数はどの関数の外で宣言されていますか?それとも直接に簡単に使用されることを宣言していません.
    JavaScript環境ごとにグローバルオブジェクトwindowがあります.任意の関数の外でthisを使用するとアクセスできます.あなたが作成したすべての変数はこのグローバルオブジェクトの属性window(通常)となり、そのグローバルオブジェクト自体を指します.以下のコードセグメントは、ブラウザ環境においてどのようにグローバル変数を作成してアクセスするかを示しています.
    
    var checkThis = function(){ 
    alert( this.x); 
    }; 
    var x = 'this is a property of window'; 
    var obj = {}; 
    obj.x = 100; 
    obj.y = function(){ alert( this.x ); }; 
    obj.y(); //   100 
    checkThis(); //   'this is a property of window' 
    JavaScript言語では、thisの定義は、その関数がメソッドとして呼び出された時のオブジェクトです.ここでなぜ「this is a property of window」が飛び出すのか、ちょっと迷ってしまうかもしれません.JavaScriptの変数のスコープには「グローバル変数はすべてwindowオブジェクトの属性です」という規則があります.checkThisを実行するとwindow.cchockThisに相当しますので、このときcheckThis関数の中のthisキーワードの指向はwindowオブジェクトになりました.またwindowオブジェクトのもう一つのx属性('this a property of window')のため、‘this a property of window’が表示されます.
    同様にグローバル変数の問題です.グローバル変数を定義したら、JavaScriptアプリケーションとウェブページのすべてのコードはこれらのグローバル変数を共有しています.彼らは同じグローバル名前空間に住んでいますので、プログラムの二つの異なる部分が同名ですが、異なる作用のグローバル変数を定義すると、ネーミング衝突は避けられません.
    例えば、ウェブページには、このページの開発者が書いたものではないコードが含まれています.
    第三者のJavaScriptライブラリ広告者のスクリプトコード
    例えば、この第三者スクリプトはグローバル変数を定義しています.次に、あなたの関数でも、resultというグローバル変数を定義します.その結果、後の変数が前面に上書きされ、第三者スクリプトが正常に動作しなくなります.
    では、jsでvar声明とvar声明を通じない変数の違いは何ですか?
    JSにおける変数申明は、分顕式申明と隠式申明である.
    Var i=100は申明を表示します.
    i=100暗黙的な説明は、関数において、varキーワードを用いて明示的に説明された場合、変数は局所変数として行われる.varキーを使っていません.直接割当方式で宣言したのはグローバル変数です.また、私たちが宣言していない変数にアクセスすると、JSはエラーを報告します.私たちが宣言していない変数に値を割り当てると、JSはエラーを報告しません.反対に、グローバル変数を暗黙的に説明したいと思います.var num=1は、現在のドメイン(例えば関数)で変数を宣言し、方法で宣言すれば、局所変数となります.全ローカルで宣言されている場合は、グローバル変数です.num=1は、実は属性の値付け操作です.まず、現在の作用ドメインチェーン(例えば、方法において宣言されている場合、現在の作用ドメインチェーンは大域的作用領域と方法的局所作用領域を表している)でnumを解析することを試みる.任意の現在の作用領域チェーンにnumが見つかったら、num属性に対して値を賦課します.numが見つからなかったら、グローバルオブジェクト(すなわち現在のスコープの最上階のオブジェクト、例えばwindowオブジェクト)にnum属性を作成し、値を付与します.
    また、暗黙的変数を作成する例として、タスクチェーンを使用して、一部のvar声明を作成します.下のフラグメントでは、aはローカル変数ですが、bはグローバル変数です.これはあなたが望むものではないかもしれません.
    //   ,    
    function foo() {
       var a = b = 0;
       // ...
    }
    この言葉の意味はvar a=(b=0)に相当します.ですから、もし私たちが用意したら、ミッションチェーンで賦課します.まずvar a、bが必要です.次にa=b=0を通しますこれでは何の問題も起こらない.
    では、ネーミング変数の一番いい方法はトップの単一var形式である.
    function func() {
       var a = 1,
           b = 2,
           sum = a + b,
           myobject = {},
           i,
           j;
       // function body...
    }
    複数の変数をvar文で宣言し、コンマで区切ることができます.このような初期化変数の値を同時に初期化することで、論理エラーを防止し、読み取り可能性を高めることができます.
    forサイクルについての問題
    forループでは、配列または配列の類似のオブジェクトの値を循環的に取得できます.通常のループ形式は以下の通りです.
    //      
    for (var i = 0; i < myarray.length; i++) {
       //   myarray[i]    
    }
    このような形の循環が足りないのは、循環するたびに配列の長さを取っていくことです.今回はあなたのコードを下げます.特にmyarrayは配列ではなくHTMLCollectionのオブジェクトです.HTMLCollectionsとは、DOM方法で返されるオブジェクトのことを指します.例えば、
    Dcument.getElementsByName()document.getElementsByClass Name()document.getElements ByTagNameの集合のトラブルは、それらがリアルタイムで基本文書(HTMLページ)を照会することにある.これは、各セットの長さにアクセスするたびに、DOMにリアルタイムで照会することを意味し、DOM動作は一般的に高価である.
    これは、データを循環的に取得するときに、キャッシュ配列(またはセット)の長さが比較的良い形である理由であり、下記のコードで表示されるように、(つまり、最初に配列長に変数値を定義する)
    for (var i = 0, max = myarray.length; i < max; i++) {
       //   myarray[i]    
    }
    このように、このサイクルの中で、一度だけの長さの値を検索しました.
    最後にサイクルを調整する必要があるのは、i+++を置換するために次の式を使うことです.
    i=i+1 i+=1