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://alpic.fanquanwang.com/kx3x/uppic/xvcwsc2w3by6312533.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