首页 > 应用开发 > > 知其所以然:前端常见的实现数据绑定的做法有哪些?
努力的椰子
编程使我快乐
现在的前端框架越来越简便,上手容易,很多内容都已经被我们所忽略,不再去追求本质,了解原理,单纯的为了结果而开发。
就好比旅行只是为了到目的地拍下合影,然后急急忙忙,行色匆匆的赶回家中。忽略了过程的美好,不再在意过程中的风景人文。(纯粹就是闲的,与主题无关)
回到正题,我们常用的数据绑定的方式有这么几种:
发布者-订阅者模式(backbone.js)
简单理解就比如一个商店,会员粉丝经常要询问有什么活动,员工每次都要做一遍解答,工作重复又麻烦,但是把所有会员都订阅公众号,有活动时统一发送消息。会员就是订阅者,商店就是发布者会在合适的时候遍历名单,依次给会员发布消息,这个发消息通知的过程一个的发布—订阅模式
通常的做法就是
vm.set('property', value)
脏值检查(angular.js)
angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,angular只有在指定的事件触发时进入脏值检测,大致如下:
1、DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
2、XHR响应事件 ( $http )
3、浏览器Location变更事件 ( $location )
4、Timer事件( $timeout , $interval )
5、执行 $digest() 或 $apply()数据劫持(vue.js)
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/4662/viewspace-3131945/ ,如需转载,请注明出处,否则将追究法律责任。