转 JavaScript 实现简单的双向数据绑定-天翼云

转 JavaScript 实现简单的双向数据绑定

2024-06-06 08:24:01 阅读次数：27

转 JavaScript 实现简单的双向数据绑定

JavaScript 实现简单的双向数据绑定

英文原文：Easy Two-Way Data Binding in JavaScript

参与翻译(3人)：

徐继开, 闹闹爷, 几点人

双向数据绑定指的就是，绑定对象属性的改变到用户界面的变化的能力，反之亦然。换种说法，如果我们有一个user对象和一个name属性，一旦我们赋了一个新值给,在UI上就会显示新的姓名了。同样地，如果UI包含了一个输入用户姓名的输入框，输入一个新值就应该会使user对象的name属性做出相应的改变。

很多热门的JS框架客户端如Ember.js，Angular.js 或者KnockoutJS ，都在最新特性上刊登了双向数据绑定。这并不意味着从零实现它很难，也不是说需要这些功能的时候，采用这些框架是唯一的选择。下面的想法实际上很基础，可以被认为是3步走计划：

我们需要一个UI元素和属性相互绑定的方法
我们需要监视属性和UI元素的变化
我们需要让所有绑定的对象和元素都能感知到变化

还是有很多方法能够实现上面的想法，有一个简单有效的方法就是使用PubSub模式。这个思路很简单：我们使用数据特性来为HTML代码进行绑定，所有被绑定在一起的JavaScript对象和DOM元素都会订阅一个PubSub对象。只要JavaScript对象或者一个HTML输入元素监听到数据的变化时，就会触发绑定到PubSub对象上的事件，从而其他绑定的对象和元素都会做出相应的变化。

用jQuery做一个简单的实现

对于DOM事件的订阅和发布，用jQuery实现起来是非常简单的，接下来我们就是用Jquery比如下面：

`01`	`function` `DataBinder( object_id ) {`

`02`	`// Use a jQuery object as simple PubSub`

`03`	`var` `pubSub = jQuery({});`

04

`05`	// We expect a `data` element specifying the binding

`06`	`// in the form: data-bind-<object_id>="<property_name>"`

`07`	`var` `data_attr =` `"bind-"` `+ object_id,`

`08`	`message = object_id +` `":change";`

09

`10`	`// Listen to change events on elements with the data-binding attribute and proxy`

`11`	`// them to the PubSub, so that the change is "broadcasted" to all connected objects`

`12`	`jQuery( document ).on(` `"change",` `"[data-"` `+ data_attr +` `"]",` `function( evt ) {`

`13`	`var` `$input = jQuery(` `this` `);`

14

`15`	`pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );`

16 });

17

`18`	`// PubSub propagates changes to all bound elements, setting value of`

`19`	`// input tags or HTML content of other tags`

`20`	`pubSub.on( message,` `function( evt, prop_name, new_val ) {`

`21`	`jQuery(` `"[data-"` `+ data_attr +` `"="` `+ prop_name +` `"]"` `).each(` `function() {`

`22`	`var` `$bound = jQuery(` `this` `);`

23

`24`	`if` `( $bound.is("input, textarea, select") ) {`

`25`	`$bound.val( new_val );`

`26`	`}` `else` `{`

`27`	`$bound.html( new_val );`

28 }

29 });

30 });

31

`32`	`return` `pubSub;`

33 }

对于上面这个实现来说，下面是一个User模型的最简单的实现方法：

`01`	`function` `User( uid ) {`

`02`	`var` `binder =` `new` `DataBinder( uid ),`

03

`04`	`user = {`

`05`	`attributes: {},`

06

`07`	`// The attribute setter publish changes using the DataBinder PubSub`

`08`	`set:` `function( attr_name, val ) {`

`09`	`this.attributes[ attr_name ] = val;`

`10`	`binder.trigger( uid +` `":change", [ attr_name, val,` `this` `] );`

11 },

12

`13`	`get:` `function( attr_name ) {`

`14`	`return` `this.attributes[ attr_name ];`

15 },

16

`17`	`_binder: binder`

18 };

19

`20`	`// Subscribe to the PubSub`

`21`	`binder.on( uid +` `":change",` `function( evt, attr_name, new_val, initiator ) {`

`22`	`if` `( initiator !== user ) {`

`23`	`user.set( attr_name, new_val );`

24 }

25 });

26

`27`	`return` `user;`

28 }

现在我们如果想要将User模型属性绑定到UI上，我们只需要将适合的数据特性绑定到对应的HTML元素上。

`1`	`// javascript`

`2`	`var` `user =` `new` `User( 123 );`

`3`	`user.set(` `"name",` `"Wolfgang"` `);`

4

5 // html

`6`	`<input type="number"` `data-bind-123="name"` `/>`

这样输入值会自动映射到user对象的name属性，反之亦然。到此这个简单实现就完成啦！

不需要jQuery的实现

