zoukankan      html  css  js  c++  java
  • 数据绑定进一步讲解 --- 及数据绑定的最佳实践

    AngualrJS中会使用$digest()循环来检测脏值:

    当AngularJS认为某个值可能发生变化时,它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行之后发生了变化,则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。

    这个过程被称作脏检查(dirty checking)。脏检查是检查数据模型变化的有效手段。当有潜在的变化存在时,AngularJS会在事件循环时执行脏检查来保证数据的一致性。

    简单的数据绑定

    审阅一下上一篇写的代码,用到了ng-model指令将内部数据模型对象'($scope)'中的name属性绑定到了文本输入字段上。
    这意味着无论在文本输入字段中输入了什么,都会同步到数据模型中。

    数据模型对象(model object)是指$scope对象。
    $scope对象是一个简单的JavaScript对象,其中的属性可以被视图访问,也可以同控制器进行交互。如果
    不理解这个概念也没有关系,后面的例子将会对这个概念进行详细说明。
    双向数据绑定(bi-directional)意味着如果视图改变了某个值,数据模型会通过
    脏检查观察到这个变化,而如果数据模型改变了某个值,视图也会依据变化重新渲染。

    HTML

    <html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="lib/angular.min.js"></script>
        <script src="lib/clock.js"></script>
    </head>
    <body>
        <div ng-controller="ClockController">
            <h1>hello{{ clock }}!</h1>
        </div>
    </body>
    </html>
    

    JS

    var clock = angular.module('myApp', []);
    
    clock.controller('ClockController', function($scope, $timeout) {
        var updateClock = function() {
            $scope.clock = new Date();
            $timeout(function() {
                updateClock();
            }, 1000);
        };
    
        updateClock();
    });
    

    数据绑定的最佳实践

    如果吧这个最佳实践应用到上面的时钟的例子中,需要把视图中的代码改成下面的这样:
    HTML

    <div ng-controller="ClockController">
       <h1>hello{{ clock.now }}!</h1>
    </div>
    

    JS

    var clock = angular.module('myApp', []);
    
    clock.controller('ClockController', function($scope, $timeout) {
        $scope.clock = {
            now: new Date()
        };
    
        var updateClock = function() {
            $scope.clock.now = new Date();
        };
    
        setInterval(function() {
            $scope.$apply(updateClock);
        }, 1000);
    
        updateClock();
    });
    
    通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
  • 相关阅读:
    数据库的架构和优化
    描述一个高性能高可靠的网站架构——如何设计一个秒杀系统
    PHP手册-函数参考-加密扩展
    系统性能指标总结
    PHP实现负载均衡的加权轮询
    PHP生成二维码
    高性能网站架构
    PHP实现Redis的数据结构和LFU/LRU
    缓存的设计及PHP实现LFU
    网络开发库从libuv说到epoll
  • 原文地址:https://www.cnblogs.com/mcat/p/4368595.html
Copyright © 2011-2022 走看看