导语

在软件开发中，MVC或者MVVM是经常被用到的设计模式。在web前端开发中，之前我们需要自己写许多代码来完成这项功能。而现在有许多优秀的类库可以帮我们实现这个功能。

许多优秀的前端框架都提供了强大的数据双向绑定的功能。比如 Ember.js， Angular.js， KnockoutJS。

如果我们在一些小型的项目中，只是希望某个功能区域有数据双向绑定的功能，是不是就非得使用这么重的框架呢？事实上，我们可以用jQuery来实现一个简单的数据双向绑定的功能。

从头开始做一个数据双向绑定并不是那么复杂。简单来说，需要实现下面三点：

1. 我们需要指定View中的UI元素和数据中的属性对应关系。
2. 我们需要监听View中的UI元素内容以及数据的变化。
3. 最后就是我们需要把变化通知到所有与之绑定的数据或者UI元素。

Javascript Code

function DataBinder (objectId) {
 // 使用jQuery空对象作为监听对象
 var pubSub = jQuery({});
 //
 var dataAttr = 'bind-' + objectId;
 var message = objectId + ':change';
 // 监听dom中所有元素的 data-binding 属性变化。并由pubSub来处理。
 $(document).on('input change', '[data-' + dataAttr + ']', function (event) {
 var $ele = $(this);
 console.log('$ele', $ele);
 pubSub.trigger(message, [$ele.data(dataAttr), $ele.val()]);
 });
 // pubSub把数据变化推送给所有与之绑定的页面元素
 pubSub.on(message, function (event, proName, newValue) {
 $('[data-' + dataAttr + '=' + proName + ']').each(function () {
 var $ele = $(this);
 if($ele.is('input, textarea, select')) {
 $ele.val(newValue);
 } else {
 $ele.html(newValue);
 }
 })
 });
 return pubSub;
}
function User(uid) {
 var binder = new DataBinder(uid);
 var user = {
 attributes: {},
 set: function (attrName, val) {
 this.attributes[attrName] = val;
 binder.trigger(uid + ':change', [attrName, val, this]);
 },
 get: function (attrName) {
 return this.attributes[attrName];
 },
 _binder: binder
 }
 return user;
}

调用的时候，用uid与之关联。

Javascript Code

var user = new User('user');
$('#btnSet').bind('click', function (event) {
 user.set('name', 'Liuyuan211');
});

Html

<div class="item">
 <label>用户名：</label><input type="text" data-bind-user="name" /><span data-bind-user="name"></span>
</div>
<div class="item">
 <input type="button" id="btnSet" value="Set" />
</div>

该例子中，uid就是 data-bind-user="name" 中的 user ，绑定的页面元素会自动与user对应的属性关联。

题外话

如果项目中需要使用的数据绑定功能更复杂，knockout.js 库也是一个不错的选择

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接：http://eux.baidu.com/blog/fe/use-jquery-to-achieve-a-simple-data-binding

作者：西瓜痞