javascript設計原則-単一職責

前はjavascriptのデザインパターンを基本的に一回通りました.感慨が多く、多くの思想は一度も触れたことがないので、難しいです.でも、この過程は価値があると思います.以前はサッカー場で野球をしていたら、今はちゃんとしたコーチを見つけて指導しています.世界的なスターになるとは限らないですが、少なくともレベルは以前よりずっと高くなります.次にいくつかのデザインの原則を見てみます.デザインの原則はモードより一級上の方法で、綱領的な内容です.
単一職責は「変化の原因」と定められている.一つの方法が多すぎる職責を引き受けたら、需要が変化する過程で、この方法を書き換える可能性がもっと大きいです.したがって、SRPは原則として、一つの対象(方法)は一つのことしかしないということを表しています.「javascript設計モードと開発実践」第18章を参照してください.
設計モードにおけるSRP原則
プロキシモードの下のこの例は、ドキュメント内で1つのタグを作成し、画像をロードする際には、ネットワーク速度の制限のために、ローカル画像をあらかじめ読み込む必要があり、後でネットワーク画像をロードします.このプロセスにおいて img および は である.この二つの過程を二つのオブジェクトに分けて処理したほうがいいです.

//  img     
var myImage = (function(){
        var imgNode = document.createElement( 'img' );
        document.body.appendChild( imgNode );
        return {
            setSrc: function( src ){

                imgNode.src = src;
            }
        }
    })();
  //         
    var proxyImage = (function(){
        var img = new Image; //       
        img.onload = function(){
            myImage.setSrc( this.src ); //      
        }
        return {
            setSrc: function( src ){
                myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
                img.src = src;
            }
        }
    })();
    //       ，      img            。
    proxyImage.setSrc( 'http:// imgcache.qq.com/music/photo/000GGDys0yA0Nk.jpg' );

次のコードを参照してください.

//          div  ，     ，         
//            ，       ，       
 var appendDiv=function(){
  for(var i=0;l=data.length;i

単一職責原則を使用してコードを変更する.

var each = function( obj, callback ) {//     
//          ，     ，       
        var value,
        i = 0,
        length = obj.length,
        isArray = isArraylike( obj ); // isArraylike      ，    jQuery    
        if ( isArray ) { //      
            for ( ; i < length; i++ ) {
                callback.call( obj[ i ], i, obj[ i ] );
            }
        } else {
            for ( i in obj ) { //   object   
                value = callback.call( obj[ i ], i, obj[ i ] );
            }
        }
        return obj;
    };
 //             
    var appendDiv = function( data ){
        each( data, function( i, n ){ //  each       
        //                    
            var div = document.createElement( 'div' );
            div.innerHTML = n;
            document.body.appendChild( div );
        });
    };

    appendDiv( [ 1, 2, 3, 4, 5, 6 ] );//    
    appendDiv({a:1,b:2,c:3,d:4} ); //    

シングルモード
前にメモがあります.実際には実際の操作と単一の例を作成する方法をそれぞれ二つの方法にパッケージします.

var createLoginLayer = (function(){//       
        var div;
        return function(){
            if ( !div ){
                div = document.createElement( 'div' );
                div.innerHTML = '      ';
                div.style.display = 'none';
                document.body.appendChild( div );
            }
            return div; //       
        }
    })();
  
        //          ，          
    var getSingle = function( fn ){ //     
        var result;
        return function(){
            return result || ( result = fn .apply(this, arguments ) ); 
                        //       apply arguments   
        }
    };
    var createLoginLayer = function(){ //       
        var div = document.createElement( 'div' );
        div.innerHTML = '      ';
        document.body.appendChild( div );
        return div;
    };
    
    var createSingleLoginLayer = getSingle( createLoginLayer );
    var loginLayer1 = createSingleLoginLayer();
    var loginLayer2 = createSingleLoginLayer();
    alert ( loginLayer1 === loginLayer2 ); //   ： true  //     
    
    ```
    
     
            
                   。             。
                  。

Function.prototype.after=function(afterfn){var self=this;return function(){var ret=_self.aply(this,argments);/実行元関数after.appry;var showLogin=function(){consolone.log('を開けて浮層に登録する')};var logs=function(){consolie.logn('上報ラベルは'+this.get Attribute(');

};
document.getElementById( 'button' ).onclick = showLogin.after( log );

//浮層登録してからデータをアップロードする

   
#####                    ，               。        ，     。           。     ？     。