zoukankan      html  css  js  c++  java
  • defineProperties属性的运用==数据绑定

    传送门

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>
    
    <script>
    
    /*
        defineProperties
        可以定义属性访问器
        如果使用了value,就不能使用set,get的方法
        enumerable:true 是可以使用for in 枚举出来的
        configurable:true 是否可以修改value值
        在传入的对象里写对象会被赋值undefined 如:defineObj["___private"]={},___private键值为undefined
        使用defineProperties方法可以监听数据的更改
    
    */
    
    function bindData(obj,opt){
        var defineObj={};
        for(var attrs in obj){
            defineObj["___"+attrs]={
                value:obj[attrs],
                writable: true,
                enumerable: true,
                configurable: true
            };
            (function(attrs){
                defineObj[attrs]={
                set: function (x) {
                    this["___"+attrs]=x;
                    opt.getFn&&opt.getFn(x,attrs);
                },
                get: function () {
                    opt.setFn&&opt.setFn(this["___"+attrs],attrs);
                    return this["___"+attrs];
                },
                enumerable: false,
                configurable: true
            }
            })(attrs);
        }
        Object.defineProperties(obj,defineObj);
    }
    
    //测试数据
    var model={a:"w",b:2};
    bindData(model,{setFn:setFn,getFn:getFn});
    function setFn(val,attr){
        console.log("setFn:"+attr+":"+val);
    }
    function getFn(val,attr){
        console.log("getFn:"+attr+":"+val);
    }
    </script>
  • 相关阅读:
    课程总结
    每日总结66
    每日总结65
    每日总结64
    每日总结63
    每日总结62
    每日总结61
    每日总结60
    偶滴点NET复习
    内部异常SocketException由于目标计算机积极拒绝
  • 原文地址:https://www.cnblogs.com/zhangzhicheng/p/7487663.html
Copyright © 2011-2022 走看看