JavaScript多態與適配器模式思考

binta 發布于2019-08-20 12:22 / 2134人閱讀

摘要：下面是我仿照適配器模式改進的谷歌地圖百度地圖適配器參數配置適配器地圖只關注發出顯示地圖而不關注具體用哪種地圖當增加了搜搜地圖，我們需要添加搜搜地圖的方法以及修改適配器地圖參數而不需要對函數進行修改搜搜地圖

不多說先上一段代碼(轉載自《JavaScript設計模式與開發實踐》)

        //谷歌地圖show方法
        var googleMap = {
            googlShow: function() {
                console.log("谷歌地圖");
            }
        };
        //百度地圖show方法
        var baiduMap = {
            baiduShow: function() {
                console.log("百度地圖");
            }
        };
       //渲染地圖函數
       var renderMap=function(map){
           if(map.show instanceof Function){
             map.show();        
          }
       };
       renderMap(googleMap);//輸出:開始渲染谷歌地圖
       renderMap(baiduMap);//輸出:開始渲染百度地圖

對于書中拋出的問題，假設每個地圖API提供展示地圖的方法名都是show,在實際開發中也許不會如此順利，書中作者提出的思路是借助適配器模式來解決問題。下面是我仿照適配器模式改進的:

        var googleMap = {
            googlShow: function() {
                console.log("谷歌地圖");
            }
        };
        var baiduMap = {
            baiduShow: function() {
                console.log("百度地圖");
            }
        };
        
        //適配器參數配置
        var mapArg = {
            "googleMap": googleMap.googlShow,
            "baiduMap": baiduMap.baiduShow
        };
  
        //適配器地圖
        var adaptMap = {
            show: function(arg) {
                for (var imap in mapArg) {
                    for (var fmap in arg) {
                        if (imap && fmap && mapArg[imap].name==fmap) {
                            return mapArg[imap]();
                        }
                    }
                }
            }
        };
        //只關注發出顯示地圖而不關注具體用哪種地圖
        var renderMap = function(arg) {
            adaptMap.show(arg);
        };
        //當增加了搜搜地圖，我們需要添加搜搜地圖的方法以及修改適配器地圖參數
        //而不需要對renderMap函數進行修改
        var sosoMap = {
            sosoShow: function() {
                console.log("搜搜地圖");
            }
        };
        mapArg.sosoMap=sosoMap.sosoShow; 
        render(sosoMap);

GPU云服務器云服務器適配器模式繼承與多態 javascript命令模式 javascript嚴格模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80946.html

學習設計模式前需要知道的事情

摘要：為什么要學習設計模式做事情之前問個為什么總是好的。設計模式的使用方法關于使用方式，像我這種初學者最容易犯的錯誤就是生搬硬套，但是模仿本來也是學習的一個過程，最重要的事情是在模仿中要學會思考。為什么要學習設計模式？做事情之前問個為什么總是好的。關于設計模式的好壞，我在知乎上也看過一些討論，有知友對其提出過一些疑問，里面有一些關于設計模式的觀點：設計模式有何不妥，所謂的荼毒體現在哪...

kviccn 2019-08-21 10:53 評論0 收藏0
PHP面向對象設計的五大原則

摘要：面向對象設計的五大原則單一職責原則接口隔離原則開放封閉原則替換原則依賴倒置原則。主要是針對繼承的設計原則，繼承與派生多態是的主要特性。面向對象設計的五大原則：單一職責原則、接口隔離原則、開放-封閉原則、替換原則、依賴倒置原則。這些原則主要是由Robert C.Martin在《敏捷軟件開發——原則、方法、與實踐》一書中總結出來，這五大原則也是23種設計模式的基礎。單一職責原則 Sin...

adam1q84 2019-06-28 18:35 評論0 收藏0
更好理解的面向對象的Javascript 1 —— 動態類型和多態

摘要：動態類型語言和鴨子類型編程語言按照數據類型大體可分為靜態類型語言和動態類型語言。鴨子類型的概念至關重要，比如一個對象有了屬性，也可以依照下標來存取屬性，這個對象就可以被當做數組來使用。前言曾經對Javascript的面向對象相關知識也有過了解，從各種博客、書籍上也學到了很多。但是最近在看《Javascript設計模式與開發實戰》這本書時發現該書對這方面的知識點介紹的很易于理解，因此...

shusen 2019-08-23 14:19 評論0 收藏0
JavaScript 適配器模式

摘要：適配器模式舊接口格式和使用者不兼容的情況下需要加一個適配轉換接口，無需要改變舊的接口格式電源適配器實現步驟針對類創建一個轉換類類中的初始化中創建一個實例利用類的多態特性覆蓋類的方法代碼實現語法初始化實例覆蓋函數式覆蓋 showImg(https://segmentfault.com/img/remote/1460000019829430?w=640&h=413); 1. JavaScr...

baihe 2019-08-26 10:14 評論0 收藏0
阿里云前端周刊 - 第 15 期

摘要：推薦為什么我們選擇本文是工程師記述在前端技術選型時選用的考慮過程。能夠保證較好的類型覆蓋，但是其對于多態性的支持并不是很好，并且的社區也相對活躍。引擎就是為解決這一問題而生，在中也是采用該引擎來解析。推薦 1. 為什么我們選擇 TypeScript https://redditblog.com/2017/0... 本文是 Reddit 工程師 Niranjan Ramadas 記述在...

stefanieliang 2019-08-20 17:52 評論0 收藏0