This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

What is?

In the design pattern, the adapter pattern is a structural pattern that acts as a bridge between two incompatible interfaces, a pattern that allows data to be adapted to new environments, not added at detailed design time, but to solve problems in an ongoing project.

Why is that?

In the development of time, you may encounter such a situation, the product need to optimize the original one page list, add some different format card, but there is also need the original format, this time, the backend at the time of development, found the old interface returns the data format is very bad, also don’t need a lot of data, it provides a new interface, It’s a lot better. However, we always use the same page on the front end, which is when we can use this adapter pattern.

How to do?

So for example we’re going to render a character list for some people and here’s our initial character list

var getPeople = function () {
    var people = [
        {
            people: 'xiaoqiang'.id: 1}, {people: 'xiaopei'.id: 2,}];return people;
};
var render = function (data) {
    console.log('Start rendering the list of characters', data);
};
render(getPeople);
Copy the code

After being stable online for a while, I realized that I had added a lot of people, and the original data was not reliable enough. Then the backend added, but I realized that the backend returned a different data structure than the one I was running in the project. Here is the new data structure

var people = {
    xiaoqiang: 1.xiaolin: 2.xiaoxing: 3
};
Copy the code
At this point, we can use the adapter to solve the problemvar getPeople = function () {
    var people = [
        {
            people: 'xiaoqiang'.id: 1}, {people: 'xiaolin'.id: 2,}];return people;
};
var render = function (data) {
    console.log('Start rendering the list of characters', data);
};
var peopleAdapter = function( oldPeopleData ){
    var peopleObj = {},
    for ( let i = 0, p; p = oldPeopleData()[ i++ ]; ) { peopleObj[ p.people ] = c.id; }return function(){
        returnpeopleObj; }}; render(peopleAdapter(getPeople));Copy the code

The adapter pattern enables synergies without changing existing interfaces. But adapters have their drawbacks, too. For example, using them too much can clutter up a system. For example, if you look at the format of an interface, you end up displaying data from another interface. Therefore, adapters can be dispensed with if not absolutely necessary. I’m going straight to the refactoring.

I see rookie tutorial said that it is best to use inheritance or dependency to solve, and then there are corresponding implementation code online

/ / the duck
var MallardDuck = function () {
    Duck.apply(this);
};
MallardDuck.prototype = new Duck(); // The prototype is Duck
MallardDuck.prototype.fly = function () {
    console.log("Can fly a long distance!");
};
MallardDuck.prototype.quack = function () {
    console.log("Quack! Quack!");
};

/ / Turkey
var WildTurkey = function () {
    Turkey.apply(this);
};
WildTurkey.prototype = new Turkey(); // The prototype is Turkey
WildTurkey.prototype.fly = function () {
    console.log("Flying distance seems a little short!");
};
WildTurkey.prototype.gobble = function () {
    console.log("Giggle! Giggle!");
};

var TurkeyAdapter = function(oTurkey){
    Duck.apply(this);
    this.oTurkey = oTurkey;
};
TurkeyAdapter.prototype = new Duck();
TurkeyAdapter.prototype.quack = function(){
    this.oTurkey.gobble();
};
TurkeyAdapter.prototype.fly = function(){
    var nFly = 0;
    var nLenFly = 5;
    for(; nFly < nLenFly;) {this.oTurkey.fly();
        nFly = nFly + 1; }};Copy the code