メンテナンス可能なjsコード

1504 ワード

保守可能なコードとは:
  • 理解性
  • 直感性
  • 適応性
  • 拡張性
  • デバッグ可能
  • 読み取り可能:
  • 関数とメソッド-各関数には、目的の役割を記述する注釈が含まれます
  • ルーズカップリング
  • HTML/javascript
  • のデカップリング
  • デカップリングcss/javascript
  • アプリケーションロジック/イベントハンドラ
  • グローバル変数の回避
  • ネーミングスペース
    //      
    var xhome={};
    // xhome      
    xhome.Projs = {};
    //         
    xhome.Projs.EventUtil = {};
    xhome.Projs.CookieUtil ={};
  • を作成
  • nullとの比較を避ける
  • function sortArray(values){
       if(values != null){//         values instanceof Array  typeof values == "Array"
           values.sort(arry)
       }
    }

    定数の使用
  • 反復値-複数の値を使用する場合は、定数
  • として抽出する必要があります.
  • url--よく変わる字面の量なので、一つの場所に保管して、一つの場所の変化を避けて、他の場所の
  • を修正するのを忘れなければなりません.
  • 任意の変更可能な値
  • アクティブドメイン
  • グローバル検索
  • の使用を避ける
    function setImgUrl(){
      var img =doncument.getElementByTagName("img");
      for(var i=0,len=img.length;i<len;i++){
          img[i].url = document.url;
      }
    }
  • 使用を避けるwith
  • 不要な属性検索を避ける
  • サイクルの最適化
  • 簡略化循環体
  • 使用後試験サイクル
  • //    
    for(var i=0;i<values.length;i++){
      process(values[i]);
    }
    //  
    for(var i=values.length;i>=0;i--){
       process(vaules[i]);
    }
    //     
    var len=values.length;
    do{
      //...
    }while(i<len)

    パフォーマンスの比較
  • 原生法は比較的速い
  • switchメソッド文高速
  • ビット演算子より速い
  • 配列とオブジェクトの字面量
  • を用いる.
    DOM最適化
  • domオペレーション循環体オペレーション時にdomを循環体外で変数
  • と宣言する.
  • innerHTML
  • を使用
  • イベントエージェント
  • を使用