JavaScript設計モード(一)

1521 ワード
JavaScript
JavaScriptフレームとライブラリを使用する過程で、「奇形」という感じのコードに遭遇したことがあります.多くの場合、慣例によってコードを作成しても多くの優れた機能を書き出すことができます.しかし、それらの実現方法を根本から理解しないと、それらのすべての長所を十分に発揮することができません.
以下は私がJavaScript (Ross HarmesとDustin Diazを読んだ後の理解です.
Getting Startd
JavaScriptは非常に柔軟な言語であり、同じタスクを遂行するプログラミングモードは多くの種類があります.例えば、起動／停止アニメーションを作成したいです.
  • 一般的なプロセスプログラム
    function startAnimation() {...};
function stopAnimation() {...};
  • は、クラス
    var Anim = function() {...};

//             
Anim.prototype.start = function() {...};
Anim.prototype.stop = function() {...};

var myAnim = new Anim();
myAnim.start();
myAnim.stop();
    または文面量オブジェクト作成クラス
    var Anim = function() {...};

Anim.prototype = {
	start: function() {...},
	stop: function() {...},
};
    tipsを定義することにより、これらの2つの方法は似ているように見えるが、実質的には大きな違いがある.その違いの原因は、各構造関数のプロトタイプ属性は、デフォルトではプロトタイプオブジェクトを指すことである.プロトタイプオブジェクトは、structor属性を含む.この属性は、その構造関数を指します.字面量式は、手動で新しいオブジェクトを作成し、プロトタイプ属性に新しいオブジェクトを割り当てました.この新しいオブジェクトは人為的に定義されています.また、手動でconstruct属性を定義していません.したがって、第二の方式の原型オブジェクトのconstruct属性は、その構造関数を指していません.Objectを指しています.これは明らかに私たちがほしいものではないです.
  • は、上記のコードを簡単に修正することができます.チェーン式の呼び出し方法もあります.(jQueryで多く使われているテクニック)は、補助関数でthisに戻ります.
    // JavaScript        
//    Function          
Function.prototype.method = function(name, fn) {
	this.prototype[name] = fn;
};

var Anim = function() {...};
Anim.method( 'start', function() {...} );
Anim.method( 'stop', function() {...} );
    • javascript上級プログラムの設計03-関数式、クローズド、プライベート変数を読みます.