DOM element binding event for "JS design mode" façade mode

The role of façade mode:
One is to simplify the interface of a class by encapsulating complex logic code with an interface (function or method) so that the client can invoke it using an interface;
The second is to eliminate the coupling between the class and the customer code that uses it, so that the customer code and complex logic code are separated, that is, coupling;


? Under what circumstances will it be used:
1) provides a simple interface for a complex subsystem.
2) Improve the independence of the subsystem.
3) In a hierarchical structure, use the facade pattern to define the entry of each layer in the system, so that they do their duty.


Using a binding event to illustrate the façade pattern, ie and other browsers (Firefox, Google) have different binding events on HTML elements.

IE Binding code:

var button = document.getElementById ("button"), Button.attachevent ("click", Function () {  alert (id.tagname);});

Chrome Google Binding code:

var id = document.getElementById ("div"); Button.addeventlistener ("Click", Function () {  alert (id.tagname);}, False );

has a BUTTON element

<button id= "button" > click </button>

Binding code

var button = document.getElementById ("button"), if (document.attachevent) {  button.attachevent ("click", Function ( {    alert (button.tagname);  });} else if (document.addeventlistener) {  button.addeventlistener ("click", Function () {    alert (button.tagname);  } , false);} else {  button["onclick"] = function () {    alert (button.tagname);  }}

The above code is not wrong. You can also execute a popup node element name, or a two button binding event?

<button id= "Button1" > Click </button><button id= "Button2" > Click </button>

Binding events

var button1 = document.getElementById ("button1"), if (document.attachevent) {  button1.attachevent ("click", function () {    alert (button1.tagname);  });} else if (Document.addeventlistener) {  Button1.addeventlistener ("click", Function () {    alert (button1.tagname);  }, False);} else {  button1[" OnClick "] = function () {    alert (button1.tagname);  }} var button2 = document.getElementById ("Button2"), if (document.attachevent) {  button2.attachevent ("click", function () {    alert (button2.tagname);  });} else if (Document.addeventlistener) {  Button2.addeventlistener ("click", Function () {    alert (button2.tagname);  }, False);} else {  button2[" OnClick "] = function () {    alert (button2.tagname);  }}

The above code is basically the same, except that the parameters and variable names in the getElementById of the DOM are not the same.
is currently binding events to two elements, if multiple element binding events? Do you want to write multiple such similar code?

The answer is: No.

One of the functions of the façade mode is to simplify the interface of the class, and you can put the code of the bound event into an interface (function) to provide the necessary parameters to the interface.

Complex logical function Binddom (ID, callback) {  id = document.getElementById (ID) of the binding event  ; if (document.attachevent) {    id.attachevent ("click", Callback);  } else if (Document.addeventlistener) {    Id.addeventlistener ("Click", Callback, False);  } else {    id["onclick"] = callback  }}//customer calls Binddom ("Button1", function () {alert ("facade");}); Binddom ("Button2", function () {alert ("facade");});

The code structure of the façade pattern is simplified and the structure level is clear.

Recalling the role of the façade model two words;
The first is to simplify the interface of the class, the complex code to the Binddom function to operate;

The other is to eliminate the coupling code between the class and the customer code that uses it, the call of the client code and the Code of the event binding are separated, the interface can be provided to others to invoke, the call does not need to care about its internal implementation, just need to provide an ID name and callback function (callback) according to the interface;

Similar to the façade mode are: block bubbling, HTML element styling, HTML elements to block default events, event events, get event source, and so on;

Write your own code if there are two of lines in code, in more than one use, then we can take the code of an interface, simplifying the code of the customer code is also a hierarchical structure and decoupling, strong readability;

DOM element binding event for "JS design mode" façade mode