JS Façade mode

Façade mode

Objective

The essence of façade mode is to implement a simple same interface to handle the processing and invocation of each subsystem interface . and bridging mode is different. : each class in the bridging mode is completely independent , Bridging mode Associates These classes only when necessary .

The façade mode is a little different..The façade pattern can actually be likened to the storefront window of a coffee shop,customers just need to explain what kind of coffee they need,that is, the coffee shop provides customers with only a variety of coffee selection interface,and encapsulate the behavior of each subclass of the interior.,like adding water.,unpacking and packing.,I don't understand .,just nonsense .,It's about wrapping up the process of making coffee.,No, you know.,just give you the last coffee you want..

Body

The advantage of façade mode is that we separate the customer from the more complex subsystem methods and interfaces , reducing the coupling between the user and each subsystem to improve the code instruction .

See :

Here is a purely formal case :

function A (x) {    //do something}function B (y) {    //do something}function AB (x, y) {    a (x);    b (y);}   

Of course, the form and the bridge mode is similar to a large extent , The following small example can feel the difference between the bridge mode

var N = window. N | | {}; N.tools = {    Stoppropagation:function (e) {        if (e.stoppropagation) {            e.stoppropagation ();        } else{            e.cancelbubble = true;        }    ,     preventdefault:function (e) {        if (e.preventdefault) {            E.preventdefault ();        } else{            e.returnvalue = false;        }    },        stopevent:function (e) {        n.tools.stoppropagation (e);        N.tools.preventdefault (e);    }}

A small block event bubbling one-level organization default Event tool method,from its representativestopeventIt is not difficult to see the difference between the quality and bridging mode.the above two methodsstoppropagetionand thePreventdefaultvery much like the adapter pattern,It's really similar to adapter mode,However, the adapter mode is primarily designed to adapt the interface to the packaging,time is suitable for a variety of different compatibility environments.that's almost what it means.,If you provide compatibility information so that its methods generate different methods in different environments,some anonymous self-invoking functions, for example, return similar forms of different functions based on judgment,Instead of running a judgment run inside the function every time you run it.,It is said that the adapter mode is more suitable for a point.

One of the great benefits of a façade pattern is the combination of functions , as in the case of pure patterns above , and the combination of façade pattern forms called convenience functions , See cases : we need to ID to be content of the Div element set to text color Red, so the simple code :

var element = document.getElementById (' content '); content.style.color = ' red ';//If you want to set the font size to 20pxcontent.style.fontsize = ' 20px ';

So when an element needs to set multiple properties :

function SetStyle (id,styles) {var element=document.getelementbyid (id); (var key in styles) {if ( Styles.hasownproperty (key)) {Element.style[key]=styles[key];}}} Setstyles (' content ', {color: ' Red ', fontSize: ' 20px '});

Setstyles is the equivalent of a convenience function , but also as a façade element , but relative to the simplest category .

If you have a few elements , you need to set the same batch of attributes , then wrap the Setstyles , embed it in another façade element and combine it into a relatively complex façade pattern instance :

function Setcss (IDs, Styles) {for    (var i = 0,len = Ids.length; i<len; i++) {         setstyles (ids[i], styles);    

FromSetcsscan be seen in,for usingSetcssof users to receive,don't even know what's inside.Setstylescode Form.Imagine,when a piece of logic code is more complex,call many of the various interfaces, etc.,we use the façade mode to encapsulate it,can bring a lot of convenience.

Summarize

The façade pattern can be broadly divided into two small categories,a block of code appears repeatedly,such as functionsabasically appear in the functionbbefore the call(though it's basically not that simple form),so you might consider wrapping this code in a façade sample.,to optimize the structure.There is another one that is incompatible with some browsersAPI,placed inside the façade mode for judgment,The best way to deal with these problems is to place cross-browser differences in a single façade mode instance to provide an external interface.

It is also important to note that the consequences of abuse of the façade pattern are also serious , not only to make the overall structure of the code loosely , but also to severely reduce the readability of the Code , looking for a BUG that might need to find another from one of the façade instances , and then contact the third fourth one , Poor maintainability of the code .

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

JS Façade mode