JavaScript design mode Adapter Pattern Introduction _javascript Tips

Source: Internet
Author: User

Adapter Mode description

Description: Adapter mode, generally for the interface to be used, does not conform to the application or use of this system, but need to introduce the middle of the adaptation layer class or object situation;

Scene: Just like we bought a mobile phone, bought back found that the charge line plug is three plugs, but the home, only two plugs in the mouth of the socket, how to do? For convenience, but also to be able to charge at any place, you have to buy a universal charger adapter; So that the phone can be charged in their own home, or can only be placed, or run to the place where the plug charging;

In the actual development environment, because the old system, or the interface provided by the third party application, does not match the interface we defined, it is not possible to use such an old or a third party interface in an interface-oriented programming environment, when we use the adapter class to inherit the class that is to fit. And let the adapter class implement interface to introduce the old system or Third-party application interface;

In this way, when programming with an interface, you can use this matching class to indirectly invoke an old system or Third-party application interface.

In JavaScript, code that implements an adapter pattern similar to a dynamic object-oriented language can be implemented using an inherited instance of prototype, because it is based on interface constraints, but JavaScript does not have an interface, and we remove the layer of interfaces and implement the interface implementation class directly. Target, simulate similar source code out;

SOURCE Example

1. The class and interface method to be fitted:


Copy Code code as follows:

function Adaptee () {
this.name = ' adaptee ';
}
Adaptee.prototype.getName = function () {
return this.name;
}

2. Common implementation class [provides implementation classes directly because there is no interface in Javascript]

Copy Code code as follows:

function Target () {
this.name = ' Target ';
}

Target.prototype.queryname= function () {
return this.name;
}

3. Fit Category:


Copy Code code as follows:

function Adapte () {
THIS.name = ';
}

Adapte.prototype = new Adaptee ();

Adapte.prototype.queryName = function () {
This.getname ();
}

4. How to use:


Copy Code code as follows:

var local = new Target ();
Local.queryname (); Calling a generic implementation class

var adapte = new Adapte ();
Adapte.queryname (); Invoke the old system or third party application interface;

Other Notes

In the fourth step above, Var local and Var adapte are similar to interface reference designations in object-oriented languages such as java,c#, such as:


Copy Code code as follows:

Interface Target {
Public String queryname ();
}
Interface references point to
Target local = new Realtarget (); The Target implementation class for Javascript above
Local.queryname ();

Adapter
Target adapte = new Adapte ();
Adapte.queryname ();

The visible adapter class is the interface between the connecting interface and the target class; is used to solve, the need for the goal already exists, but we can not directly use, can not be used in conjunction with our code definition, we have to use the adapter mode, adaptor mode is also called conversion mode, packaging mode;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.