|
文章地址 文章内容我就不贴出，比较简洁明了，我记录一下我的一些思考总结。 PS：建议先仔细读这篇文章。 MVVM MVVM即双向数据绑定，是一种设计模式，一般是Web前端框架的核心概念，肯定也不是Vue只此一家有。 简单来说就是，数据跟视图的实时绑定。如果我们自己要实现这个需求，那核心的问题有三个： 1、如何监听到数据变化？ 2、数据变化如何通知到视图？ 3、视图如何更新？ 这三个问题先放着，后面大家就知道我为什么这么划分这三个问题。 讨论文章 实现数据绑定的做法有大致如下几种：
1、发布者-订阅者模式（backbone.js）
2、脏值检查（angular.js）
3、数据劫持（vue.js）
那文章中把实现数据绑定归类为这几种，不过我觉得他的说法有问题。 首先，发布订阅模式是一种消息通知的设计模式，它解决的是通知的问题，也就是我上面提到的第2个问题。 然后，无论是脏值检查还是数据劫持，它解决的是监听数据变化的问题，也即是上面第1个问题。 也就是说，实现数据绑定，做法是 2 或 3 + 1，而不是选择其中一个就可以的。 另外，这三个方式并没有视图更新的部分，不能算是一个完整的数据绑定过程。 PS：这一点上大家要明确。 如何监听到数据变化？ angular.js：脏值检查。 vue.js：数据劫持。 angular.js我已许久不用，就不多讨论，这里谈谈vue.js。 不得不说，vue.js是做得比较鸡贼的，它利用js的语言特性，即Object.defineProperty()方法，做到了监听数据变化，但也因此它只能兼容IE9以上浏览器。 框架所使用的语言特性，直接影响它的兼容性。 数据变化如何通知到视图？ 如果对设计模式比较了解，一看到这个需求，很自然而然地就想起订阅发布模式。 视图如何更新？ 在看那文章中，我最感兴趣的是这个，有些豁然开朗。 在我看来，视图更新数据无非是在元素节点的属性或内容上，那么只需要设置一些特殊的指令作识别，再将相应的数据更新到元素上即可。 这样这一步需要做两件事： 1、指令解析器。解析指令，例如指令类型、对应表达式或数据项。 2、订阅事件。根据数据项生成订阅者。 做到这两步，再加上前面所做，就完成了MV的绑定。这个过程中，数据的维护方是观察者，而指令解析器是订阅者。 可能大家没有意识到的是，如果要完成VM的绑定，那么指令解析器是观察者，而数据的维护方是订阅者。例如一个表单的input，指令解析器解析出v-model时，它就需要监听input的change事件，当数值变化时，它需要通知数据维护方更新数据。 所以，在完整的MVVM中，数据维护方和指令解析器即是观察者，也是订阅者。 总结 MVVM，无论细节是如何实现，其关键部分就在于订阅发布这种思想，把握好这个，理解就不难了。 以上内容 转载自网络
| 
收藏
淘帖
踩
