defineProperty 实现数据绑定

    //var ss = {}
    // 直接报错,因为get,set 不能与writable,value,同时存在，
    // 可以与enumerable configurable 同时存在
    /*Object.defineProperty(ss,'b',{
        get:function () {
            return 12;
        },
        enumerable:true,
        configurable:true,
        value:'sdf',
        writable:true
    })*/
    // html片段
    var strHtml = ` 
name
                  
{{name}}
`;
    // 打开页面插入html片段到body中
    document.querySelector('body').innerHTML = strHtml;
    // 根据传入的变量key，替换html中的插值
    var changeView = function (str) {
        // 正则表达式，通过new RegExp的时候，需要双斜线来转义 {  
        var reg = new RegExp("\\{\\{"+str+"\\}\\}","g");
        strHtmlTemp = strHtml.replace(reg,data['_'+str]);
        document.querySelector('body').innerHTML = strHtmlTemp;
    };
    // 如果在set方法中直接改data.name  会出现死循环，导致栈溢出，所以用_name 代替name 来存储变量的值;
    var data={
        _name:'',
        name:''
    };
    // 进入页面，循环所有data的属性，添加defineProperty
    for(var i in data){
        if(i.indexOf('_')===-1){
            changeView(i);
            Object.defineProperty(data,i,{
                get:function () {
                    return getName();
                },
                enumerable:true,
                configurable:false,
                set:function (newValue) {
                    setName(newValue) ;
                }
            })

            var getName = function() {
                return data['_'+i];
            };
            var setName = function (value) {
                data['_'+i] = value;
                console.log(111)
                changeView(i)
            };
        }
    }
通过在console里面更改data.name的值，看到数据的绑定的实现。