The application of the facade appearance pattern in design patterns in JavaScript development (advanced)-JS Tutorial-php.cn

The appearance pattern simplifies the interaction between the client and the subsystem by introducing a appearance role, provides a unified entrance for complex subsystem calls, and reduces the coupling between the subsystem and the client. Next, let’s look at the design pattern. The application of facade appearance mode in JavaScript development

Concept

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

Appearance mode is not an adapter mode. The adapter mode is a wrapper used to adapt the interface so that it can be used in incompatible systems. Creating appearance elements is a convenience. It is not used for the purpose of dealing with client systems that require a specific interface, but to provide a simplified interface.

JavaScript code example

Use a simple piece of code to express it

var getName = function(){
 return &#39;&#39;svenzeng"
}
var getSex = function(){
  return &#39;man&#39;
}

Copy after login

If you need to call the getName and getSex functions separately. You can use A higher-level interface getUserInfo is called.

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

Copy after login

Maybe you will ask why the code for getName and getSex were not written together at the beginning, such as this

var getNameAndSex = function(){
 return &#39;svenzeng" + "man";
}

Copy after login

The answer is obvious, canteen The stir-fry chef will not stir-fry the two dishes in the same pot just because you ordered a portion of roast duck and a portion of cabbage. He would rather offer you a roast duck rice set. Also in programming, we need to ensure that functions or objects are at a reasonable granularity as much as possible. After all, not everyone likes to eat roast duck and also likes to eat cabbage.
Another advantage of the appearance mode is that it can hide the real implementation details from users, and users only care about the highest-level interface. For example, in the story of the roasted duck rice set, you don't care whether the chef cooks the roasted duck first or the cabbage first, and you don't care where the duck was grown.
Finally write an example of appearance mode that we have all used

var stopEvent = function( e ){  //同时阻止事件默认行为和冒泡
 e.stopPropagation();
 e.preventDefault();
}

Copy after login

I know that the concept of appearance mode is easy to grasp. You don’t necessarily need a JavaScript code example, but there are always some people who care more about code. I think it would be easier to understand that way. What's more, JavaScript articles without code examples are simply not convincing and should be deleted from the web. Let's start with a simple event listener example. Everyone knows that adding an event listener is not an easy task, unless you only want the code to run on a few browsers. You have to test a lot of ways to make sure your code works correctly for different browsers. 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(&#39;on&#39;+type, func);
  }
  else {
    element[&#39;on&#39;+type] = func;
  }
}

Copy after login

Keep it simple! I really wish I could stop writing unnecessary code and make it as simple as possible, but if that were the case it wouldn't be interesting and you wouldn't want to read it, right? So I don't think so, I think I'm going to show you something a little more complicated. I just wanted to say that your code would have looked a bit like this:

var foo = document.getElementById(&#39;foo&#39;);
  foo.style.color = &#39;red&#39;;
  foo.style.width = &#39;150px&#39;;

var bar = document.getElementById(&#39;bar&#39;);
  bar.style.color = &#39;red&#39;;
  bar.style.width = &#39;150px&#39;;

var baz = document.getElementById(&#39;baz&#39;);
  baz.style.color = &#39;red&#39;;
  baz.style.width = &#39;150px&#39;;

Copy after login

So lame! You do the exact same thing for every 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;
  }
}

// 现在你可以这么写：
setStyle([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], &#39;color&#39;, &#39;red&#39;);
setStyle([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], &#39;width&#39;, &#39;150px&#39;);

Copy after login

Do you think our NB is broken? Just forget it! We are JavaScript programmers! Can you use your brain and be serious? Maybe we could set all styles with just one call. 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];
    }
  }
}

//现在你只要这样写：
setStyles([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], {
  color: &#39;red&#39;,
  width: &#39;150px&#39;
});

Copy after login

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

Benefits of Appearance Mode: The purpose of using Appearance Mode is to make life easier for programmers. Write the combination code once and then use it repeatedly, which helps save money. time and effort. Provide a simplified interface for some complex problems.

The appearance method is convenient for developers. It provides higher-level functions, reduces dependence on external code, and adds some extra flexibility to the development of application systems. By using the facade pattern, you can avoid tight coupling with underlying subsystems. This allows modifications to the system to be made without affecting client code.

Disadvantages of appearance mode: Sometimes appearance elements also bring some unnecessary additional burdens. You should carefully weigh the practicality of some routines before implementing them. Sometimes the strength of a component function is more attractive than a complex appearance function. This is because facade functions may often perform tasks you don't need.

For a simple personal website or a small number of marketing pages, it may not be wise to import this Javascript library just for a few enhancements such as tool tips and pop-ups. At this point consider using just a few simple appearance elements rather than a library full of them.

Facade functions provide a simple interface for performing a variety of complex tasks, and they make the code easier to maintain and understand. They also loosen the coupling between subsystems and client code. Group common functions that often appear together. This mode is commonly used in environments such as DOM scripting that need to deal with inconsistent browser interfaces.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed interpretation of the method of implementing the adapter pattern in the design pattern in JavaScript (picture and text tutorial)

Detailed interpretation of the event stream and event handler in JavaScript (picture Text tutorial)

Summary of the application of Adapter pattern in JavaScript design pattern programming (graphic tutorial)

The above is the detailed content of The application of the facade appearance pattern in design patterns in JavaScript development (advanced). For more information, please follow other related articles on the PHP Chinese website!