[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) ```