javascript - Angular 式的界面自动刷新具体是如何做到的?

 mobiledu2402852413 发布于 2022-11-25 00:29

除了 Angular, 还有 Reactive.js , 都是的 HTML 上实现的自动刷新功能, 简单说, 通过 DOM 操作对 DOM 进行更新, 相对 HTML 模板就节省了很多操作, 但具体是怎么做到的呢, 如何决定使用怎样的 DOM 操作呢?

2 个回答
  • 说白了就是事件监听。

    假设DOM为一个input元素,Model是一个对象person的属性name,那么从DOM到数据这个绑定我想你应该很清楚: 监听input元素相关事件(这里可能为onchange),捕捉到事件后更新数据模型,比如:

    input.onchange=function(){
      person.name=input.value;
    }
    

    反过来,对象的属性变化也是可以监听的,就可以实现从Model到DOM的更新:

    person.addListener("name_change",function(){
      input.value=person.name;
    });
    

    例子中的代码只是为了说明,实际情况中要比这个考虑更多内容。

    HTH

    2022-11-25 00:30 回答
  • 建议楼主看一下 AngularJS 官网的这两篇介绍:
    http://docs.angularjs.org/guide/compiler
    http://docs.angularjs.org/guide/concepts
    里面比较详细的介绍了它的执行过程

    简单来说就是(真实情况下不完全是这样):

    1. AngularJS 解析整个模板,把每一个 DOM 节点调用了 $scope 中的哪些值记录下来
    2. 把 $scope 中的值,填充到 DOM 中引用了它的地方去;并且在 $scope 每次更新后,重新进行填充。
    3. 当用户与页面交互,更新了模板中的值的时候,把更新后的值写入 $scope

    模板值更新后,把值同步到 $scope 里,这应该就是通过监听 DOM 事件来完成的,这个很好理解。
    比较奇妙的是,$scope 的值更新后,它是怎么获知并同步到模板中去的。
    我只是简单的 $scope.foo = 'bar' 而已,又没有调用什么函数通知它,它怎么就能知道我什么时候更新过 $scope 中的值呢?

    我之前也一直疑惑这个问题,今天干脆好好研究了一下。于是看到了 AngularJS 的作者对此进行的解释: http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933
    其实他用的是非常一个直白的方法:
    就是每隔一段时间检查一下,看 $scope 中的值与以前记录的一不一样,如果不一样就说明它更新了,然后就调用相关的回调函数处理这次更新(例如:把新的值写进模板)。
    循环往复,直到页面关闭。

    这个功能是在 Scope.$digest 中实现的,可以在 AngularJS 源代码中搜索
    "@name ng.$rootScope.Scope#$digest" 找到它的具体实现

    这种实现方式牵扯到一个问题:性能
    也正是因为这个原因,我之前一直认为这样一种实现方式不太可能。
    反复不断的把所有的对象都挨个对照一遍,性能能行吗?
    根据 AngularJS 作者的说法,没问题(实际使用中也没发现有什么问题,反倒比其他实现方式还快了呢)。
    关键在于下面两点(翻译自作者的原文):

    1. 在什么情况下,用户才会觉得反应“慢”。实际上,人类的反应速度最快也就是50毫秒,只要界面元素的反应速度在50毫秒以内,对用户来说那就都是一瞬间的事。
    2. 在一个展示出来的界面下,最多能出现多少数据节点?我们几乎不可能在一个页面中展示2000个以上的数据节点,因为超出这个数值的话,用户就已经处理不了了。

    所以真正的问题是:是不是能保证,即使在最慢的主流浏览器下,也能做到在50毫秒内完成2000次对象比较,也就是25微秒每次。这在今天,应该不成问题。

    回答完毕


    一不小心又写多了啊

    2022-11-25 00:30 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4