很多的前端框架都支持数据双向绑定了,最近正好在看双向绑定的实现,就用Javascript写了几个简单的例子。

几个例子中尝试使用了下面的方式实现双向绑定:

  1. 发布/订阅模式

  2. 属性劫持

  3. 脏数据检测

发布/订阅模式

实现数据双向绑定最直接的方式就是使用PubSub模式:

  • 当model发生改变的时候,触发Model change事件,然后通过响应的事件处理函数更新界面

  • 当界面更新的时候,触发UI change事件, 然后通过相应的事件处理函数更新Model,以及绑定在Model上的其他界面控件

根据这个思路,可以定义'ui-update-event'和'model-update-event'两个事件,然后针对Model和UI分别进行这两个事件订阅和发布。

UI更新

对于所有支持双向绑定的页面控件,当控件的“值”发生改变的时候,就触发'ui-update-event',然后通过事件处理函数更新Model,以及绑定在Model上的其他界面控件

处理控件“值”的改变,发布“ui-update-event”事件,(这里只处理包含“t-binding”属性的控件):

        		

延伸阅读

学习是年轻人改变自己的最好方式-Java培训,做最负责任的教育,学习改变命运,软件学习,再就业,大学生如何就业,帮大学生找到好工作,lphotoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训学习是年轻人改变自己的最好方式