導(dǎo)語
在軟件開發(fā)中，MVC或者MVVM是經(jīng)常被用到的設(shè)計模式。在web前端開發(fā)中，之前我們需要自己寫許多代碼來完成這項功能。而現(xiàn)在有許多優(yōu)秀的類庫可以幫我們實現(xiàn)這個功能。
許多優(yōu)秀的前端框架都提供了強大的數(shù)據(jù)雙向綁定的功能。比如 Ember.js， Angular.js， KnockoutJS。
如果我們在一些小型的項目中，只是希望某個功能區(qū)域有數(shù)據(jù)雙向綁定的功能，是不是就非得使用這么重的框架呢？事實上，我們可以用jQuery來實現(xiàn)一個簡單的數(shù)據(jù)雙向綁定的功能。
從頭開始做一個數(shù)據(jù)雙向綁定并不是那么復(fù)雜。簡單來說，需要實現(xiàn)下面三點：
- 我們需要指定View中的UI元素和數(shù)據(jù)中的屬性對應(yīng)關(guān)系。
- 我們需要監(jiān)聽View中的UI元素內(nèi)容以及數(shù)據(jù)的變化。
- 最后就是我們需要把變化通知到所有與之綁定的數(shù)據(jù)或者UI元素。
JAVAscript Code
function DataBinder (objectId) {
// 使用jQuery空對象作為監(jiān)聽對象
var pubSub = jQuery({});
//
var dataAttr = 'bind-' + objectId;
var message = objectId + ':change';
// 監(jiān)聽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把數(shù)據(jù)變化推送給所有與之綁定的頁面元素
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;
}
調(diào)用的時候，用uid與之關(guān)聯(lián)。
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對應(yīng)的屬性關(guān)聯(lián)。
題外話
如果項目中需要使用的數(shù)據(jù)綁定功能更復(fù)雜，knockout.js 庫也是一個不錯的選擇
希望本文能幫助到您！
點贊+轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容（收藏不點贊，都是耍流氓-_-）
關(guān)注 ｛我｝，享受文章首發(fā)體驗！
每周重點攻克一個前端技術(shù)難點。更多精彩前端內(nèi)容私信 我 回復(fù)“教程”
原文鏈接：http://eux.baidu.com/blog/fe/use-jquery-to-achieve-a-simple-data-binding
作者：西瓜痞
