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>
~~~
```
