Detailed explanation of js appearance mode

Appearance mode actually provides a higher-level unified interface, which is often used to handle compatibility unification or encapsulation, for example, processing binding events. The following two examples are taken as an example.

1. Encapsulate binding events:

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 myp = document.getElementById('myp');
addEvent(myp,'click',function(){
   console.log('hahah');
   })

2. You can also use appearance Pattern encapsulates multiple functions:

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;
        }
A.html('box','这是新添加的内容');

Related recommendations:

JS Design Pattern - Appearance Pattern

JS Design Pattern Appearance Mode

js Appearance Mode

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