前端也要知道设计模式5大原则

681 阅读1分钟
  1. S - 单一职责原则
  2. O - 开放封闭原则
  3. l - 里氏替换原则
  4. I - 接口独立原则
  5. D - 依赖倒置原则

S - 单一职责原则
  一个程序只做好一件事.
  如果功能过于复杂就拆分开,每个部分保持独立。

O - 开放封闭原则   对扩展开放,对修改封闭
  增加需求是,扩展新代码,而非修改已经有代码
  这是软件设计的终极目标

l - 里氏替换原则
  子类能覆盖父类
  父类能出现的地方子类就能出现
  js中使用较少(弱类型 & 继承使用比较少)

I - 接口独立原则
  保持接口的单一独立,避免出现“胖接口”
  js没有接口,基本没用
  类似单一职责原则,这里更关注接口

D - 依赖倒置原则   面向接口编程,依赖于抽象而不依赖具体
  使用方只关注接口而不关注具体类的实现
  js没有接口,基本没用

用Promise来说明SO

  • 单一职责原则:每个then中的逻辑只做好一件事
  • 开放封闭原则:如果有新的需求,扩展then
  • 对扩展开放,对修改封闭
function loadImg(src) {
    var promise = new Promise((reslove,reject)=>{
        var img  = document.createElement('img');
        img.onload = function() {
            reslove(img);
        }
        img.onerror = function() {
            reject('图片加载失败');
        }
        img.src = src;
    })
    return promise
}
var src = 'http://www.9488.com/img/logo.png';
var result = loadImg(src)

result.then(function(img){
    console.log('img.width',img.width)    
}).then(function() {
    console.log('img.height'.img.height)
}).catch(function(err) {
    console.log(err)
})