实现前端框架数据绑定（数据驱动DOM）

function  $(element){    //传入响应式区域的dom根节点，返回响应式数据

    let  $$  =  {};    //响应式数据

    function  getElements(el){    //传入一个元素节点，返回一个保存着该元素本身及所有子元素的数组
        var  elementList  =  [],    //存储所有的元素节点(最终结果)
            tempList  =  [],    //暂时性的存储有子节点的元素节点
            parentElement  =  [];    //永远保存上一级的元素
            parentElement.push(el);
        elementList.push(parentElement[0]);    //把根元素推入list
        while(parentElement.length  !=  0){
            for(let  i  =  0,  len  =  parentElement.length;  i  <  len;  ++i){
                let  childElement  =  parentElement[i].childNodes;
                for(let  j  =  0,  lens  =  childElement.length;  j  <  lens;  ++j){
                    if(childElement[j].nodeType  ==  1){
                        elementList.push(childElement[j]);
                        if(childElement[j].hasChildNodes()){
                            tempList.push(childElement[j]);
                        }
                    }
                }
            }
            parentElement  =  tempList;
            tempList  =  [];
        }
        return  elementList;
    }

    function  attrHanding(elements){    //传入一个元素列表，返回bindData函数需要格式的数组
        let  list  =  [];
        for(let  i  =  0,  len  =  elements.length;  i  <  len;  ++i){
            let  temp  =  elements[i].attributes;
            for(let  j  =  0,  lens  =  temp.length;  j  <  lens;  ++j){
                let  temps  =  temp[j],
                    testinga  =  temps.nodeName.indexOf(‘a:‘),
                    testingb  =  temps.nodeName.indexOf(‘s:‘);
                if(testinga  !=  -1  ||  testingb  !=  -1){
                    let  tem  =  temps.nodeName.split(‘&‘),
                        end  =  ‘‘,
                        tems  =  (tem[0].split(‘:‘))[1];
                    tems  =  tems.split(‘‘);
                    for(let  x  =  0,  l  =  tems.length;  x  <  l;  ++x){
                        if(tems[x]  !=  ‘-‘){
                            end  =  end  +  tems[x];
                        }else{
                            ++x;
                            end  =  end  +  tems[x].toUpperCase();
                        }
                    }
                    list.push(tem[1],  elements[i]);
                    if(testinga  !=  -1){
                        list.push(end,  ‘‘,  temp[j].nodeValue);
                    }else{
                        list.push(‘style‘,  end,  temp[j].nodeValue);
                    }
                }
            }
        }
        return  list;
    }

    function  bindData(s){    //需要给bind传入数组，5个一组：(dom替代的名字，要操作的dom元素，要操作的属性名1，要操作的属性名2，dom替代的名字初始值)
        for(let  i  =  0,  l  =  s.length;  i  <  l;  i  +=  5){
            //把$$里的数据和dom绑定到一起，$$发生变动时，自动修改dom
            Object.defineProperty($$,  s[i],  {
                get:  function(){
                    return  this[‘_‘  +  s[i]];
                },
                set:  function(v){
                    this[‘_‘  +  s[i]]  =  v;
                    if(s[i  +  3]  ==  ""){
                        s[i  +  1][s[i  +  2]]  =  v;
                    }else{
                        s[i  +  1][s[i  +  2]][s[i  +  3]]  =  v;
                    }
                }
            });
            $$[s[i]]  =  s[i  +  4];    //初始值
        }
    }

    bindData(attrHanding(getElements(element)));

    return  $$;
}