双向数据bind的探究（－）－jquery实现

最新推荐文章于 2024-10-18 10:41:41 发布

登辉

最新推荐文章于 2024-10-18 10:41:41 发布

阅读量475

点赞数

分类专栏： web开发

本文链接：https://blog.youkuaiyun.com/hanxiao358544923/article/details/44993809

版权

web开发专栏收录该内容

13 篇文章

订阅专栏

第一步,建立html，看看文件的配置

./databind.html

<html>
<head>
    <meta charset="utf-8">
    <title>data-bind</title>
</head>
<body>

<h3> 双向数据绑定</h3>

<h5>jquery 数据bind</h5>
<input type="text"  data-bind-model ="name">
<input type="text"  data-bind-model ="name">
<input type="text"  data-bind-model ="name">
<button οnclick="show()">输出数据</button>

<script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="./js/databind/databindJQ.js"></script>
<script type="text/javascript" src="./js/databind/app.js"></script>
</body>
</html>

这里的model就是表示数据的模型，name 表示数据的键，（参照angularjs 的数据绑定建立）特别注意的是这里的”model“ 虽然可以随便定义，但是建议不要用数字，否则会让数据在查找属性的时候找不到。

show() 函数主要是为了测试js 和html 之间数据是否同步

引入三个js文件， databindJQ主要是写的数据绑定类库，app.js 主要是用类库的使用，

下来进入文章正文：

./js/databind/databindJQ.js

JQuery = $;

function DataBinder( object_id){

    var pubSub = JQuery({});

    var data_attr ="bind-"+object_id ;
    var message = object_id +":change";

    JQuery(document).on("change","[data-"+data_attr +"]" , function(evt){
        var $input = JQuery(this);

        pubSub.trigger(message ,[$input.data(data_attr),$input.val() ] );
    });


    pubSub.on(message , function (evt ,prop_name ,new_val){
        JQuery("[data-"+data_attr+"="+prop_name+"]").each(function (){
            var $bound = JQuery(this);

            if($bound.is("input , textarea ,select")){
                $bound.val(new_val);
            } else {
                $bound.html(new_val);
            }
        });
    });

    return pubSub;
}



function User(uid){
  var binder = new DataBinder(uid);
  
  user = {
    attributes:{},

    set:function (attr_name,val){
        this.attributes[attr_name] = val;
        binder.trigger(uid+":change" ,[attr_name ,val , this]);
    },

    get:function (attr_name){
        return this.attributes[attr_name];
    },
    _binder:binder
  };

  binder.on(uid +":change" , function (evt ,attr_name ,new_val , initiator){
    if(initiator !== user){
        user.set(attr_name,new_val);
    }
  });  


  return user;
}

这个代码也是我抄别人的原创作者我主要是在他上面说一下自己的理解，

JQuery 参数主要是用cmd模块引入方法建的Jquery 对象，为了保持同步，这里用 var JQuery ＝ $ ; 来保持同步

下来说说重头戏，DataBind对象，

DataBinder 主要是借用JQuery 的查询功能，来监控页面数据改变，及发出事件的，

1.JQuery 订阅整个document的“change”如果发生改变，则发布“object_id:change”事件，同时传递object_id的新值

2.pubSub 订阅所有的“object_id:change”事件，如果收到事件请求，则用jquery 遍历所有dom节点，找到所有“object_id”,如果这个dom节点是input，textarea ，select 则，改变val，否则只修改字符，

3.return pubSub；

User 对象主要是监控js 数据改变，从而发出相应事件；

1.对于“model”，js都建立共享的DataBinder，来监控dom

2.建立 user对象，里面的attributes 是建立一个绑定数据的列表，

2.建立set 方法，第一步，在user.attributes 内建立数值对，第二步，用binder对象，发布数值改变事件事件，到pubSub 来更改dom内数值，

2.建立get方法，直接获取attributes的值

3.对user对象订阅“uid:change”事件，判断是不是自己的对象，如果是则更改，attributes对象

app.js 文件

./databind/app.js

var user = new User("model");

user.set("name" ,"Wolfgang");

function show(){
    console.log(user);
}

这里旧没什么好说的了。

看看实验截图吧：

总结：

数据是双向数据bind，但是是通过jquery 监控dom的change事件来改变的，没有办法做到真正的实时，只能说是在输入框输完之后，焦点移走之后才会发生数据改变，

据说，angularjs 是通过检测脏值来做数据绑定的，有待进一步研究，