JavaScriptプログラミングモード

5513 ワード

JavaScript

プログラミングモードは、経験と探索によってまとめられた最適な実践スキームであり、可読性とメンテナンス性に寄与するだけでなく、全体的な性能の向上にも役立つ.

行為隔離

総則:構造、様式と行為の間に2つの隔離がある.

は、インライン・イベントを構造内で使用することを避ける

はできるだけ少なく<script>タグ

を使います.

JavaScriptが無効にされている状況を考慮して、いくつかの代替ラベルを追加する

名前空間

ネーミング競合を低減するために、JavaScript性能を最適化し、いくつかのグローバル変数のみを定義し、他の変数と方法をこれらの変数の属性として定義します.

//      

var MYAPP = window.MYAPP || {};

//    

MYAPP.event = {};

//    

MYAPP.event = {

  addListener : function() {

    //         

  }

  removeListener : function() {

    //         

  }

  //    

};

名前空間にコンストラクタ関数を使用する.

MYAPP.dom = {};

MYAPP.dom.Element = function (type, prop) {

  var tep = document.createElement(type);

  for (var i in prop) {

    tmp.setAttribute(i, prop[i]);

  }

  return tmp;

}

名前空間の方法:

var MYAPP = window.MYAPP || {};

MYAPP.namespace = function (name) {

  var parts = name.split(“.”);

  var current = MYAPP;

  for (var i in parts) {

    if (!current[parts[i]]) {

      current[parts[i]] = {};

    }

    current = current[parts[i]];

  } 

}

MYAPP.namespace(“dom.event”);

//        ：

var MYAPP = {

    dom: {

        event: {}

    }

}

初期化機能

ブラウザの不一致のため、JavaScriptを使ってDOMやBOMを操作する前に、通常は一定の機能を検出します.実行前に検出する機能が多いと、スクリプトの実行速度に大きな影響を与えます.この問題については、初期化機能により解決できます.すなわち、スクリプトがロードされた直後に、重要な関数に対して機能検出を実行します.このように、その後は検出機能を必要とせず、直接に関連する関数を実行することができる.

var MYAPP = window.MYAPP || {};

MYAPP.event = {

  addListener: null,

  removeListener: null

};

//          ：

if (typeof window.addEventListener === ‘function’) {

  MYAPP.event.addListener = function (el, type, fn) {

    el.addEventListener(type, fn, false);

  };

  MYAPP.event.removeListener = function (el, type, fn) {

    el.removeEventListener(type, fn, false);

  };

} else if (typeof document.attachEvent === “function”) {

  MYAPP.event.addListener = function (el, type, fn) {

    el.attachEvent(“on” + type, fn);

  };

  MYAPP.event.removeListener = function (el, type, fn) {

    el.detachEvent(“on” + type, fn);

  };

} else {

  MYAPP.event.addListener = function (el, type, fn) {

    el[“on” + type] = fn;

  };

  MYAPP.event.removeListener = function (el, type, fn) {

    el[“on” + type] = null;

  }; 

}

遅延の定義

遅延定義は、ちょうど初期化モードの思想とは逆である.必ずしも呼び出されるとは限らない関数については、呼び出し時に初期化し、一度だけ初期化することができます.

var MYAPP = window.MYAPP || {};

MYAPP.event = {

  addListener: function(el, type, fn) {

    if (typeof window.addEventListener === ‘function’) {

      MYAPP.event.addListener = function (el, type, fn) {

        el.addEventListener(type, fn, false);

      };

    } else if (typeof document.attachEvent === “function”) {

      MYAPP.event.addListener = function (el, type, fn) {

        el.attachEvent(“on” + type, fn);

      };

    } else {

      MYAPP.event.addListener = function (el, type, fn) {

        el[“on” + type] = fn;

      };

    }

    MYAPP.event.addListener(el, type, fn);

  }

};

この場所は自分の関数を書き換えるために修正が必要です.

オブジェクトの設定

オブジェクトモードを設定して、複数のパラメータを関数に渡すのに適しています.簡単に言えば、パラメータセットを一つのオブジェクトに入れて、オブジェクトをパラメータに渡すということです.このオブジェクトはJSONファイルでもいいです.参数が少ない場合は、従来の参数集のように、膨大な数の場合は環境設定変数を転送するようになります.変数と関数を結合することは、非常に良い実践である.

パラメータを考慮する必要がない順序

は、いくつかのパラメータ

を無視することができる.

は、より良い可読性と維持性を有する.

var MYAPP = window.MYAPP || {};

MYAPP.dom = {};

MYAPP.dom.Button = function(text, conf) {

    var type = conf.type || “submit”;

    var color = conf.color || “red”

}

//     

var conf = {

    type: “reset”,

    color: “green”

};

new MYAPP.dom.Button(“Reset”, conf);

プライベート変数と方法

C++、JAVAと違って、JavaScriptにはアクセス権限を制御する修飾子がありませんが、局所変数と関数を使って類似の権限制御ができます.

var MYAPP = window.MYAPP || {};

MYAPP.dom = {};

MYAPP.dom.Button = function (text, conf) {

  var styles = {

    color: “black”

  }

  function setStyles() {

    for (var i in styles) {

      b.style[i] = conf[i] || styles[i];

    }

  }

  conf = conf || {};

  var b = document.createElement(“input”);

  b.type = conf[“type”] || “submit”;

  b.value = text;

  setStyles();

  return b;

}

ここでは、stylesはプライベート属性であり、setStyle()はプライベート方法である.ビルダーは内部でそれらを呼び出すことができますが、外部コードで呼び出すことはできません.

特権関数

上記の例では、bにgetDefaults()方法を追加し、stylesオブジェクトに戻り、内部属性または方法へのアクセスを実現することができます.このgetDefaults()は特権関数です.

プライベート関数の共有化

外部修正を防ぐためには、関数を私有にしたり、外部にアクセスしたいと思ったりするので、公有にする必要があります.解決策は、公有変数を使用してプライベート関数を参照すれば、公有化されます.

var MYAPP = window.MYAPP || {};

MYAPP.dom = {};

MYAPP.dom.Button = (function () {

  var _setStyle = {};

  var _getStyle = ();

  return {

    setStyle: _setStyle,

    getStyle: _getStyle,

    yetAnother: _setStyle

  };  

})();

自己実行の関数

直ちに実行される匿名関数を使用しても、グローバル名前空間が汚染されないことを保証することができる.この関数のすべての変数は局所的であり,関数が戻ると破壊される(非閉込め).
一回限りの初期化タスクを実行するのに適しています.

(function(){

    //        

})()

チェーンコール

チェーンコールは便利な呼び方です.その実現の本質は一致したコンテキストオブジェクトを使用して、このオブジェクトをチェーン法間で伝達することである.この柔軟な呼び方もjQueryの大きな特徴です.

JSON

JSONはライト級のデータ交換形式です.それ自体はJavaScriptのようなオブジェクトと配列マークのデータから構成されているので、解析するのにとても便利です.
解析といえば、JavaScriptのeval()方法で変換できます.しかし、eval()自体の欠陥のため、このことはJavaScriptのようなより安全な方法を使っています.http://json.org)var obj = JSON.parse(xhr.respnseText);

javascript面接試験のポイント