Use of facade in design mode in JavaScript development, design mode facade

Use of facade in design mode in JavaScript development, design mode facade

Concept

Appearance mode (facade mode) is a relatively simple and ubiquitous mode. The appearance mode provides a high-level interface that makes it easier for clients or subsystems to call.

The appearance mode is not the adapter mode. The adapter mode is a package used to adapt interfaces so that they can be used in incompatible systems. Creating appearance elements is convenient for the image. It is not used to deal with customer systems that require specific interfaces, but to provide a simplified interface.

JavaScript code example

It is represented by a piece of simple code.

var getName = function(){ return ''svenzeng"}var getSex = function(){  return 'man'}

If you need to call the getName and getSex functions respectively, you can use a higher-level interface getUserInfo to call.

var getUserInfo = function(){ var info = a() + b(); return info;}

You may ask why you didn't write the getName and getSex Code together at first, for example

var getNameAndSex = function(){ return 'svenzeng" + "man";}

The answer is obvious. The cooking master in the dining hall won't cook these two dishes in one pot because you have made a duck and a cabbage order. He is more willing to provide you with a roast duck meal package. Similarly, in programming, we need to ensure that the function or object is at a reasonable granularity as much as possible.
Another advantage of the appearance mode is that the real implementation details can be hidden from the user, and the user only cares about the interface at the highest level. For example, in the story of the roast duck meal package, you do not care whether the master is roast duck or fried cabbage, or where the duck grows.
Finally, we will write an example of the appearance mode we have used.

Var stopEvent = function (e) {// both the default event behavior and bubble e. stopPropagation (); e. preventDefault ();}

I know that the concept of appearance mode is easy to understand. You don't need a JavaScript code example, but some people are more concerned about the code and will think that is easier to understand. What's more, JavaScript articles without code examples are simply unconvincing and should be deleted from the Internet. We start with an example of a simple event listener. It is not easy to add an event listener unless you only want to run the code on a few browsers. You have to test many methods to ensure that the code for different browsers can run normally. In this code example, we just add the 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;  }}

Easy! I really hope that I don't need to write unnecessary code to make them simpler and better. But if it is true, it doesn't mean anything, and you don't want to read it anymore, right? So I don't think so. I want to show you more complicated things. I just want to say that your code looks like the following:

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 too bad! You have done exactly the same thing for each element! I think we can make it simpler:

Function setStyle (elements, property, value) {for (var I = 0, length = elements. length; I <length; I ++) {document. getElementById (elements [I]). style [property] = value ;}// you can write it like this: setStyle (['foo', 'bar', 'baz'], 'color ', 'red'); setStyle (['foo', 'bar', 'baz'], 'width', '150px ');

Do you think NB is broken? Forget it! We are JavaScript programmers! Can I use a brain or a real brain. Maybe we can set all the styles only once. Take a 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 only need to write: setStyles (['foo', 'bar', 'baz'], {color: 'red', width: '150px '});

If we want to set the same style for many elements, this code saves us a lot of time.

Benefits of appearance mode:
The purpose of the appearance mode is to make it easier for programmers to write a combination of code and then use it repeatedly, which helps save time and effort. Provides a simplified interface for some complex problems.

The appearance method facilitates developers. Bin has provided high-level functions to reduce the degree of dependency on external code and increase some flexibility for application system development. By using the appearance mode, you can avoid close coupling with the lower-layer subsystem. In this way, the system can be modified without affecting the customer code.

Disadvantages of appearance mode:
Sometimes appearance elements also bring unnecessary extra burden. We should carefully measure its practicality before implementing some routines. Sometimes, compared to a complex appearance function, its composition function is more attractive in terms of strength. This is because the appearance function may often execute tasks that you do not need.

For a simple personal website or a small number of marketing pages, it may not be wise to import this Javascript Library only for enhanced behavior such as tooltip and pop-up window. In this case, you should use only a few simple appearance elements instead of a library full of such things.

Appearance functions provide a simple interface for executing various complex tasks, which makes the code easier to maintain and understand. They can also weaken the coupling between sub-systems and customer code. Combine frequently-used functions. This mode is often used in DOM scripting environments that need to face inconsistent browser interfaces of Ge Hong.