本文详解JavaScript双向数据绑定的核心原理，即模型与视图的同步更新。通过PubSub发布订阅模式，分别展示了基于jQuery和纯原生JavaScript（兼容IE8+）的两种轻量级实现方案，代码简洁且易于维护，帮助开发者理解数据驱动视图的底层机制。
双向数据绑定原理
双向数据绑定是指将对象属性的变化同步到用户界面，同时也能将用户界面的操作反向同步回对象属性的能力。具体来说，如果存在一个包含 name 属性的 user 对象，当 user.name 被赋予新值时，界面上应自动显示该新姓名；反之，若界面包含用于输入姓名的控件，用户输入新值后，user 对象的 name 属性也应随之更新。
尽管 Ember.js、Angular.js 和 KnockoutJS 等主流 JS 框架已将双向数据绑定作为核心特性，但这并不意味着从零实现该功能极其困难，也不代表在需要此功能时必须依赖这些框架。实际上，其核心逻辑非常基础，可以概括为以下三个步骤：
首先，需要建立 UI 元素与数据属性之间的绑定关系；其次，必须监视数据属性和 UI 元素的状态变化；最后，确保所有已绑定的对象和元素都能感知并响应这些变化。
实现上述逻辑有多种方法，其中一种简单且有效的方案是采用 PubSub（发布/订阅）模式。其核心思路是利用 HTML 的 data 属性进行绑定，所有关联的 JavaScript 对象和 DOM 元素均订阅同一个 PubSub 对象。当 JavaScript 对象或 HTML 输入元素检测到数据变化时，会触发绑定在 PubSub 上的事件，从而通知其他所有绑定的对象和元素做出相应更新。
基于 jQuery 的实现方案
接下来，我们将使用 jQuery 来实现这一简单的双向数据绑定功能。
利用 jQuery 处理 DOM 事件的订阅与发布非常便捷，具体实现如下所示：
function DataBinder( object_id ) {
// Use a jQuery object as simple PubSub
var pubSub = jQuery({});
// We expect a `data` element specifying the binding
// in the form: data-bind-<object_id>="<property_name>"
var data_attr = "bind-" + object_id,
message = object_id + ":change";
// Listen to change events on elements with the data-binding attribute and proxy
// them to the PubSub, so that the change is "broadcasted" to all connected objects
jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) {
var $input = jQuery( this );
pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );
});
// PubSub propagates changes to all bound elements, setting value of
// input tags or HTML content of other tags
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;
}针对上述实现逻辑，User 模型的最简实现方式如下：
function User( uid ) {
var binder = new DataBinder( uid ),
user = {
attributes: {},
// The attribute setter publish changes using the DataBinder PubSub
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
};
// Subscribe to the PubSub
binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
if ( initiator !== user ) {
user.set( attr_name, new_val );
}
});
return user;
}若要将 User 模型的属性绑定到 UI 上，只需将合适的数据属性（data attribute）绑定到对应的 HTML 元素即可。
// javascript
var user = new User( 123 );
user.set( "name", "Wolfgang" );
// html
<input type="number" data-bind-123="name" />这样，输入框的值会自动映射到 user 对象的 name 属性，
反之亦然。至此，这个简单的实现便完成了。
纯原生 JavaScript 实现方案
如果不依赖 jQuery 该如何实现？
在当前大多数项目中，使用 jQuery 已十分普遍，因此上述示例完全可行。但如果希望尝试去除 jQuery 依赖，该过程并不复杂，特别是在仅要求支持 IE 8 及以上版本的情况下。最终，我们需要使用原生 JavaScript 实现一个定制的 PubSub，并保留对 DOM 事件的处理：
function DataBinder( object_id ) {
// Create a simple PubSub object
var pubSub = {
callbacks: {},
on: function( msg, callback ) {
this.callbacks[ msg ] = this.callbacks[ msg ] || [];
this.callbacks[ msg ].push( callback );
},
publish: function( msg ) {
this.callbacks[ msg ] = this.callbacks[ msg ] || []
for ( var i = , len = this.callbacks[ msg ].length; i < len; i++ ) {
this.callbacks[ msg ][ i ].apply( this, arguments );
}
}
},
data_attr = "data-bind-" + object_id,
message = object_id + ":change",
changeHandler = function( evt ) {
var target = evt.target || evt.srcElement, // IE compatibility
prop_name = target.getAttribute( data_attr );
if ( prop_name && prop_name !== "" ) {
pubSub.publish( message, prop_name, target.value );
}
};
// Listen to change events and proxy to PubSub
if ( document.addEventListener ) {
document.addEventListener( "change", changeHandler, false );
} else {
// IE uses attachEvent instead of addEventListener
document.attachEvent( "onchange", changeHandler );
}
// PubSub propagates changes to all bound elements
pubSub.on( message, function( evt, prop_name, new_val ) {
var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),
tag_name;
for ( var i = , len = elements.length; i < len; i++ ) {
tag_name = elements[ i ].tagName.toLowerCase();
if ( tag_name === "input" || tag_name === "textarea" || tag_name === "select" ) {
elements[ i ].value = new_val;
} else {
elements[ i ].innerHTML = new_val;
}
}
});
return pubSub;
}除了模型中的 setter 不再调用 jQuery 的 trigger 方法外，模型结构保持不变。此处调用 trigger 的逻辑被替换为调用我们定制的 PubSub 对象的 publish 方法：
// In the model's setter:
function User( uid ) {
// ...
user = {
// ...
set: function( attr_name, val ) {
this.attributes[ attr_name ] = val;
// Use the `publish` method
binder.publish( uid + ":change", attr_name, val, this );
}
}
// ...
}通过不到一百行的代码，我们再次用可维护的纯 JavaScript 实现了预期功能。
以上内容即为关于 JS 双向数据绑定的相关教程，希望对大家的学习有所帮助。