What is appearance mode

Facade: Provides a higher level unified interface to a complex set of subsystem interfaces that facilitates access to subsystem interfaces. It is also sometimes used in Javascript to encapsulate underlying structural compatibility to simplify user usage.

Second, scene simulation

In order to eat, for example, choose package can we provide rice, food and beverage, we don’t need to browse each kind of food, because package already custom is good for us, the menu of the package is actually the appearance models provide a more advanced unified interface, simplify our demand for the use of complex underlying interface is not uniform.

Three, use scenarios

1. In our daily development projects, sometimes we need to be compatible with the operation of the lower version of the browser. We can use the appearance mode to create a compatible method by detecting the browser characteristics, taking binding click events as an example:

function addEvent(dom, type, fn) {
	if (dom.addEventListener) {
       dom.addEventListener(type, fn, false);
    } else if (dom.attachEvent) {
        dom.attachEvent('on' + tpye, fn);
    } else {
        dom['on'+ type] = fn; }}Copy the code

2. Appearance patterns appear frequently not only in our development, but also in the familiar jQuery library. Before jQuery, manipulating the DOM with native JS was a bit of a drag for developers. Whenever we used jQuery apis like $(el).css(), we were actually using a Facade, a simpler public interface, It saves us from having to manually call many internal methods in the jQuery kernel to get some behavior to work. This also eliminates the need to manually interact with DOM APIs and maintain state variables.

Attribute Style method library of simplified version:

var D = {
    id: function(id) {
        return document.getElementById(id);
    },
    css: function(id, key, value) {
      	document.getElementById(id).style[key] = value;
    },
    attr: function(id, key, value) {
        document.getElementById(id)[key] = value;
    },
    html: function(id, html) {
        document.getElementById(id).innerHTML = html; }},Copy the code

Four,

The advantages and disadvantages

The biggest advantage of appearance mode is that it makes the interface of complex subsystem simple and usable, reduces the client’s dependence on the subsystem and achieves the effect of decoupling. But a facade can be a God object that is coupled to all classes in the program.

When should we choose facade mode?

  1. When developing a complex system, at the beginning of the project, there should be a conscious separation of the two different layers, such as the classic three-layer structure, a Facade between the data access layer and the business logic layer, business logic layer and presentation layer.
  2. Subsystems often become more complex over time, and adding a Facade can provide a simple interface that reduces dependencies between them.
  3. Using a Facade is also appropriate when maintaining a large legacy system that may already be difficult to maintain. Develop a Facade class for the system to provide a clear interface to poorly designed and highly complex legacy code to allow the new system to interact with Facade objects. The Facade interacts with the legacy code for all the complex work.