实现非常简单的js双向数据绑定_javascript技巧

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

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

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

用jQuery做一个简单的实现

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

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

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

这样输入值会自动映射到user对象的name属性，反之

亦然。到此这个简单实现就完成啦！

不需要jQuery的实现

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

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

我们又一次通过一百行不到，又可维护的纯javascript完成了我们想要的结果。

以上内容就是关于js双向数据绑定的相关教程，希望对大家学习有所帮助。