设计原则在设计模式的应用

单一职责：

就一个类，一个函数，一个方法，应该仅有一个引起他变化的原因，如果有两个动机去改写一个方法，那么这个方法就具有两个职责，在需求变化的过程中，他被改写的可能性就越大，该方法就是一个不稳定的方法，修改代码总是危险的，

一个职责的变化影响其他的职责的实现，会造成意想不到的破坏，这种耦合性得到的是低内聚力和脆弱的设计

耦合案例

const myImage = (() => {
    let imgNode = document.createElement('img');
    document.body.appendChild(imgNode);


    let img = new Image;
    img.onload = function() {
        imgNode.src = this.src;
    }


    return {
        setSrc(src) {
            imgNode.src = 'file://loadwait.gif';
            img.src = src;

        }
    }

})()

 

 单一职责案例

const myImage = (() => {
    let imgNode = document.createElement('img');
    document.body.appendChild(imgNode);

    return {
        setSrc(src) {
            imgNode.src = src
        }
    }
})()



const proxyImage = (() => {
    let img  = new Image;

    img.onload = function () {
        myImage.setSrc(this.src);
    }


    return {
        setSrc (src) {
            myImage.setSrc('file://loadwait.jpg');
            img.src = src;
        }
    }
})()

 

myImage 负责往页面中添加img, proxyImage负责预加载图片，并在预加载完成之后把图片给本体myImage

把添加img标签的功能和预加载图片的职责分开到两个对象中，这两个对象各自都有一个被修改的动机，再他们各自发生变化的时候不会影响另一个

总述： 分离职责写法的优点，如果只需要加载一个很小的网路图片，职责分离的情况下我门可以直接用myImage

 或者五年后网速快到根本不需要预加载，我们希望把预从这段代码中去掉这时候 耦合写法就不得不该动myImage了