The appearance model

Provides a higher-level unified interface for a complex set of subsystem interfaces through which access to subsystem interfaces is made easier.

Appearance pattern nature

Encapsulating interactions simplifies calls

The core idea of appearance patterns

Users don’t need to care about how it is called, how it is used, we just need to have an interface that can provide us to implement the function, right

The primary role in appearance mode

1. Facade role: Clients can invoke methods of this role. This role knows the functions and responsibilities of the related subsystems. Under normal circumstances, this role delegates all requests from the client to the appropriate subsystem.

SubSystem role: Can have one or more subsystems at the same time. Each subsystem is not a single class, but a collection of classes. Each subsystem can be called directly by the client or by the facade role. The subsystem does not know that the facade exists, and to the subsystem, the facade is just another client.

Concrete example

Complete multiple operations with one key

    // Example 1: Complete loading, egg breaking and egg changing with one click
    class A{
        a1(){} / / reloading
        a2(){} / / dozen eggs
        a3(){} / / in eggs

        a_init(){ // One-click operation
            this.a1() // call reload
            this.a2() // call beat eggs
            this.a3() // Call the egg swap}}let a = new A()

    // There is no need to use the appearance pattern
    a.a1() / / reloading
    a.a2() / / dozen eggs
    a.a3() / / in eggs

    // Use appearance mode
    a.a_init() // One key operation reload eggs for eggs
Copy the code

Compatibility with browser event listener functions

    Example 2: Browser-compatible event listeners

    // Some browsers support el.addeventListener (), while others only support el.attachevent ()
    function addMyEvent(el,type,fn){ // Receive parameters: element, event type, callback function
        if(Browsers support addEventListener()){// Just use el.addeventListener ()
        }else{ // Support attachEvent()
            // just use attachEvent()}}// Then when you need to use event listeners later, you just need to execute the compatibility function
    addMyEvent(el,type,fn)
Copy the code

Analog JQ source code

    Example 3: Simulate jQ source code
    var A = {
        get:function (id){
            return document.getElementById(id)
        },
        css:function (id,key,value){
            this.get(id).style[key] = value
        },
        html:function (id,content){
            this.get(id).innerHTML = content
        },
    }

    // Use the appearance mode to directly call the wrapped method to write less
    A.html("box"."This is a new addition 1.")
    A.html("box1"."This is a new addition 2.")
    A.html("box2"."This is a new addition 3.")
    A.html("box3"."This is a new addition 4.")
    A.html("box4"."This is a new addition 5.")
    A.html("box5"."This is a new addition 6.")

    // Not using the appearance pattern requires tedious calls to various methods one by one
    document.getElementById("box").innerHTML("This is a new addition 1.")
    document.getElementById("box1").innerHTML("This is a new addition 2.")
    document.getElementById("box2").innerHTML("This is a new addition 3.")
    document.getElementById("box3").innerHTML("This is a new addition 4.")
    document.getElementById("box4").innerHTML("This is a new addition 5.")
    document.getElementById("box5").innerHTML("This is a new addition 6.")

Copy the code

Simulate the computer boot process

    // Example 4: Simulate computer startup
    // A method is called every time a piece of hardware is booted
    function Cpu(){
        this.startUp = function (){
            console.log("Cpu start")}}function Memory(){
        this.startUp = function (){
            console.log("The Memory start")}}function Disk(){
        this.startUp = function (){
            console.log(Disk boot "")}}// With appearance mode, a single keystroke invokes all hardware to boot
    function Computer(){
        var _cpu,_memory,_disk
        _cpu = new Cpu()
        _memory = new Memory()
        _disk = new Disk()

        this.start = function (){
            _cpu.startUp() // The CPU calls the start function
            _memory.startUp() // Memory calls the start function
            _disk.startUp() // disk calls the startup function}}let c = new Computer() // instantiate the object
    c.start() // The object directly calls the method to operate the computer three hardware boot
Copy the code

Appearance mode benefits

1. The loose coupling relationship between subsystem and client is realized.

2. The client shields subsystem components, reducing the number of objects the client needs to process and making the subsystem easier to use

Appearance mode Application scenarios

1. At the initial stage of design, different layers should be consciously separated and an appearance pattern should be established between layers.

2. During the development phase, the subsystem became more and more complex, and the appearance mode was added to provide a simple call interface.

3. When maintaining a large legacy system that is already very difficult to maintain and extend, but contains very important functionality, develop a facade class for it so that the new system can interact with it.