如何实现js项目中简洁的双向数据绑定机制？

本文共计1167个文字，预计阅读时间需要5分钟。

目录+前言+发布订阅模式+结果+应用+总结+前言+双向数据绑定+指的是当对应对象的属性发生变更时，时间足够同时改变对应的UI，反之亦然。简化说法：目录+前言+模式+结果+应用+总结+前言+双向绑定+对象属性变，UI跟着变，反之亦然。

目录

• 前言
• 发布订阅者模式
• 结果
• 调用
  
• 总结

前言

双向数据绑定 指的是当对象的属性发生变化时能够同时改变对应的UI，反之亦然。换句话说，如果我们有一个user对象，这个对象有一个name属性，无论何时你对user.name设置了一个新值，UI也会展示这个新的值。同样的，如果UI包含一个用于数据用户名字的输入框，输入一个新值也会导致user对象的name属性发生相应的改变。

许多流行的javascript框架，像Ember.js,Angular.js或者KnockoutJS都会把双向数据绑定作为其中的主要特性来宣传。这并不意味着从头开始实现它很难，也不意味着当我们需要这种功能的时候，使用这些框架是我们唯一的选择。内部的潜在思想事实上是相当基础的，实现它可以归纳为以下三点：

• 我们需要一种方式确定哪个UI元素绑定在哪个属性上。
• 我们需要监控属性和UI的变化
• 我们需要把所有绑定的对象和UI元素的变化传播出去。