JavaScript Design Patterns - adapter mode

　　Mode is a mode adapter design pattern of behavioral patterns;

　　definition:

　　Adapter used to solve the problem of mismatch between two existing interface, it does not need to consider how the interface is implemented, they do not consider how the future of the modification; adapter does not need to modify an existing interface, you can make them work together;

　　Vernacular explanation:

　　　You bought some electrical appliances, ready to take home a good experience the charm of this product; ready to take home after the results of the use of electricity and found that the product supports only two-hole outlet, power outlet and your family are three-hole socket; this time you can not turn around electrical appliances store return it; suddenly had an idea, you think of it at home as well as multi-function power outlet and multi-function power socket is just three holes, then you come up with your multifunction power outlet plug in the power outlet, then let your power outlet electrical appliances plugged into the socket above two multi-purpose hole socket, begin to enjoy the pleasant life; here is a multi-socket adapter;

　　Code:

was googlemap = {
    show: function(){
        console.log ( 'start rendering Google Maps' );
    }
};
Var BaiduMap = {
    show: function(){
        console.log ( 'start rendering Baidu map' );
    }
};
var renderMap = function( map ){
    if ( map.show instanceof Function ){
        map.show();
    }
};

RenderMap (googleMap); // begin rendering Google Maps 
RenderMap (baiduMap); // begin rendering Baidu map

　　Of course, the above code is capable of normal operation, thanks to the parameter names in the two objects are the same, so it is possible to display and normal operation;

was googlemap = {
    show: function(){
        console.log ( 'start rendering Google Maps' );
    }
};
Var BaiduMap = {
    display: function(){
        console.log ( 'start rendering Baidu map' );
    }
};

　　Suddenly one day if the method name baiduMap changed it? So we talk the same as above operation will certainly be an error, because the object has no baiduMap show () method of this;

　　Use an adapter to modify the pattern:

was googlemap = {
    show: function(){
        console.log ( 'start rendering Google Maps' );
    }
};
Var BaiduMap = {
    display: function(){
        console.log ( 'start rendering Baidu map' );
    }
};
was baiduMapAdapter = {
    show: function(){
        return baiduMap.display();

    }
};

RenderMap (googleMap); // begin rendering Google Maps 
RenderMap (baiduMapAdapter); // begin rendering Baidu map

　　Adapter do is actually very simple in this code, is to create an object, add a show of the same name () method, and then call the baiduMap.display () method in the adapter inside, so we only need to call the baiduMap when we call the adapter to achieve the desired effect;

　　We as a front-end developer, to expect the page to get the data and the data format is definitely a better understanding, but sometimes encounter this embarrassing situation final end of the previous development model:

　　We all know that a lot of the UI component or tool library will render the specified data format, but this time the back-end is not known; so the data interfaces may not work out that we are rendered directly on the page, but this time the boss He urged us to hurry on the line, but insisted that the back-end data formats no problem, determined not to modify; this time we can come through the front formatted data adapter mode;

　　Json returned by the backend data format:

[
  {
    "day": "周一",
    "uv": 6300
  },
  {
    "day": "周二",
    "uv": 7100
  },  {
    "day": "周三",
    "uv": 4300
  },  {
    "day": "周四",
    "uv": 3300
  },  {
    "day": "周五",
    "uv": 8300
  },  {
    "day": "周六",
    "uv": 9300
  }, {
    "day": "周日",
    "uv": 11300
  }
]

　　Echarts chart graphics required data format:

[ "Tuesday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] // data x-axis 

[ 6300.7100, 4300, 3300, 8300, 9300, 11 300] // data coordinate points

　　Although heart pain, but still we have to solve the problem! Use adapter to solve:

// X-axis adapter 
function echartXAxisAdapter (RES) {
   return res.map (Item => item.day);
}

// coordinate point adapter 
function echartDataAdapter (RES) {
   return res.map (Item => item.uv);
}

　　Create two functions are to format the data processing problems can be solved in accordance with echarts required data format; these two methods is actually an adapter throw into the specified data to the output data format we look forward to get the specified rules ;

　　to sum up:

　　　Personally I think adapter mode is actually a type of design patterns afterthought, if at the beginning stages of project development we knew we expect the data format or method name, etc., we may never have less than adapter mode; however iterative projects tend to It is unpredictable, when the data format or method name change after the project iterations, we can usually use the adapter mode to be adapted to solve; of course, the best solution is to project development process consultation and discussion before and after the end of the data format, code specification file name, so the project is the development efficiency will be greatly improved is in;

JavaScript Design Patterns - adapter mode

Guess you like