[TOC] ## 適配器 可用于對新老數據的轉換兼容 ``` const arr = ['Javascript', 'book', '前端編程語言', '8月1日'] function arr2objAdapter(arr) { // 轉化成我們需要的數據結構 return { name: arr[0], type: arr[1], title: arr[2], time: arr[3] } } const adapterData = arr2objAdapter(arr) ``` ## 單例模式 ``` // 創建彈框方法 const createLoginLayer = function() { const div = document.createElement('div') div.innerHTML = '登入浮框' div.style.display = 'none' document.body.appendChild(div) return div } // 使單例模式和創建彈框代碼解耦 // 創建單例模式 const getSingle = function(fn) { const result return function() { return result || result = fn.apply(this, arguments) } } const createSingleLoginLayer = getSingle(createLoginLayer) document.getElementById('loginBtn').onclick = function() { createSingleLoginLayer() } ``` ## 代理模式 > 代理模式的定義：為一個對象提供一個代用品或占位符，以便控制對它的訪問。 ### 虛擬代理 實現圖片預加載 ``` const myImage = (function() { const imgNode = document.createElement('img') document.body.appendChild(imgNode) return { setSrc: function(src) { imgNode.src = src } } })() const proxyImage = (function() { const img = new Image() img.onload = function() { // http 圖片加載完畢后才會執行 myImage.setSrc(this.src) } return { setSrc: function(src) { myImage.setSrc('loading.jpg') // 本地 loading 圖片 img.src = src } } })() proxyImage.setSrc('http://loaded.jpg') ``` ### 緩存代理 ``` const demo =function (a,b) { return a+b } const proxy =(function () { const cached={} return function (a,b) { let cached_key =[].slice.call(arguments).toString() if (cached[cached_key]) { console.log("access cache"); return cached[cached_key] }else{ console.log("no access cache"); cached[cached_key]=demo(a,b) return cached[cached_key] } } })() console.log(proxy(1,2)); console.log(proxy(2,2));//第二次緩存 console.log(proxy(2,2));//第二次緩存 ``` 任意函數的緩存代理 ``` const demo =function (a,b) { return a+b } const proxy =function (func) { const cached={} return function (a,b) { let cached_key =[].slice.call(arguments).toString() if (cached[cached_key]) { console.log("access cache"); return cached[cached_key] }else{ console.log("no access cache"); cached[cached_key]=func(a,b) return cached[cached_key] } } } const proxyCache=proxy(demo) console.log(proxyCache(1,2)); console.log(proxyCache(2,2));//第二次緩存 console.log(proxyCache(2,2));//第二次緩存 console.log(proxyCache(2,2));//第二次緩存 ``` ## 訂閱發布模式 ``` class Event { constructor() { // 所有 eventType 監聽器回調函數（數組） this.listeners = {} } /** * 訂閱事件 * @param {String} eventType 事件類型 * @param {Function} listener 訂閱后發布動作觸發的回調函數，參數為發布的數據 */ on(eventType, listener) { if (!this.listeners[eventType]) { this.listeners[eventType] = [] } this.listeners[eventType].push(listener) } /** * 發布事件 * @param {String} eventType 事件類型 * @param {Any} data 發布的內容 */ emit(eventType, data) { const callbacks = this.listeners[eventType] if (callbacks) { callbacks.forEach((c) => { c(data) }) } } } const event = new Event() event.on('open', (data) => { console.log("ouput :",data) }) event.emit('open', { open: true }) ``` ## 觀察者模式 > **觀察者模式**定義了一種一對多的依賴關系，讓多個**觀察者**對象同時監聽某一個目標對象，當這個目標對象的狀態發生變化時，會通知所有**觀察者**對象，使它們能夠自動更新 ``` <div id="app"> <div id="dom-one"></div> <br /> <div id="dom-two"></div> <br /> <button id="btn">改變</button> </div> <script> /** * 觀察監聽一個對象成員的變化 * @param {Object} obj 觀察的對象 * @param {String} targetVariable 觀察的對象成員 * @param {Function} callback 目標變化觸發的回調 */ function observer(obj, targetVariable, callback) { if (!obj.data) { obj.data = {} } Object.defineProperty(obj, targetVariable, { get() { return this.data[targetVariable] }, set(val) { this.data[targetVariable] = val // 目標主動通知觀察者 callback && callback(val) }, }) if (obj.data[targetVariable]) { callback && callback(obj.data[targetVariable]) } } const obj = { data: { description: '原始值' }, } observer(obj, 'description', value => { document.querySelector('#dom-one').innerHTML = value }) btn.onclick = () => { obj.description = '改變了' } </script> ``` ## 裝飾者模式 > 裝飾器模式（Decorator Pattern）允許向一個現有的對象添加新的功能，同時又不改變其結構。 ``` class A { getContent() { return '第一行內容' } render() { console.log(this.getContent()); } } function decoratorOne(cla) { const prevGetContent = cla.prototype.getContent cla.prototype.getContent = function() { console.log("這是輸出前需要操作的內容"); return prevGetContent() } return cla } const B = decoratorOne(A) new B().render() /** output 這是輸出前需要操作的內容 第一行內容 */ ``` ## 策略模式 ``` function getYearEndBonus(strategyFn) { if (!strategyFn) { return {} } return strategyFn() } const bonusStrategy = { A() { return { bonus: 50000, prize: 'mac pro', } }, B() { return { bonus: 40000, prize: 'mac air', } }, C() { return { bonus: 20000, prize: 'iphone xr', } }, D() { return { bonus: 10000, prize: 'ipad mini', } }, } const performanceLevel = 'A' getYearEndBonus(bonusStrategy[performanceLevel]) ``` ## 職責鏈模式 ``` function order(options) { return { next: (callback) => callback(options), } } function order500(options) { const { orderType, pay } = options if (orderType === 1 && pay === true) { console.log('500 元定金預購, 得到 100 元優惠券') return { next: () => {}, } } else { return { next: (callback) => callback(options), } } } function order200(options) { const { orderType, pay } = options if (orderType === 2 && pay === true) { console.log('200 元定金預購, 得到 50 元優惠券') return { next: () => {}, } } else { return { next: (callback) => callback(options), } } } function orderCommon(options) { const { orderType, stock } = options if (orderType === 3 && stock > 0) { console.log('普通購買, 無優惠券') return {} } else { console.log('庫存不夠, 無法購買') } } order({ orderType: 1, pay: true, stock: 500, }).next(order500) .next(order200) .next(orderCommon) ```