web前端进阶之js设计模式之设计原则篇

何为设计？

按照一种思路或者标准来实现功能
功能相同，可以有不同设计方案来实现
伴随着需求增加，设计的作用才能体现出来

设计准则（根据UNIX/LINUX设计哲学整理而得）

1、小即是美（一个功能尽量做得小而精）
2、让每个程序只做好一件事（小功能组合起来就是一个大功能）
3、快速建立原型（先满足用户基本需求，再根据反馈，不断迭代与升级）
4、舍弃高效率而取可移植性（效率高不可复用和效率低可复用之间，会选择后者）
5、采用纯文本来存储数据，而非二进制
6、充分利用软件的杠杆效应（软件复用）
7、使用shell脚本来提高杠杆效应和可移植性
8、避免强制性的用户界面，系统和用户界面分开（比如linux的服务器界面就是命令行）
9、让每个程序都成为过滤器（把数据放大A程序里面处理，结果出来后再放到B程序里面处理，比如在文件夹里面查找文件）

小准则

1、允许用户定制环境（自己可以进行配置）
2、尽量使操作系统内核小而轻量化（内核是内核，工具是工具，拆分开）
3、使用小写字母并尽量简短（命名规范）
4、沉默是金（有结果就输出，没结果保持沉默，比如linux里面查找文件，没找到相对应的文件，就什么都不会显示）
5、各部分之和大于整体（以小的个体组成大的整体）
6、寻求90%的解决方案（不可能满足所有人，根据二八定律，花20%的成本解决80%的需求）

SOLID五大设计原则

1、S（Single responsibility principle）——单一职责原则

一个程序只做好一件事

如果功能过于复杂就拆分开，每个部分保持独立

2、O（Open Closed Principle）——开放封闭原则

面向对象的核心

对扩展开放，对修改封闭

增加需求时，扩展新代码，而非修改已有代码

3、L（Liskov Substitution Principle, LSP）——李氏置换原则

子类能覆盖父类

父类能出现的地方子类就能出现

js中使用功能较少（弱类型 & 继承使用较少）

4、I (Interface Segregation Principle)——接口独立原则

保持接口的单一独立

js中没有接口概念（typescript例外）

类似单一职责原则，这里更关注接口

5、D（Dependence Inversion Principle ,DIP）——依赖倒置原则

面向接口编程，依赖于抽象而不依赖于具体

使用方只关注接口而不关注具体类的实现

js中使用较少（没有接口概念，弱类型）

前端js用的最多的是S、O原则，用Promise举例说明

function loadImg(src){
        var promise = new Promise(function(resolve,reject){
            var img = document.createElement('img')
            img.onload = function(){
                resolve(img)
            }
            img.onerror = function(){
                reject('图片加载失败')
            }
            img.src = src
        })
        return promise
    }
    var src = "https://goss.veer.com/creative/vcg/veer/800water/veer-200000357.jpg";
    var result = loadImg(src)

    // 1、这里就体现了单一原则，每个then只做一件事
    // 2、开放封闭原则，如果有新的需求加第三个then即可
    // 这里说明一点，比起jquery的ajax，将所有逻辑写到一个函数里，这里才能体现出面向对象思想
    result.then(function(img){
        console.log(img.width)
        // return img的意思是下一个then也需要img参数
        return img
    }).then(function(img){
        console.log(img.height)
    }).catch(function(ex){
        // 捕获异常
        console.log(ex)
    })

总结
1、单一职责原则：每个then中的逻辑只做好一件事
2、开放封闭原则如果新增需求，扩展then