文章詳情頁
javascript適配器模式和組合模式原理與實(shí)現(xiàn)方法詳解
瀏覽:3日期:2022-06-13 11:07:05
一、適配器模式
1、作用:主要解決兩個軟件實(shí)體間接口不兼容的問題
2、實(shí)例
(1)地圖渲染的適配
//谷歌和百度地圖的渲染地圖調(diào)用的方式不一樣var googleMap = { show: function () {console.log('開始渲染谷歌地圖') }}var BaiduMap = { display: function () {console.log('開始渲染谷歌地圖') }}//我們 程序中的渲染地圖方法入下var renderMap = function (map) { if (map.show instanceof Function) {map.show() }}//baiduMap 來源于第三方,不能改變其內(nèi)部構(gòu)造,那么需要對百度地圖做一下適配var BaiduAdapter = { show: function () {return BaiduMap.display() }}(2)接口數(shù)據(jù)格式的統(tǒng)一適配
//接口數(shù)據(jù)格式的統(tǒng)一適配var cityData = [{name: 'shenzhen',id: 11 }, {name: 'guangzhou',id: 12 }]//新數(shù)據(jù)源var newcityData = { 'shenzhen': 11, 'guanzghou': 12, 'zhuhai': 12}//數(shù)據(jù)格式轉(zhuǎn)換適配器var addressAdapter = function (data) { var address = []; for (var i in data) {var objTemp = {};objTemp.name = i;objTemp.id = data[i];address.push(objTemp) } return address;}console.log(addressAdapter(newcityData))運(yùn)行結(jié)果如下:
1、圖片示意
2、組合模式的例子--掃描文件夾
文件夾和文件之間的關(guān)系,非常適用組合模式來描述。文件夾里既可以包含文件,又可以包含其他文件夾。
//掃描文件夾 folder 和 file 兩個類var Folder = function (name) { this.name = name; this.file = []}Folder.prototype.add = function (file) { this.file.push(file)}Folder.prototype.scan = function () { console.log('開始掃描文件夾'+this.name) for(var i=0;i<this.file.length;i++){this.file[i].scan() }}var File = function(name){ this.name = name;}File.prototype.add = function(){ throw new Error('文件下面不能再添加文件')}File.prototype.scan = function () { console.log('開始掃描文件'+this.name)}var chinese = new File('chinese')var math = new File('math')var English = new File('English')var hobby = new File('hobby')var folder1=new Folder('subject');folder1.add(chinese)folder1.add(math)folder1.add(English)var folder2=new Folder('entertainment')folder2.add(hobby)var folder=new Folder('doc')folder.add(folder1)folder.add(folder2)console.log(folder)folder.scan()運(yùn)行結(jié)果如下:
更多設(shè)計模式相關(guān)知識點(diǎn),還可以參考本站文章:
https://www.jb51.net/article/252965.htm
https://www.jb51.net/article/27973.htm
標(biāo)簽:
JavaScript
相關(guān)文章:
1. javascript實(shí)現(xiàn)雪花飄落效果2. JavaScript DOM常用操作代碼匯總3. 兩行Javascript代碼生成UUID的方法4. JavaScript 實(shí)現(xiàn)輪播圖特效的示例5. JavaScript中的50+個實(shí)用工具函數(shù)小結(jié)6. 怎樣用Javascript實(shí)現(xiàn)策略模式7. JavaScript?sort方法實(shí)現(xiàn)數(shù)組升序降序8. 深入理解JavaScript中的Base64編碼字符串9. 如何在JavaScript中正確處理變量10. Javascript中的奇葩知識,你知道嗎?
排行榜
