Understanding adapter mode from home office | community essay solicitation

The essence of the adapter pattern ：

If the existing interface is working properly , Then we'll never use adapter mode . The adapter pattern is a “ Mend the fold after the sheep have been stolen ” The pattern of , No one will use it at the beginning of program design . Because no one can fully predict the future , Maybe the interface that works well now , One day it will no longer apply to the new system , Then we can use the adapter pattern to wrap the old interface into a new interface , Keep it alive .

For example  JSON  Before the format became popular , quite a lot  cgi  All of them  XML  Formatted data , If you still want to use these interfaces today , Obviously, we can create a XML-JSON  Adapter for .

The following two examples may impress us with the adapter pattern ：

One

If we were to  googleMap  and  baiduMap  All send out “ Show ” When asked ,googleMap and  baiduMap  The map is displayed on the page in their own way ：

var googleMap={
 show:function(){
 console.log(' Start rendering google Map ');
 }
};
var baiduMap={
 show:function(){
 console.log(' Start rendering Baidu map ');
 }
};

var renderMap=function(map){
 if(map.show instanceof Function){
 map.show();
 }
};

renderMap(googleMap); // Output ： Start rendering google Map
renderMap(baiduMap); // Output ： Start rendering Baidu map


The key to the smooth operation of this program is （ In the code ） googleMap  and  baiduMap  Provides a consistent  show  Method , But the third-party interface methods are not within our own control , If  baiduMap  The method provided to display the map is not called show  And call display  Well ？

baiduMap  This object comes from a third party , Under normal circumstances, we should not change it . At this point, we can add  baiduMapAdapter  To solve the problem ：

var googleMap={
 show:function(){
 console.log(' Start rendering google Map ');
 }
};
var baiduMap={
 display:function(){
 console.log(' Start rendering Baidu map ');
 }
};

var baiduMapAdapter={
 show:function(){
 return baiduMap.display();
 }
};
var renderMap=function(map){
 if(map.show instanceof Function){
 map.show();
 }
};

renderMap(googleMap);
renderMap(baiduMapAdapter);


Can still output the correct results .

Two

Let's take another example . Suppose we are writing a page rendering the map of Guangdong Province . At present, all cities in Guangdong Province and their corresponding... Are obtained from third-party resources  ID, And successfully rendered to the page ：

var getGuangdongCity=function(){
 var guangdongCity=[
 {name:'shenzhen',id:11},
 {name:'guangzhou',id:12}
 ];
 return guangdongCity;
};
var render=function(fn){
 console.log(' Start rendering the map of Guangdong Province ');
 document.write(JSON.stringify(fn()));
};

render(getGuangdongCity());


Use the data , We finished writing the whole page , And it has been running stably on the line for a period of time . But it was later found that these data were unreliable , There are still many cities missing . So we found some other data resources on the Internet , This time the data is more comprehensive , But unfortunately , The data structure is not consistent with that running in the project . The new data structure is as follows ：

var guangdongCity={
 shenzhen:11,
 guangzhou:12,
 zhuhai:13
};


（： I went to , The format has changed ...

What we can certainly think of is , A more convenient solution is to add an adapter for data format conversion ：

var getGuangdongCity=function(){
 var guangdongCity=[
 {name:'shenzhen',id:11},
 {name:'guangzhou',id:12}
 ];
 return guangdongCity;
};
var render=function(fn){
 console.log(' Start rendering the map of Guangdong Province ');
 document.write(JSON.stringify(fn()));
};

var addressAdapter=function(oldAddressfn){
 var address={},
 oldAddress=oldAddressfn();
 for(var i=0,c;c=oldAddress[i++];){
 address[c.name]=c.id; // Convert to a new data format
 }
};

render(addressAdapter(getGuangdongCity));


So what needs to be done next , That is to call the code  getGuangdongCity  The place of , Use of process addressAdapter The adapter converts the new function to replace .

It seems a little troublesome , But it is more convenient for users and later developers —— They don't care how complicated the original code is , There is no need to manipulate / Modify the original code , Just add one “ Adapter ”, Redefine the format , that will do .

Summary

The adapter pattern is a relatively simple pair of patterns . In the rest of the design patterns , Some patterns are very similar to the structure of the adapter pattern , Like decorator mode 、 Proxy mode and appearance mode . These modes belong to “ Packaging mode ”—— It's all about one object wrapping another object . The key to distinguishing them is still the intention of the pattern ：

• Adapter pattern is mainly used to solve the problem of mismatch between two existing interfaces , It doesn't consider how these interfaces are implemented , And regardless of how they might evolve in the future . Adapter mode does not need to change the existing interface , We can make them work together .

• Decorator mode and proxy mode also do not change the interface of the original object , But the role of decorator mode is to add function to the object . The decorator pattern often forms a long decorative chain , The adapter mode is usually packaged only once . Proxy mode is to control access to objects , Usually it's only packed once .

• The function of appearance mode is similar to that of adapter , Some people think of appearance patterns as adapters for a set of objects , But the most striking feature of the appearance pattern is the definition of a new interface .