利用jQuery實現簡單的數據雙向綁定導語JAVAscript CodeJavaScript CodeHtml題外話希望本文能幫助到您！

發布時間：2023-07-03 16:45:13 作者：網友整理

導語

在軟件開發中，MVC或者MVVM是經常被用到的設計模式。在web前端開發中，之前我們需要自己寫許多代碼來完成這項功能。而現在有許多優秀的類庫可以幫我們實現這個功能。

許多優秀的前端框架都提供了強大的數據雙向綁定的功能。比如 Ember.js， Angular.js， KnockoutJS。

如果我們在一些小型的項目中，只是希望某個功能區域有數據雙向綁定的功能，是不是就非得使用這么重的框架呢？事實上，我們可以用jQuery來實現一個簡單的數據雙向綁定的功能。

從頭開始做一個數據雙向綁定并不是那么復雜。簡單來說，需要實現下面三點：

我們需要指定View中的UI元素和數據中的屬性對應關系。
我們需要監聽View中的UI元素內容以及數據的變化。
最后就是我們需要把變化通知到所有與之綁定的數據或者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對應的屬性關聯。