利用jquery实现双向数据绑定

jQuery
498
0
0
2022-05-12

首先我们要明确数据绑定的定义:数据绑定指的是将一个用户界面元素(控件)的属性绑定到一个类型(对象)实例上的某个属性,当对象的属性发生变化时能够同时改变对应的UI。

在不了解原理就直接使用过前端框架的开发者眼中,数据绑定的效果即是某个变量和某个输入框的数据能保持同步,一者变另一者随之改变,这种效果用简单的js语句即可实现,1是当变量改变时将变量赋值给输入框,2是给输入框添加change或input事件。这仅仅是实现数据绑定的基础,真正意义上的数据绑定是封装内部操作过程,做到当变量变化时绑定了该变量的所有元素都自动更新。

目前主流的框架都实现了单向数据绑定,而双向数据绑定不过是在单向数据绑定的基础上,给可输入元素添加change或input事件。

实现数据绑定的方式大致有如下三种:1、观察者模式,2、脏值检查,3、数据劫持。本文采用第一种方式实现数据绑定。观察者模式又名发布-订阅模式,GOF给观察者模式如下定义:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。

通过jQuery实现数据双向数据绑定的方法就是使用自定义的data属性作为HTML代码中需要绑定的属性,所有被绑定在一起的JavaScript对象和DOM元素都会订阅一个PubSub对象。只要JavaScript对象或者一个HTML输入元素监听到数据的变化时,就会触发绑定到PubSub对象上的事件,从而其他绑定的对象和元素都会做出相应的变化。

html代码:

利用jquery实现双向数据绑定

html

js代码:

利用jquery实现双向数据绑定

pubSub

以下代码简单的实现一个User模型:

利用jquery实现双向数据绑定

User

将User模型属性绑定到UI上:

利用jquery实现双向数据绑定

绑定

最终输入值会自动映射到user对象的name属性,反之亦然。