在如今的大多数项目里，可能已经使用了jQuery，因此上面的例子完全可以接受。不过，如果我们需要试着向另一个极端做，并且还删除对jQuery的依赖，那么怎么做呢？好，证实一下这么做并不难（尤其是在我们限制只支持IE 8及以上版本的情况下）。最终，我们必须使用一般的javascript实现一个定制的PubSub并且保留了DOM事件:

`01`	`function` `DataBinder( object_id ) {`

`02`	`// Create a simple PubSub object`

`03`	`var` `pubSub = {`

`04`	`callbacks: {},`

05

`06`	`on:` `function( msg, callback ) {`

`07`	`this.callbacks[ msg ] =` `this.callbacks[ msg ] \|\| [];`

`08`	`this.callbacks[ msg ].push( callback );`

09 },

10

`11`	`publish:` `function( msg ) {`

`12`	`this.callbacks[ msg ] =` `this.callbacks[ msg ] \|\| []`

`13`	`for` `(` `var` `i = 0, len =` `this.callbacks[ msg ].length; i < len; i++ ) {`

`14`	`this.callbacks[ msg ][ i ].apply(` `this, arguments );`

15 }

16 }

17 },

18

`19`	`data_attr =` `"data-bind-"` `+ object_id,`

`20`	`message = object_id +` `":change",`

21

`22`	`changeHandler =` `function( evt ) {`

`23`	`var` `target = evt.target \|\| evt.srcElement,` `// IE8 compatibility`

`24`	`prop_name = target.getAttribute( data_attr );`

25

`26`	`if` `( prop_name && prop_name !==` `""` `) {`

`27`	`pubSub.publish( message, prop_name, target.value );`

28 }

29 };

30

`31`	`// Listen to change events and proxy to PubSub`

`32`	`if` `( document.addEventListener ) {`

`33`	`document.addEventListener(` `"change", changeHandler,` `false` `);`

`34`	`}` `else` `{`

`35`	`// IE8 uses attachEvent instead of addEventListener`

`36`	`document.attachEvent(` `"onchange", changeHandler );`

37 }

38

`39`	`// PubSub propagates changes to all bound elements`

`40`	`pubSub.on( message,` `function( evt, prop_name, new_val ) {`

`41`	`var` `elements = document.querySelectorAll("["` `+ data_attr +` `"="` `+ prop_name +` `"]"),`

`42`	`tag_name;`

43

`44`	`for` `(` `var` `i = 0, len = elements.length; i < len; i++ ) {`

`45`	`tag_name = elements[ i ].tagName.toLowerCase();`

46

`47`	`if` `( tag_name ===` `"input"` `\|\| tag_name ===` `"textarea"` `\|\| tag_name ===` `"select"` `) {`

`48`	`elements[ i ].value = new_val;`

`49`	`}` `else` `{`

`50`	`elements[ i ].innerHTML = new_val;`

51 }

52 }

53 });

54

`55`	`return` `pubSub;`

56 }

除了设置器里调用 jQuery的trigger方法外，模型可以保持一样。调用trigger方法将替代为调用我们定制的具有不同特征的PubSub的publish方法：

`01`	`// In the model's setter:`

`02`	`function` `User( uid ) {`

03 // ...

04

`05`	`user = {`

06 // ...

`07`	`set:` `function( attr_name, val ) {`

`08`	`this.attributes[ attr_name ] = val;`

`09`	// Use the `publish` method

`10`	`binder.publish( uid +` `":change", attr_name, val,` `this` `);`

11 }

12 }

13

14 // ...

15 }

再次说明一下，我们用一般的纯javascript的少于100行的维护代码获得了同样的结果。

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

转 JavaScript 实现简单的双向数据绑定

转 JavaScript 实现简单的双向数据绑定

转 JavaScript 实现简单的双向数据绑定

英文原文：Easy Two-Way Data Binding in JavaScript

用jQuery做一个简单的实现

不需要jQuery的实现

相关文章

定义数组：不同编程语言的实现与比较

JavaScript封装css方法

使用 JavaScript 实现简易计算器

【知识科普】今天聊聊前端打包工具webpack

数组函数在JavaScript中的应用与优化策略

JavaScript语法——对象

JavaScript 网页设计案例：互动留言板

ECMAScript与JavaScript的区别

javascript变量定义命名规则

JavaScript基础总结三部曲之一

作者介绍

最新文章

定义数组：不同编程语言的实现与比较

JavaScript封装css方法

【知识科普】今天聊聊前端打包工具webpack

数组函数在JavaScript中的应用与优化策略

JavaScript语法——对象

ECMAScript与JavaScript的区别

热门文章

5 个 JavaScript “罕见”原生的 API

less中的内置函数

看山聊并发：Java 中 Vector 和 SynchronizedList 的区别

【Java Web】前端三剑客 之 JS

jQuery之事件

JavaScript-数组遍历

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

JavaScript初识及基本语法入门

JavaScript-三目运算符

JavaScript-ES6继承

盘点JavaScript中那些进阶操作知识（下篇）

基于JavaScript水果库存系统主页面操作

JavaScript学习笔记（7.0）

【Java Web】前端三剑客之 JS