单一职责原则(SRP)的职责被定义为“引发变化的缘由”。若是咱们有两个动机去改写一 个方法，那么这个方法就具备两个职责。每一个职责都是变化的一个轴线，若是一个方法承担了过 多的职责，那么在需求的变迁过程当中，须要改写这个方法的可能性就越大。 此时，这个方法一般是一个不稳定的方法，修改代码老是一件危险的事情，特别是当两个职 责耦合在一块儿的时候，一个职责发生变化可能会影响到其余职责的实现，形成意想不到的破坏， 这种耦合性获得的是低内聚和脆弱的设计。 所以，SRP 原则体现为:一个对象(方法)只作一件事情。ajax
/* myImage 负责往页面中添加 img 标签 */
var myImage = (function(){
var imgNode = document.createElement( 'img' );
document.body.appendChild( imgNode );
return {
setSrc: function( src ){
imgNode.src = src;
}
}
})();
/* proxyImage 负责预加载图片，并在预加载完成以后把请求交给本体 myImage */
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;
}
}
})();
proxyImage.setSrc('http://imgcache.qq.com/music/photo/000GGDys0yA0Nk.jpg' );
复制代码
var appendDiv = function( data ){
for ( var i = 0, l = data.length; i < l; i++ ){
var div = document.createElement( 'div' );
div.innerHTML = data[ i ]; document.body.appendChild( div );
}
};
appendDiv( [ 1, 2, 3, 4, 5, 6 ] );
复制代码
appendDiv 函数原本只是负责渲染数据，可是在这里它还承担了遍历聚合对象 data 的职责设计模式
咱们有必要把遍历 data 的职责提取出来，这正是迭代器模式的意义，迭代器模式提供了一 种方法来访问聚合对象，而不用暴露这个对象的内部表示数组
var each = function( obj, callback ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj );
if ( isArray ) { // 迭代类数组
for ( ; i < length; i++ ) {// isArraylike 函数未实现，能够翻阅 jQuery 源代码
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 ){
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;
}
})();
复制代码
如今咱们把管理单例的职责和建立登陆浮窗的职责分别封装在两个方法里，这两个方法能够 独立变化而互不影响，当它们链接在一块儿的时候，就完成了建立惟一登陆浮窗的功能bash
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 );
var loginLayer1 = createSingleLoginLayer();
var loginLayer2 = createSingleLoginLayer();
alert ( loginLayer1 === loginLayer2 ); // 输出: true
复制代码
一方面，若是随着需求的变化，有两个职责老是同时变化，那就没必要分离他们。好比在 ajax 请求的时候，建立 xhr 对象和发送 xhr 请求几乎老是在一块儿的，那么建立 xhr 对象的职责和发送 xhr 请求的职责就没有必要分开。 另外一方面，职责的变化轴线仅当它们肯定会发生变化时才具备意义，即便两个职责已经被耦 合在一块儿，但它们尚未发生改变的征兆，那么也许没有必要主动分离它们，在代码须要重构的 时候再进行分离也不迟。app
SRP 原则的优势是下降了单个类或者对象的复杂度，按照职责把对象分解成更小的粒度， 这有助于代码的复用，也有利于进行单元测试。当一个职责须要变动的时候，不会影响到其余的职责。 但SRP 原则也有一些缺点，最明显的是会增长编写代码的复杂度。当咱们按照职责把对象分解成更小的粒度以后，实际上也增大了这些对象之间相互联系的难度。函数