文章詳情頁
javascript適配器模式和組合模式原理與實(shí)現(xiàn)方法詳解
瀏覽:2日期:2022-06-13 11:07:05
一、適配器模式
1、作用:主要解決兩個(gè)軟件實(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)造,那么需要對(duì)百度地圖做一下適配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 兩個(gè)類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è)計(jì)模式相關(guān)知識(shí)點(diǎn),還可以參考本站文章:
https://www.jb51.net/article/252965.htm
https://www.jb51.net/article/27973.htm
標(biāo)簽:
JavaScript
相關(guān)文章:
1. JavaScript設(shè)計(jì)模式--橋梁模式引入操作實(shí)例分析2. JavaScript 下載鏈接圖片后上傳的實(shí)現(xiàn)3. JavaScript 實(shí)現(xiàn)生命游戲4. JavaScript 異步進(jìn)化史5. WEB開發(fā)者必備的7個(gè)JavaScript函數(shù)6. 詳解JavaScript中的執(zhí)行上下文及調(diào)用堆棧7. JavaScript 事件代理需要注意的地方8. JavaScript onclick事件使用方法詳解9. JavaScript 中的六種循環(huán)方法10. 分享幾個(gè)JavaScript運(yùn)算符的使用技巧
排行榜
