javascript实现数据双向绑定的三种方式

╰+哭是因爲堅強的太久メ 2022-07-13 02:13 163阅读 0赞

前端数据的双向绑定方法

前端的视图层和数据层有时需要实现双向绑定(two-way-binding)，例如mvvm框架，数据驱动视图，视图状态机等，研究了几个目前主流的数据双向绑定框架，总结了下。目前实现数据双向绑定主要有以下三种。

[github演示例子][github]

#### 1、手动绑定 ####

比较老的实现方式，有点像观察者编程模式，主要思路是通过在数据对象上定义get和set方法(当然还有其它方法)，调用时手动调用get或set数据，改变数据后出发UI层的渲染操作；以视图驱动数据变化的场景主要应用与input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。

<table style="box-sizing: inherit; font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 1; border-collapse: collapse; margin: 14.4px 0px; table-layout: fixed; width: 736px; border-spacing: 0px;"> 
 <tbody style="box-sizing: inherit;"> 
 <tr style="box-sizing: inherit; vertical-align: middle; padding: 5px 5px 5px 10px;"> 
 <td style="box-sizing: inherit; border: 1px solid rgb(221, 221, 221); vertical-align: middle; padding: 0px;"><pre style="box-sizing: inherit; overflow-x: auto; margin-top: 0px; margin-bottom: 0px; font-family: consolas, cursive, sans-serif, 'Microsoft Yahei'; font-size: 1em; padding: 15px; line-height: 1.5; color: rgb(248, 248, 242); background: rgb(35, 36, 31);">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;data-binding-method-set&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;input q-value="value" type="text" id="input"&gt;
 &lt;div q-text="value" id="el"&gt;&lt;/div&gt;
 &lt;script&gt;
 var elems = [document.getElementById('el'), document.getElementById('input')];

var data = {
 
 value: 'hello!'
 };

var command = {
 
 text: function(str){
 
 this.innerHTML = str;
 },
 value: function(str){
 
 this.setAttribute('value', str);
 }
 };

/**
 * 设置数据后扫描
 */
 function mvSet(key, value){
 
 data[key] = value;
 scan();
 }
 /**
 * 数据绑定监听
 */
 elems[1].addEventListener('keyup', function(e){
 
 mvSet('value', e.target.value);
 }, false);

scan();

/**
 * 改变数据更新视图
 */
 setTimeout(function(){
 
 mvSet('value', 'fuck');
 },1000)

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

</pre></td> 
 </tr> 
 </tbody> 
</table>

#### 2、脏检查机制 ####

以典型的mvvm框架angularjs为代表，angular通过检查脏数据来进行UI层的操作更新。关于angular的脏检测，有几点需要了解些： - 脏检测机制并不是使用定时检测。 - 脏检测的时机是在数据发生变化时进行。 - angular对常用的dom事件，xhr事件等做了封装， 在里面触发进入angular的digest流程。 - 在digest流程里面， 会从rootscope开始遍历， 检查所有的watcher。 （关于angular的具体设计可以看其他文档，这里只讨论数据绑定），那我们看下脏检测该如何去做：主要是通过设置的数据来需找与该数据相关的所有元素，然后再比较数据变化，如果变化则进行指令操作

&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;data-binding-drity-check&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
 &lt;input q-event="value" ng-bind="value" type="text" id="input"&gt;
 &lt;div q-event="text" ng-bind="value" id="el"&gt;&lt;/div&gt;
 &lt;script&gt;

var elems = [document.getElementById('el'), document.getElementById('input')];
 
 var data = {
 
 value: 'hello!'
 };

var command = {
 
 text: function(str) {
 
 this.innerHTML = str;
 },
 value: function(str) {
 
 this.setAttribute('value', str);
 }
 };

/**
 * 脏循环检测
 * @param {[type]} elems [description]
 * @return {[type]} [description]
 */
 var digest = function(elems) {
 
 /**
 * 扫描带指令的节点属性
 */
 for (var i = 0, len = elems.length; i &lt; len; i++) {
 
 var elem = elems[i];
 for (var j = 0, len1 = elem.attributes.length; j &lt; len1; j++) {
 
 var attr = elem.attributes[j];
 if (attr.nodeName.indexOf('q-event') &gt;= 0) {
 
 /**
 * 调用属性指令
 */
 var dataKey = elem.getAttribute('ng-bind') || undefined;

/**
 * 进行脏数据检测，如果数据改变，则重新执行指令，否则跳过
 */
 if(elem.command[attr.nodeValue] !== data[dataKey]){

command[attr.nodeValue].call(elem, data[dataKey]);
 elem.command[attr.nodeValue] = data[dataKey];
 }
 }
 }
 }
 }

