js单一职责原则（SRP）

<h1>设计原则和编程技巧</h1>
    <h2>单一职责原则（SRP）</h2>
    <p>就一个类而言，应该仅有一个因其他变化的原因。在JavaScript中，需要用到类的场景并不太多，单一职责原则更多是被运用在对象或者方法级别上，
    	因此，本节主要的讨论大多基于对象和方法。</p>
  	<p>SRP原则体现为：一个对象（方法）只做一件事情。</p>
  	<h1>设计模式中的SRP原则</h1>
  	<button id="button" tag="login" >按钮</button>
  	<script>
  	   //1.代理模式——图片预加载
  	   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( "image/load.gif" );
  	            img.src = src;
  	         }
  	      }
  	   } )();
  	   
  	   proxyImage.setSrc( "image/gyy.jpg" );

           
 //2.迭代器模式
  	   var each = function( obj, callback ){
  	      var i = 0,
  	          length = obj.length,
  	          //isArray = isArraylike( obj );  //isArraylike函数并未实现，可以翻阅jQuery源代码
              isArray = false;
              
          if( isArray ){   //迭代类数组
             for( ; i < length; i++ ){
                callback.call( obj[ i ], i, obj[ i ] );
             }
          }else{           //迭代object对象
             for( i in obj ){
                callback.call( obj[ i ], i, obj[ i ] );
             }
          }
  	          
 	      return obj;
  	   };
  	   
  	   var appendDiv = function( data ){
  	      each( data, function( i, value ){
  	         var oDiv = document.createElement( "div" );
  	         oDiv.innerHTML = value;
  	         document.body.appendChild( oDiv );
  	      } );
  	   };
  	   
  	   //appendDiv( [ 1, 3, 5, 6, 8,32 ]);
  	   appendDiv( {a:1,b:2,c:3} );
 
//3.单例模式
  	   var getSingle = function( fn ){   //获取单例
  	     var result;
  	     return function(){
  	        return result || (result = fn.apply( this, arguments ) );
  	     }
  	   };
  	   
  	   var createLoginLayer = function(){
  	      var div = document.createElement( "div" );
  	      div.innerHTML = "我是登录窗口";
  	      document.body.appendChild( div );
  	      
  	      return div;
  	   };
  	   
  	   var createSingleLoginLayer = getSingle( createLoginLayer );
  	   
 //4.装饰者模式
  	   //使用装饰者模式的时候，我们通常让类或者对象一开始只具有一些基础的职责，更多的职责在代码运行时被动态装饰到对象
  	   //上面。装饰者模式可以为对象动态增加职责，从另一个角度开看，这也是分离职责的一种方式。
  	   Function.prototype.after = function( afterFn ){
  	      var _self = this;
  	      return function(){
  	         _self.apply( this, arguments );
  	         afterFn.apply( this, arguments );
  	      }
  	   };
  	   
  	   var showLogin = function(){
  	      console.log( "打开登录浮层" );
  	   };
  	   
  	   var log = function(){
  	      console.log( "上报标签为：" + this.getAttribute( "tag" ) );
  	   };
  	   
  	   document.getElementById( "button" ).onclick = showLogin.after( log );
  	</script>
  	<p>SRP原则的优缺点：SRP原则的优点是降低了单个类或者对象的复杂度，按照职责把对象分解成更小粒度，这有助于代码的复用，也有利于进行单元测试。
  	     当一个职责不要变化时，不会影响到其它的职责。</p>
    <p>但是SRP原则也有一些缺点，最明显的是会增加编写代码的复杂度。当我们按照职责把对象分解成更小的粒度之后，实际上也增加了这些对象之间相互联系的难度。</p>