In-depth understanding of JavaScript series (30): Detailed explanation of appearance pattern of design patterns_Basic knowledge

Introduction

Facade provides a consistent interface for a set of interfaces in a subsystem. This module defines a high-level interface that makes this subsystem easier to use.

Text

The appearance pattern not only simplifies the interface in the class, but also decouples the interface from the caller. The facade pattern is often considered a must-have for developers. It can encapsulate some complex operations and create a simple interface for calling.

Appearance mode is often used in JavaScript class libraries. It encapsulates some interfaces for compatibility with multiple browsers. Appearance mode allows us to call subsystems indirectly, thereby avoiding unnecessary errors caused by direct access to subsystems.

The advantage of appearance mode is that it is easy to use and it is also relatively lightweight. But there are also disadvantages. Appearance mode will cause certain performance problems when used continuously by developers, because the availability of the function must be detected every time it is called.

The following is a piece of unoptimized code. We use appearance mode to create a cross-browser usage by detecting browser characteristics.

Copy code The code is as follows:

var addMyEvent = function (el, ev, fn) {
If (el.addEventListener) {
         el.addEventListener(ev, fn, false);
} else if (el.attachEvent) {
        el.attachEvent('on' ev, fn);
} else {
         el['on' ev] = fn;
}
};

Let’s take another simple example. To put it bluntly, one interface is used to encapsulate other interfaces:

Copy code The code is as follows:

var mobileEvent = {
// ...
Stop: function (e) {
         e.preventDefault();
         e.stopPropagation();
}
// ...
};

Summary

So when to use appearance mode? Generally speaking, there are three stages:

First of all, in the early stage of design, you should consciously separate the two different layers, such as the classic three-layer structure, and establish a facade between the data access layer and business logic layer, business logic layer and presentation layer.

Secondly, during the development stage, subsystems often become more and more complex due to continuous reconstruction and evolution. Adding facade can provide a simple interface and reduce the dependence between them.

Third, when maintaining a legacy large-scale system, it may be difficult to maintain the system. At this time, it is also very appropriate to use the appearance Facade. Develop an appearance Facade class for the system to provide rough and highly complex designs. The legacy code provides a relatively clear interface, allowing the new system to interact with the Facade object, and the Facade interacts with the legacy code to do all the complex work.

Reference: Dahua Design Pattern