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>
  • 相关阅读:
    09-13练习
    IDEA设置项目文件自动Add到Svn/Git
    虚拟机启动项目时报错
    微服务调用时报错
    查询每个月每一天的访问量
    在IDEA中关于项目java版本问题
    复习宝典之设计模式
    复习宝典之Maven项目管理
    复习宝典之Mysql数据库
    复习宝典之Redis
  • 原文地址:https://www.cnblogs.com/zhangzhicheng/p/7487663.html
Copyright © 2011-2022 走看看