JavaScript appearance mode

This time I will tell you about the design concept of JS and what aspects need to be paid attention to. The corresponding chapters will be updated one after another. Everyone is welcome to make suggestions. We have said before Single case mode. If you are interested, you can check it out .

Note

JavaScriptDesign patternSeries github address

In-depth series of articles are in order, according to Directory structure Sequential reading works best.

Correction and Questions

If you have any questions or find errors, you can ask questions or make corrections in the corresponding issues.

Appearance mode

Concept:

Provide a higher-level unified interface for a complex set of sub-system interfaces,

This interface makes it easier to access the subsystem interface

The appearance mode is also called the facade mode

Case embodiment

There is a requirement to bind the document element For a click event, we need to consider browser compatibility issues at this time, but it is obviously not very reasonable to judge some browser compatibility every time we bind an event. At this time we have to use appearance mode, encapsulation A unified method for binding events, and then doing browser compatibility processing in this method, and uniformly exposing a method for binding external events,
This is what we call the appearance mode

Code reflection

// Appearance mode implementation function addEvent(dom, type, fn){ // For browsers that support dom2-level event handler addEventListener method if(dom.addEventListener){ dom.addEventListener(type,fn,false); }else if(dom.attachEvent){// For browsers that do not support the addEventListener method but support the attachEvent method dom.attachEvent('on'+type,fn); }else { dom['on'+ type] = fn; } } // Call the binding event addEvent(document.getElementById('btn'),'click',function(){ console.log('I am a click event'); });

Advantages of Appearance Mode

Provides a unified external interface, handles complex logic in a unified manner, and makes external calls easier

Summary of Appearance Mode

In javascript, appearance mode is relatively easy to understand. jQuery uses this

idea to solve browser compatibility issues

I believe you have already read these cases After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Related reading:

How to deal with CSS web page misalignment

How to create the loading effect of CSS3

How to create a butterfly flying animation with CSS3

The above is the detailed content of JavaScript appearance mode. For more information, please follow other related articles on the PHP Chinese website!