The application of facade appearance pattern in JavaScript development in design mode _ basics

Concept

Appearance mode (façade mode) is a relatively simple and ubiquitous pattern. The appearance mode provides a high-level interface that makes it easier to invoke the client or subsystem.

The appearance mode is not adapter mode, and adapter mode is a wrapper that is used to fit an interface to use it in an incompatible system. Creating a façade element is convenient for the diagram. It is not intended to deal with a client system that requires a specific interface, but rather to provide a simplified interface.

JavaScript code example

With a simpler code to represent

var getName = function () {return
 ' Svenzeng '
}
var getsex = function () {return
  ' mans '
}

If you need to call the GetName and Getsex functions separately. That can be invoked with a higher-level interface GetUserInfo.

var getuserinfo = function () {
 var info = a () + B ();
 return info;
}

You might ask why you didn't write the code for GetName and Getsex at first, like this.

var getnameandsex = function () {return
 ' Svenzeng ' + ' mans ';
}

The answer is obvious, the chef of the canteen will not be because you ordered a roast duck and a cabbage to fry the two dishes in a pot. He is more than willing to offer you a roast duck meal package. Also in the program design, we need to ensure that the function or object as far as possible in a reasonable granularity, after all, not everyone likes to eat roast duck and just like to eat cabbage.
Another benefit of the skin pattern is that you can hide real implementation details from users, who only care about the top-level interface. For example, in the story of the Roast duck meal package, you don't care whether the chef cooks first or fry the cabbage first, and you don't care where the duck grew up.
Finally, we'll write an example of a pattern that we've all used.

var stopevent = function (e) {  ///Also blocks event default behavior and bubbling
 e.stoppropagation ();
 E.preventdefault ();
}

I know that the concept of appearance patterns is easy to grasp, you don't necessarily need a JavaScript code example, but some people are more concerned about the code, it will be easier to understand. What's more, JavaScript articles without code samples are simply not persuasive and should be deleted from the web. Let's start with an example of a simple event listener. Everyone knows it's not easy to add an event listener unless you want the code to run on only a few browsers. You have to test a lot of ways to make sure that code for different browsers works. In this code example, we just add feature detection to this method:

function addevent (element, type, func) {
  if (window.addeventlistener) {
    Element.addeventlistener (type, func, false);
  else if (window.attachevent) {
    element.attachevent (' on ' +type, func);
  }
  else {
    element[' on ' +type] = func
  }}

It's easy! I wish I didn't have to write the unnecessary code to make it as simple as possible, but if that's not going to mean anything, you wouldn't want to read it, would you? So I don't think so, I think I'm going to show you something more complicated. I just want to say that your code would have looked something like this:

var foo = document.getElementById (' foo ');
  Foo.style.color = ' red ';
  Foo.style.width = ' 150px ';

var bar = document.getElementById (' bar ');
  Bar.style.color = ' red ';
  Bar.style.width = ' 150px ';

var baz = document.getElementById (' Baz ');
  Baz.style.color = ' red ';
  Baz.style.width = ' 150px ';

It's lame! You did exactly the same thing to every element! I think we can make it a little bit simpler:

function SetStyle (elements, property, value) {
  for (var i=0, length = elements.length; i < length; i++) {
    doc Ument.getelementbyid (Elements[i]). Style[property] = value;
  }
}

Now you can write this:
setStyle ([' foo ', ' Bar ', ' Baz '], ' color ', ' red ');
SetStyle ([' foo ', ' Bar ', ' Baz '], ' width ', ' 150px ');

Do you think we have a bad NB? You're going to forget it! We're JavaScript programmers! Can you use some brains to make a point? Maybe we can just call it all at once and we can set all the styles. Look at this:

function Setstyles (elements, styles) {for
  (var i=0, length = elements.length; i < length; i++) {
    var element = document.getElementById (Elements[i]);

    For (Var property in styles) {
      Element.style[property] = Styles[property];

}}} Now you just write:
setstyles ([' foo ', ' Bar ', ' baz '], {
  color: ' Red ',
  width: ' 150px '
});

If we have a lot of elements that want to set the same style, that code really saves us a lot of time.

The benefits of the appearance pattern:
The purpose of using the skin pattern is to make it easier for programmers, to write a combination of code at once, and then to use it over and over again, which helps save time and effort. Provides a simplified interface for a number of complex problems.

The Appearance method facilitates the developer, Bin has provided the comparison high-level function, reduces to the external code dependence degree, has added the additional flexibility for the application system development. By using a skin pattern, you can avoid tight coupling with the underlying subsystems. This allows the system to be modified without affecting the client code.

The disadvantages of the appearance pattern:
sometimes the element of appearance can also impose unnecessary additional burdens. Before implementing some routines, you should weigh its usefulness carefully. Sometimes compared to a complex appearance function, its composition function is more attractive in terms of intensity. This is because the appearance function may often perform tasks that you do not need.

For a simple personal web site or a small number of marketing pages, it may not be advisable to import this JavaScript library with just a little enhanced behavior such as ToolTips and pop-up windows. Consider using only a few simple appearance elements instead of a library full of such things.

Skin functions provide a simple interface for performing complex tasks that make code easier to maintain and understand. They can also weaken the coupling of subsystem and client code. Combine common functions that often come together. This pattern is common in the context of Dom scripting, a browser interface that needs to face gehong inconsistencies.