JavaScript Design Patterns and development Practices Adapter mode

The role of adapter mode is to solve the problem of incompatible interface between the two software Entities. After using adapter mode, two software entities that were originally unable to work because of incompatible interfaces could work together.

The adapter alias is the wrapper (wrapper), which is a relatively simple pattern. There are many such scenarios in program Development: when we try to invoke a module or an interface of an object, we find that the format of the interface does not match the current Requirements. At this time there are two solutions, the first is to modify the original interface implementation, but if the original module is very complex, or we get the module is a piece of other people to write the compressed code, modify the original interface is not very realistic. The second option is to create an adapter that transforms the original interface into another interface that the customer wants, and the customer only needs to deal with the Adapter.

first, the application of adapter mode

    varGoogleMap ={show:function() {console.log (' Start rendering Google Maps ' );    }    }; varBaidumap ={show:function() {console.log (' Start rendering Baidu map ' );    }    }; varRendermap =function(map) {if(map.showinstanceofFunction)        {map.show ();    }    }; Rendermap (googlemap); //output: Start rendering Google MapsRendermap (baidumap);//output: Start rendering Baidu map

The key to the smooth operation of this program is that GoogleMap and Baidumap provide a consistent show method, but the Third-party interface method is not within our own control, if the Baidumap provides a way to display the map is not called show and called Display it?

We can solve the problem by adding baidumapadapter:

    varGoogleMap ={show:function() {console.log (' Start rendering Google Maps ' );    }    }; varBaidumap ={display:function() {console.log (' Start rendering Baidu map ' );    }    }; varBaidumapadapter ={show:function(){            returnBaidumap.display ();    }    }; varRendermap =function(map) {if(map.showinstanceofFunction)        {map.show ();    }    }; Rendermap (googlemap); //output: Start rendering Google MapsRendermap (baidumapadapter);//output: Start rendering Baidu map

　　

Suppose we are writing a page that renders a map of Guangdong Province. currently, all cities in Guangdong province and their corresponding IDs are obtained from Third-party resources and are successfully rendered to the Page:

    var function () {        var guangdongcity = [        {            ' Shenzhen ',            one,        }, {             ' Guangzhou ',            'n ',        }        ];         return guangdongcity;    };     var function (fn) {        ' Start rendering map of Guangdong province ' );        document.write (json.stringify (fn ()));    };    Render (getguangdongcity);

But the new data structure is as Follows:

    var guangdongcity = {        one,        one,        andone    };

Add a new adapter for data format conversion:

    varGuangdongcity ={shenzhen:11, Guangzhou:12, Zhuhai:13    }; varGetguangdongcity =function(){        varGuangdongcity =[{name:' Shenzhen ', Id:11,}, {name:' Guangzhou ', Id:12,        }        ]; returnguangdongcity;    }; varRender =function(fn) {console.log (' Start rendering map of Guangdong province ' );    document.write (json.stringify (FN ()));    }; varAddressadapter =function(oldaddressfn) {varAddress ={}, oldaddress=OLDADDRESSFN ();  for(vari = 0, c; c = oldaddress[i++ ]; ) {address[c.name]=c.id; }        return function(){            returnaddress;    }    }; Render (addressadapter (getguangdongcity));

Summary

The adapter mode is a relatively simple pair of modes. In the design pattern mentioned in this book, there are some patterns that are very similar to the structure of the adapter pattern, such as decorator mode, proxy mode, and Appearance mode (see Chapter 19th). These patterns belong to the "wrapper mode", which is one object that wraps another Object. The key to distinguishing them is still the intent of the Pattern.

• The adapter pattern is primarily used to address mismatches between two existing interfaces, regardless of how they are implemented or how they might evolve in the Future. The adapter mode does not need to change an existing interface to make them work together.
• Decorator mode and proxy mode do not change the interface of the original object, but the adorner mode is intended to add functionality to the Object. The decorator pattern often forms a long decorative chain, while the adapter pattern is usually packaged only once. The proxy mode is to control access to objects and is usually wrapped only once.
• The function of the appearance mode is similar to the adapter, Some people regard the appearance pattern as the adapter of a set of objects, but the most notable feature of the appearance mode is the definition of a new interface.

JavaScript Design Patterns and development Practices Adapter mode