1. SRP(Single Responsibility Principle) 单一职责原则
单一职责原则就是一个设计元素只做一件事
2. OCP(Open Close Principle) 开闭原则
Open for extension , Close for Modification ,对修改关闭，对扩展开放，便于重用
3. LSP(Liskov Substitution Principle) 里氏替换原则
同一个继承体系中的对象应该具有共同的行为特征
> DBC (Design By Contract) 契约式设计：
> 每个方法调用之前，需要校验传给该方法的参数的正确性，只有正确才能执行该方法，否则视为
> 调用方违反契约，不予执行，这称前置条件。
> 校验正确后，方法必须执行，并且确保执行结果符合契约，这称为后置条件。
> 上述为单个对象的约束条件，为了满足LSP，当存在继承关系时，子类中方法的前置条件必须与超类中
> 被覆盖的方法的前置条件相同或者更为宽松，而子类中方法的后置条件比超类中的后置条件相同或者
> 更为严格
4. DIP(Dependency Inversion Principle)依赖倒置原则
要依赖于抽象，不要依赖于具体。依赖于抽象耦合
抽象不应依赖于细节，细节应依赖于抽象
针对接口编程，而不是针对于实现编程
5. ISP(Interface Segregation Principle)接口分离原则
使用多个专门的接口比使用总接口好
```
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./03-javascript-state-machine.js"></script>
<script>
// 模型
var fsm = new StateMachine({
init: 'pending',
transitions: [
{
name: 'resolve',
from: 'pending',
to: 'fullfilled'
},
{
name: 'reject',
from: 'pending',
to: 'rejected'
}
],
methods: {
// 成功
onResolve: function (state, data) {
// 参数：state - 当前状态示例; data - fsm.resolve(xxx) 执行时传递过来的参数
data.successList.forEach(fn => fn())
},
// 失败
onReject: function (state, data) {
// 参数：state - 当前状态示例; data - fsm.reject(xxx) 执行时传递过来的参数
data.failList.forEach(fn => fn())
}
}
})
// 定义 Promise
class MyPromise {
constructor(fn) {
this.successList = []
this.failList = []
fn(() => {
// resolve 函数
fsm.resolve(this)
}, () => {
// reject 函数
fsm.reject(this)
})
}
then(successFn, failFn) {
this.successList.push(successFn)
this.failList.push(failFn)
}
}
// 测试代码
function loadImg(src) {
const promise = new MyPromise(function (resolve, reject) {
var img = document.createElement('img')
img.onload = function () {
resolve(img)
}
img.onerror = function () {
reject('图片加载失败')
}
img.src = src
})
return promise
}
var src = 'http://www.imooc.com/static/img/index/logo_new.png'
var result = loadImg(src)
console.log(result)
result.then(function (img) {
console.log('success 1')
}, function () {
console.log('failed 1')
})
result.then(function (img) {
console.log('success 2')
}, function () {
console.log('failed 2')
})
</script>
</body>
</html>
~~~
```
