Structural design patterns: Combine classes or objects to simplify design

Facade pattern concept: To provide a higher level unified interface to a complex set of subsystem interfaces.

In short: Unified interface, easy to call (packaged services)

Application: compatible method encapsulation, simplify the bottom operation

1.1 Simplifying the Underlying Interface case – Click events

Scenario description: How to bind multiple onClick events to a DOM element, and the latter will override the former and only execute subsequent events?

Simple solution:

addEventListener
Copy the code

This method is bound to multiple click events that are executed sequentially and not overwritten (like queues, those bound first are executed first)

<! -- Example code --><div id="app">
    <button id="btn">Click on the</button>
</div>
//IE 8 tests cannot use let
var btn = document.getElementById('btn')
var fn1 = function() {
    alert('fn1')}var fn2 = function() {
    alert('fn2')
}
btn.addEventListener('click', fn1)
btn.addEventListener('click', fn2)
Copy the code

However, this method has compatibility issues and is not supported below IE9. Therefore, the function of appearance mode is shown here, which can be used to design unified call interface to simplify the problem of interface disunity due to compatibility — simplify the complexity of the underlying interface Encapsulate the binding method interface with the observation pattern

<div id="app">
    <button id="btn">Click on the</button>
</div>
        function addEvent(dom, type, fn) {
            if (dom.addEventListener) {
                dom.addEventListener(type, fn, false);
            } else if (dom.attachEvent) {
                dom.attachEvent('on' + type, fn);
            } else {
                dom['on'+ type] = fn; }}var btn = document.getElementById('btn');
        var fn1 = function() {
            alert('fn1');
        };
        var fn2 = function() {
            alert('fn2');
        };
        addEvent(btn, 'click', fn1);
        addEvent(btn, 'click', fn2);
Copy the code

Tip needs to know about DOM0 and DOM2

1.2 Simplifying Underlying Interfaces – Encapsulate multiple functions through appearance mode

<div id="app">
</div>
<script>
    var A = {
        getDom: function(id) {
            return document.getElementById(id)
        },
        setStyle: function(dom, key, value) {
            dom.style[key] = value
        },
        // getStyle: function(dom, key) {
        // return dom.style[key]
        // },
        setAttr: function(dom, key, value) {
            dom.setAttribute(key, value)
        },
        setText: function(dom, text) {
            dom.innerText = text
        }
    }
    //test
    var app = A.getDom('app')
    A.setText(app, 'hello')
    A.setAttr(app, 'data-id'.'uuid')
    A.setStyle(app, 'background'.'yellow')
</script>
Copy the code

1.3 Compatibility Cases

Purpose: To prevent default events, compatible with IE8

// Prevent a link from default jump behavior in div
 <div id="app">
        <a href="https://www.baidu.com" id="link">baidu</a>
    </div>
        var getEvent = function(e) {
            // Event IE window.event
            return e || window.event
        }
        var getTarget = function(e) {
            // console.log(e)
            // Standard browser e.telget IE e.scrcElement
            return  e.target || e.srcElement
        }
        // Prevent default behavior
        var preventDefault = function(e) {
            var event = getEvent(e);
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                // IE
                event.returnValue = false; }}var div = document.getElementById('app');
        var targetDom = document.getElementById('link');
        document.onclick = function(e) {
            preventDefault(e);
            if (getTarget(e) === targetDom) {
                alert('preventDefault'); }}Copy the code

The practice encapsulates a method for getting CSS styles

<div id="app">

    </div>
    <script>
        var getStyle = function(id, key) {
            return document.getElementById(id).style[key];
        }
        console.log(getStyle('app'.'backgroundColor'));
        var getCss =  function(dom, attr) {
            if (dom.currentStyle) {
                // IE
                return dom.currentStyle[attr];
            } else {
                return window.getComputedStyle(dom, false)[attr]; }}var dom = document.getElementById('app');
        console.log(getCss(dom, 'background-color'));
    </script>
Copy the code