简单实现一个表现层框架4-双向绑定

本章实现数据双向绑定(就是vue中的v-model)

创建函数model:

model(p,i,dom,name){
    }

遍历data值:

for(var m=0;m<name.length;m++){
            if(p[i].getAttribute('l-model')!=null){
            }
        }

判断:

if(p[i].tagName==='INPUT'){
                    if(p[i].getAttribute('l-model')===name[m]){
                        p[i].innerHTML=dom[name[m]]
                    }
                }else if(p[i].tagName==='SELECT'){
                }else if(p[i].tagName==='TEXTAREA'){
                }else{
                    console.error('Lister warn:the tag '+p[i].tagName+' is not input,select or textarea')
                }

创建监听器:

p[i].addEventListener('input',function (e){
                            dom[name[m]]=e.target.value
                        })

完整代码:

class Lister{
    $command=[
        {
            name: 'src',
            type: ['IMG']
        },
        {
            name: 'href',
            type: ['A']
        }
    ]
    load(el){
        document.title=el.title
        var setterNumber=false
        var createdNumber=false
        var dom=el.data()
        const div=document.getElementById(el.id)
        var name=Object.keys(dom);
        var p=div.querySelectorAll('*')
        try{
            el.load()
        }catch (e){
        }
        var a
        for(var i=0;i<p.length;i++){
            this.created(p,i,dom,name)
            this.setter(p,i,dom,name)
            this.model(p,i,dom,name)
            if(setterNumber===false){
                try {
                    el.setter()
                    setterNumber=true
                }catch (e){
                }
            }
            if(createdNumber===false){
                try{
                    el.created()
                    createdNumber=true
                }catch (e){
                }
            }
        }
    }
    created(p,i,dom,name){
        for(var j=0;j<name.length;j++){
            if(p[i].innerHTML.indexOf('{{'+name[j]+'}}')!==-1){
                var b='{{'+name[j]+'}}'
                var a=p[i].innerHTML.replace(b,'')
                p[i].innerHTML=a+dom[name[j]];
            }
        }
    }
    setter(p,i,dom,name){
        for(var k=0;k<this.$command.length;k++){
            if(p[i].getAttribute('l-bind-'+this.$command[k].name)!=null){
                var c=false
                for(var l=0;l<this.$command[k].type.length;l++){
                    if(p[i].tagName===this.$command[k].type[l]){
                        c=true
                        for(var m=0;m<name.length;m++){
                            if(p[i].getAttribute('l-bind-'+this.$command[k].name)===name[m]){
                                p[i].setAttribute(this.$command[k].name,dom[name[m]])
                            }
                        }
                    }else{
                        console.error('Lister warn:the tag '+p[i].tagName+' is not a '+this.$command[k].type[l])
                    }
                }
            }
        }
    }
    model(p,i,dom,name){
        for(var m=0;m<name.length;m++){
            if(p[i].getAttribute('l-model')!=null){
                if(p[i].tagName==='INPUT'){
                    if(p[i].getAttribute('l-model')===name[m]){
                        p[i].value=dom[name[m]]
                        p[i].addEventListener('input',function (e){
                            dom[name[m]]=e.target.value
                            console.log(e.target.value)
                        })
                    }
                }else if(p[i].tagName==='SELECT'){
                    if(p[i].getAttribute('l-model')===name[m]){
                        p[i].value=dom[name[m]]
                        p[i].addEventListener('input',function (e){
                            dom[name[m]]=e.target.value
                            console.log(e.target.value)
                        })
                    }
                }else if(p[i].tagName==='TEXTAREA'){
                    if(p[i].getAttribute('l-model')===name[m]){
                        p[i].value=dom[name[m]]
                        p[i].addEventListener('input',function (e){
                            dom[name[m]]=e.target.value
                            console.log(e.target.value)
                        })
                    }
                }else{
                    console.error('Lister warn:the tag '+p[i].tagName+' is not input,select or textarea')
                }
            }
        }
    }
    constructor(el) {
        this.load(el)
    }
}