concept
Appearance mode (facade mode) is a relatively simple and ubiquitous mode. Appearance mode provides a high-level interface, which makes it easier to call clients or subsystems.
Appearance mode is not adapter mode, an adapter mode is a wrapper to adapt the interface to use it in an incompatible system. Creating appearance elements is a convenience. It is not used to deal with customer systems that require specific interfaces, but to provide a simplified interface.
JavaScript code examples
Use a simple piece of code to express it
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 it.
var getUserInfo = function(){ var info = a() + b(); return info;}Maybe you will ask why you didn't write the getName and getSex code together at the beginning, for example
var getNameAndSex = function(){ return 'svenzeng" + "man";}The answer is obvious. The canteen's cooking chefs will not stir-fry these two dishes in the same pot just because you booked a roast duck and a cabbage. He would rather provide you with a set meal of roast duck rice. Also in programming, we need to ensure that the 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 appearance mode is that it can hide real implementation details from users, and users only care about the highest level interface. For example, in the story of the roast duck rice set meal, you don’t care whether the master makes roast duck first or stir-fry cabbage first, and you don’t care where the duck grew up.
Finally, I wrote an example of the appearance pattern that we have all used
var stopEvent = function( e ){ //Block event default behavior and bubbles at the same time e.stopPropagation(); e.preventDefault();}I know that the concept of appearance patterns is easy to master, and you may not necessarily need an example of JavaScript code, but some people always care more about the code and will think that it will be easier to understand. What's more, JavaScript articles without code samples are not convincing at all, so they should be deleted from the Internet. Let's start with a simple example of an event listener. Everyone knows that adding an event listener is not easy unless you just want the code to run on a few browsers. You have to test a lot of ways to make sure that the code for different browsers works properly. 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 simple! I really wish I could not write unnecessary codes, making them simpler the better, but if that's the case, it would be meaningless and you wouldn't want to read it, right? So I don't think so, I think I want to show you something more complicated. I just want to say that your code would look 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';var baz = document.getElementById('baz'); baz.style.color = 'red'; baz.style.width = '150px';Too lame! You did exactly the same thing for each element! I think we can make it a little easier:
function setStyle(elements, property, value) { for (var i=0, length = elements.length; i < length; i++) { document.getElementById(elements[i]).style[property] = value; }}// Now you can write this way: setStyle(['foo', 'bar', 'baz'], 'color', 'red');setStyle(['foo', 'bar', 'baz'], 'width', '150px');Do you think our NB is broken? You forget it! We are JavaScript programmers! Can you use some brains to get some real things? Maybe we can set all the styles just once. Check out 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 need to write this way: setStyles(['foo', 'bar', 'baz'], { color: 'red', width: '150px'});If we have many elements that want to set the same style, then this code really saves us a lot of time.
Advantages of appearance mode:
The purpose of using Appearance Mode is to make it easier for programmers to write combo code once and then use it repeatedly, which helps save time and effort. Provide a simplified interface for some complex problems.
The appearance method is convenient for developers. Bin has provided relatively high-level functions, reducing dependence on external code, and adding some additional flexibility to the development of application systems. By using the appearance mode, tight coupling to the underlying subsystem can be avoided. This way, the system can be modified without affecting the client code.
Disadvantages of appearance mode:
Sometimes the appearance elements can also bring some unnecessary extra burden. Before implementing some routines, you should carefully consider their practicality. Sometimes compared to a complex appearance function, its composition function is more attractive in terms of force. This is because appearance functions may often perform 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 for a little enhanced behavior such as tooltips and pop-ups. Consider using only a few simple appearance elements at this time instead of a library full of these things.
Appearance functions provide a simple interface for performing various complex tasks, which make the code easier to maintain and understand. They can also weaken the coupling between subsystems and client code. Combine common functions that often appear together. This mode is very commonly used in DOM scripting, which requires inconsistent browser interfaces.