The role of the adapter pattern is to solve the problem of interface incompatibilities between two software entities. Using the adapter pattern, two software entities that would otherwise not work due to incompatible interfaces can work together. The alias for the adapter is wrapper, which is a relatively simple pattern. There are many scenarios in program development where we try to call an interface of a module or object, only to find that the format of the interface does not meet current requirements. There are two solutions. The first is to modify the original interface implementation, but if the original module is complex, or if the module is a piece of compressed code written by someone else, modifying the original interface may not be practical. The second way is to create an adapter that converts the original interface into another interface that the customer wants, and the customer only needs to deal with the adapter.

The story background

Now use Google Map and Baidu Map to display the map on the page

var 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 ); // Output: Start rendering Google Map renderMap(baiduMap); // Output: Start rendering Baidu mapCopy the code

Question assumptions

The key to the successful operation of this program is that googleMap and baiduMap provide the same show method, but the interface method of the third party is not within our control. If baiduMap provides a method to display maps that is not called show but called display

The baiduMap object comes from a third party, and we should not change it under normal circumstances. At this point we can solve the problem by adding the baiduMapAdapter

var googleMap = { 
    show: function(){
        console.log( 'Start rendering Google Maps'); }}; var baiduMap = { display:function(){
        console.log( 'Start rendering baidu Map'); }}; var baiduMapAdapter = { show:function() {returnbaiduMap.display(); }}; renderMap( googleMap ); // Output: Start rendering Google Map renderMap(baiduMapAdapter); // Output: Start rendering Baidu mapCopy the code

conclusion

  • The adapter pattern is primarily used to resolve mismatches between two existing interfaces, regardless of how those interfaces are implemented or how they might evolve in the future. The adapter pattern enables synergies without changing existing interfaces.
  • Decorator mode and proxy mode also do not change the interface of the original object, but the purpose of decorator mode is to add functionality to the object. The decorator pattern often forms a long chain of decorators, whereas the adapter pattern usually wraps once. The proxy pattern is designed to control access to objects and is usually wrapped only once.
  • A facade pattern is similar to an adapter. Some people think of the facade pattern as an adapter for a set of objects, but the most notable feature of the facade pattern is that it defines a new interface.

Series of articles:

JavaScript Design Patterns and Development Practices