設計原則
何為設計原則？
五大設計原則
從設計到模式
23中設計模式
何為設計？
- 按照哪一種思路或者標準來實作功能
- 功能相同，可以有不同的設計方案來實作
- 隨著需求增加，設計的作用才能體現出來
unix/linux設計哲學
- 小即是美
- 讓每個程式只做好好一件事
- 快速建立原型
- 舍棄高效率而取可移植性
- 采用純文本來存盤資料
- 充分利用軟體的杠桿效應（軟體復用）
- 使用shell腳本來提高效應和可移植性
- 避免強制性的用戶界面
- 讓每個程式都稱為過濾器（shell的管道操作）
- 允許用戶定制環境
- 盡量使用作業系統內核小而輕量化
- 使用小寫字母并盡量簡短
- 沉默是金（在命令列的輸出有體現）
- 各部分之和大于整體
- 尋求90%的解決方案
SOLID五大設計原則
S - 單一職責原則
- 一個程式只做好一件事
- 如果功能過于復雜就拆分開，每個部分保持獨立
O - 開放封閉原則（important）
- 對拓展開放，對修改封閉
- 增加需求時，拓展新代碼，而非修改已有代碼
- 這是軟體設計的終極目標
L - 李氏置換原則
- 子類能夠覆寫父類
- 父類能出現的地方子類就能出現
- js中使用較少（弱型別&繼承使用較少）
I - 介面獨立原則
- +保持介面的單一獨立，避免出現“胖介面”
- js中沒有介面（typescript例外），使用較少
- 類似于單一職責原則，這里更關注介面
D - 依賴導致原則
- 面向介面編程，依賴于抽象而不依賴于具體
- 使用方只關注介面而不關注具體類的實作
- js使用較少（沒有介面&弱型別）
在js中：
- S O 體現較多，L I D 體現較少，但是可以了解其用意
例如：在promise中運用了S O：
- 單一職責原則：每個then中的邏輯只做好一件事
- 開放封閉原則: 如過增加新需求，拓展then
- 對拓展開放，對修改封閉
function loadImg(src) {
var promise = new Promise(function (reslove, reject) {
var img = document.creatElement('img')
img.onload = function() {
reslove(img)
}
img.src = https://www.cnblogs.com/ygjzs/p/src
})
return promise
}
var src ='.....'
var result = loadImg(src)
result.then(function (img) {
console.log('img.width',img.width)
return img
}).then(function (img) {
console.log('img.height',img.height)
}).catch(function (ex) {
console.log(ex)
})
從設計到模式
23種設計模式
組合型
- 工廠模式（工廠方法模式，抽象工廠模式，創建者模式）
- 單例模式
- 原型模式
組合型
- 配接器模式
- 裝飾器模式
- 代理模式
- 外觀模式
- 配接器模式
- 裝飾器模式
- 代理模式
- 外觀模式
- 橋連接模式
- 組合模式
- 享元模式
行為型
- 策略模式
- 模板方法模式
- 觀察者模式
- 迭代器模式
- 職責連模式
- 命令模式
- 備忘錄模式
- 狀態模式
- 訪問者模式
- 中介者模式
- 解釋器模式
例子
one
有繼承有參考
class Car {
constructor(number, name) {
this.number = number
this.name = name
}
}
class Kuaiche extends Car {
constructor(number, name) {
super(number, name)
this.price = 1
}
}
class Zhuanche extends Car {
constructor(number, name) {
super(number, name)
this.price = 2
}
}
class Trip {
constructor(car) {
this.car = car
}
start() {
console.log(`行程開始，名稱: ${this.car.name}, 車牌號: ${this.car.price}`)
}
end() {
console.log('行程結束，價格: ' + (this.car.price * 5))
}
}
let car = new Kuaiche(100, '桑塔納')
let trip = new Trip(car)
trip.start()
trip.end()
two
都為參考
// 車
class Car {
constructor(num) {
this.num = num
}
}
// 入口攝像頭
class Camera {
shot(car) {
return {
num: car.num,
inTime: Date.now()
}
}
}
// 出口顯示幕
class Screen {
show(car, inTime) {
console.log('車牌號', car.num)
console.log('停車時間', Date.now() - inTime)
}
}
// 停車場
class Park {
constructor(floors) {
this.floors = floors || []
this.camera = new Camera()
this.screen = new Screen()
this.carList = {}
}
in(car) {
// 獲取攝像頭的資訊：號碼 時間
const info = this.camera.shot(car)
// 停到某個車位
const i = parseInt(Math.random() * 100 % 100)
const place = this.floors[0].places[i]
place.in()
info.place = place
// 記錄資訊
this.carList[car.num] = info
}
out(car) {
// 獲取資訊
const info = this.carList[car.num]
const place = info.place
place.out()
// 顯示時間
this.screen.show(car, info.inTime)
// 洗掉資訊存盤
delete this.carList[car.num]
}
emptyNum() {
return this.floors.map(floor => {
return `${floor.index} 層還有 ${floor.emptyPlaceNum()} 個車位`
}).join('\n')
}
}
// 層
class Floor {
constructor(index, places) {
this.index = index
this.places = places || []
}
emptyPlaceNum() {
let num = 0
this.places.forEach(p => {
if (p.empty) {
num = num + 1
}
})
return num
}
}
// 車位
class Place {
constructor() {
this.empty = true
}
in() {
this.empty = false
}
out() {
this.empty = true
}
}
// 測驗代碼------------------------------
// 初始化停車場
const floors = []
for (let i = 0; i < 3; i++) {
const places = []
for (let j = 0; j < 100; j++) {
places[j] = new Place()
}
floors[i] = new Floor(i + 1, places)
}
const park = new Park(floors)
// 初始化車輛
const car1 = new Car('A1')
const car2 = new Car('A2')
const car3 = new Car('A3')
console.log('第一輛車進入')
console.log(park.emptyNum())
park.in(car1)
console.log('第二輛車進入')
console.log(park.emptyNum())
park.in(car2)
console.log('第一輛車離開')
park.out(car1)
console.log('第二輛車離開')
park.out(car2)
console.log('第三輛車進入')
console.log(park.emptyNum())
park.in(car3)
console.log('第三輛車離開')
park.out(car3)
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/29333.html
標籤：設計模式
下一篇：JavaScript-工廠模式