/**
 * 初始化数据
 */
 scan(elems);

/**
 * 可以理解为做数据劫持监听
 */
 function $digest(value){
 
 var list = document.querySelectorAll('[ng-bind='+ value + ']');
 digest(list);
 }

/**
 * 输入框数据绑定监听
 */
 if(document.addEventListener){
 
 elems[1].addEventListener('keyup', function(e) {
 
 data.value = e.target.value;
 $digest(e.target.getAttribute('ng-bind'));
 }, false);
 }else{
 
 elems[1].attachEvent('onkeyup', function(e) {
 
 data.value = e.target.value;
 $digest(e.target.getAttribute('ng-bind'));
 }, false);
 }

setTimeout(function() {
 
 data.value = 'fuck';
 /**
 * 这里问啥还要执行$digest这里关键的是需要手动调用$digest方法来启动脏检测
 */
 $digest('value');
 }, 2000)

#### 3、前端数据劫持(Hijacking) ####

第三种方法则是avalon等框架使用的数据劫持方式。基本思路是使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以了。具体实现如下：

&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;data-binding-hijacking&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
 &lt;input q-value="value" type="text" id="input"&gt;
 &lt;div q-text="value" id="el"&gt;&lt;/div&gt;
 &lt;script&gt;

var data = {
 
 value: 'hello!'
 };

var command = {
 
 text: function(str) {
 
 this.innerHTML = str;
 },
 value: function(str) {
 
 this.setAttribute('value', str);
 }
 };

var scan = function() {
 
 /**
 * 扫描带指令的节点属性
 */
 for (var i = 0, len = elems.length; i &lt; len; i++) {
 
 var elem = elems[i];
 elem.command = [];
 for (var j = 0, len1 = elem.attributes.length; j &lt; len1; j++) {
 
 var attr = elem.attributes[j];
 if (attr.nodeName.indexOf('q-') &gt;= 0) {
 
 /**
 * 调用属性指令
 */
 command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
 elem.command.push(attr.nodeName.slice(2));

}
 }
 }
 }

var bValue;
 /**
 * 定义属性设置劫持
 */
 var defineGetAndSet = function(obj, propName) {
 
 try {
 
 Object.defineProperty(obj, propName, {

get: function() {
 
 return bValue;
 },
 set: function(newValue) {
 
 bValue = newValue;
 scan();
 },

enumerable: true,
 configurable: true
 });
 } catch (error) {
 
 console.log("browser not supported.");
 }
 }
 /**
 * 初始化数据
 */
 scan();

/**
 * 可以理解为做数据劫持监听
 */
 defineGetAndSet(data, 'value');

/**
 * 数据绑定监听
 */
 if(document.addEventListener){
 
 elems[1].addEventListener('keyup', function(e) {
 
 data.value = e.target.value;
 }, false);
 }else{
 
 elems[1].attachEvent('onkeyup', function(e) {
 
 data.value = e.target.value;
 }, false);
 }

setTimeout(function() {
 
 data.value = 'fuck';
 }, 2000)
 &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;

</pre></td> 
 </tr> 
 </tbody> 
</table>

但值得注意的是defineProperty支持IE8以上的浏览器，这里可以使用\_\_defineGetter\_\_ 和\_\_defineSetter\_\_ 来做兼容但是浏览器兼容性的原因，直接用defineProperty就可以了。至于IE8浏览器仍需要使用其它方法来做hack。如下代码可以对IE8进行hack，defineProperty支持IE8。例如使用es5-shim.js就可以了。（IE8以下浏览器忽略）

#### 4、小结 ####

首先这里的例子只是简单的实现，读者可以深入感受三种方式的异同点，复杂的框架也是通过这样的基本思路滚雪球滚大的。

[github]: https://github.com/ouvens/demo-file/tree/master/two-ways-binding