AangularJS入门总结三

（参考的资料）

1. 数据绑定的原理：

　　　(1) $watch 队列：在DOM中每次绑定一些东西，就会往$watch队列中插入一条$watch；

　　　　　　　　　　　　每一个绑定到了DOM上的数据都会生成一个$watch；我们的模版加载完毕时，在linking阶段（Angular分为compile阶段和linking阶段），

　　　　　　　　　　　　Angular解释器会寻找每个directive，然后生成每个需要的$watch。

　　　(2) $digest 循环：当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发；

　　　　　　　　　　　这个循环是由两个更小的循环组合起来的。一个处理evalAsync队列，另一个处理$watch队列。　

　　　　　　　　　　　处理$watch队列：循环$watch 队列，发现这个队列中的值有变化，就执行回调函数，执行相应的DOM操作；　　

　　　　　　　　　　　　　　　　　　　　如果有至少一个更新过，这个循环就会再次触发，直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。

　　　　　　　　　　　　　　　　　　　　如果循环超过10次的话，它将会抛出一个异常，防止无限循环。当$digest循环结束时，DOM相应地变化；　　

　　　　　　　　　　　　　　　　　　　　（ng-click不生成$watch（函数是不会变的））；　　

　　　(3) $apply : $apply决定什么事件进入 angular上下文环境；、

　　　　　　　　　　　　　当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入。

　　　　　　　　　　　　　当你点击带有ng-click的元素时，就会被封装到一个$apply调用。如果你有一个ng-model="foo"的输入框，然后你敲一个f，

　　　　　　　　　　　　　事件就会这样调用$apply("foo = 'f';")。

　　　　　　　　　　　　　Angular什么时候不会自动为我们调用$apply呢？Angular不会更新我绑定的东西的解决方法：scope.$apply(function() {});

　　　　　　　　　　　　　$apply是我们的$scope（或者是direcvie里的link函数中的scope）的一个函数，调用它会强制一次$digest循环

　　　　　　　　　　　　　（除非当前正在执行循环，这种情况下会抛出一个异常）。

2. 自定义指令：angular通过指令的方式实现了HTML的扩展；

　　　　　　　指令在框架中的执行流程：

　　　　　　　　　　--浏览器得到 HTML 字符串内容，解析得到 DOM 结构。

　　　　　　　　　　--Angular引入，把 DOM 结构扔给 $compile 函数处理：

　　　　　　　　　　　　　---找出 DOM 结构中有变量的占位符；

　　　　　　　　　　　　　---匹配找出 DOM 中包含的所有指令引用；

　　　　　　　　　　　　　---把指令关联到 DOM；

　　　　　　　　　　　　　---关联到 DOM 的多个指令按权重排列；

　　　　　　　　　　　　　---执行指令中的 compile 函数（改变 DOM 结构，返回 link 函数）；

　　　　　　　　　　　　　---得到的所有 link 函数组成一个列表作为 $compile 函数的返回。

　　　　　　　　　　--执行 link 函数（连接模板的 scope）。

　　　　　　　　　　　　　---注意区别一下$compile和compile，前者是Angular内部的编译服务，后者是指令中的编译函数，两者发挥作用的范围不同。

　　　　　　　　　　　　　　 compile 和 link 函数息息相关又有所区别；

　　　　　　　　　　　　　　Angular编译的工作是解析指令、绑定监听器、替换模板中的变量等。工作方式很像高级语言编辑中的递归、堆栈过程，所以起名为编译；

　　　　　　　　指令的使用方式及命名方法：

　　　　　　　　　　　　指令的几种使用方式如下：（常用的就是作为标签和属性）

　　　　　　　　　　　　　　作为标签：<my-dir></my-dir>

　　　　　　　　　　　　　　作为属性：<span my-dir="exp"></span>

作为注释：

　　　　　　　　　　　　　　作为类名：<span class="my-dir: exp;"></span>

　　　　　　　　　　　　　　指令命名时用驼峰规则，使用时用-分割各单词。如：定义myDirective，使用时像这样：<my-directive>；

　　　　　　　　自定义指令的配置参数：

　　　　　　　　　　　　　　下面是定义一个标准指令的示例，可配置的参数包括以下部分：

　　　　　　　　　　　　　　　　myModule.directive('namespaceDirectiveName', function factory(injectables) {

　　　　　　　　　　　　　　　　 var directiveDefinitionObject = {

　　　　　　　　　　　　　　　　　　 restrict: string,　　　　　　 //指令的使用方式，包括标签，属性，类，注释

　　　　　　　　　　　　　　　　　　 priority: number,　　　　　　//指令执行的优先级

　　　　　　　　　　　　　　　　　　template: string,　　　　　　//指令使用的模板，用HTML字符串的形式表示

　　　　　　　　　　　　　　　　　　templateUrl: string,　　　　 //从指定的url地址加载模板

　　　　　　　　　　　　　　　　　　 replace: bool,　　　　　　 //是否用模板替换当前元素，若为false，则append在当前元素上

　　　　　　　　　　　　　　　　　　 transclude: bool,　　　　　 //是否将当前元素的内容转移到模板中

　　　　　　　　　　　　　　　　　　 scope: bool or object,　　 //指定指令的作用域

　　　　　　　　　　　　　　　　　　　controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},　　//定义与其他指令进行交互的接口函数

　　　　　　　　　　　　　　　　　　require: string,　　　　　　//指定需要依赖的其他指令

　　　　　　　　　　　　　　　　　　　　　　 link: function postLink(scope, iElement, iAttrs) {...},　　　　　　　　　　　　　　　　//以编程的方式操作DOM，包括添加监听器等

　　　　　　　　　　　　　　　　　　 compile: function compile(tElement, tAttrs, transclude){

　　　　　　　　　　　　　　　　　　　　　　　　 return: {

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 pre: function preLink(scope, iElement, iAttrs, controller){...},

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 post: function postLink(scope, iElement, iAttrs, controller){...}

　　　　　　　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　　　　　　　 }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//编程的方式修改DOM模板的副本，可以返回链接函数；

　　　　　　　　　　　　　　　　 };

　　　　　　　　　　　　　　　　 return directiveDefinitionObject;

　　　　　　　　　　　　　　　　　});

　　　　　　　　　　　　　　　　（根据自己的需要来选择使用哪些参数。priority和compile用的比较少，template和templateUrl又是互斥的，两者选其一即可）

　　　　　　　　　　　　　　　　　　　　指令的表现配置参数：restrict、template、templateUrl、replace、transclude；

　　　　　　　　　　　　　　　　　　　　指令的行为配置参数：compile 和 link；

　　　　　　　　　　　　　　　　　　　　指令划分作用域配置参数：scope；

　　　　　　　　　　　　　　　　　　　　指令间通信配置参数：controller和require。

　　　　　　　　　　　　指令的表现参数restrict、template、templateUrl、replace、transclude：

　　　　　　　　　　　　　　transclude：指定了transclude为true，并在模板标签上面使用了ng-transclude指令，用来告诉指令把内容转移到的位置；

　　　　　　　　　　　　　　restirct用来指定指令的使用类型，其取值及含义：

取值	含义	使用示例
E	标签	<my-menu title=Products></my-menu>
A	属性	<div my-menu=Products></div>
C	类	<div class="my-menu":Products></div>
M	注释	<!--directive:my-menu Products-->

　　　　　　　　　　　　　指令的行为参数：compile 和 link：

　　　　　　　　　　　　　　　　如果指令只进行DOM的修改，不进行数据绑定，那么配置在compile函数中，如果指令要进行数据绑定，那么配置在link函数中。

　　　　　　　　　　　　　　　　compile拿到的是编译前的，是从template里拿过来的，link拿到的是编译后的，已经与作用域建立了关联，这也正是link中可以进行数据绑定的原因。

　　　　　　　　　　　　指令的划分作用域参数：scope：

　　　　　　　　　　　　　　　　作用是描述指令与父作用域的关系；

　　　　　　　　　　　　　　　　指令与父作用域（就是控制器所管辖的范围）的关系可以有如下取值：

取值	说明
false	默认值。使用父作用域作为自己的作用域
true	新建一个作用域，该作用域继承父作用域
javascript对象	与父作用域隔离，并指定可以从父作用域访问的变量

　　　　　　　　　　　　　　　　绑定策略，它的取值按照如下的规则:

符号	说明	举例
@	传递一个字符串作为属性的值	str : ‘@string’
=	使用父作用域中的一个属性，绑定数据到指令的属性中	name : ‘=username’
&	使用父作用域中的一个函数,可以在指令中调用	getName : ‘&getUserName’

　　　　　　　　　　　　　　　　　　自定义指令中的 scope；用符号前缀来说明如何为指令传值；

　　　　　　　　　　　　　　　　　　 scope : {
　　　　　　　　　　　　　　name : ‘=username’
　　　　　　　　　　　　 },

　　　　　　　　　　　　指令间通信参数：controller 和 require：

　　　　　　　　　　　　　　　　　　当想做的组件稍微复杂一点，就不是一个指令可以搞定的了，就需要指令与指令的协作才可以完成，这就需要进行指令间通信；

　　　　　　　　　　　　　　　　　　controller 数用于定义指令对外提供的接口，它的写法如下：

　　　　　　　　　　　　　　　　　　　　　　　　controller: function controllerConstructor($scope, $element, $attrs, $transclude){}

　　　　　　　　　　　　　　　　　　require：它的值是一个字符串，就是所依赖的指令的名字，这样框架就能按照你指定的名字来从对应的指令上面寻找定义好的controller了。

　　　　　　　　　　　　　　　　　　　　　　　不过还稍稍有点特别的地方，为了让框架寻找的时候更轻松些，我们可以在名字前面加个小小的前缀：^，表示从父节点上寻找，

　　　　　　　　　　　　　　　　　　　　　　　使用起来像这样：require : ‘^directiveName’，如果不加，$compile服务只会从节点本身寻找。

　　　　　　　　　　　　　　　　　　　　　　　另外还可以使用前缀：？，此前缀将告诉$compile服务，如果所需的controller没找到，不要抛出异常。

3. 性能：

　　　　缺点：当处理包含复杂数据结构的大型列表时，其运行速度就会非常慢；

　　　　　　两个主要性能问题：一个与“ng-repeat ”指令有关，另一个与过滤器有关；

　　　　　　最好的办法是限制所显示列表的大小。可通过分页、添加无限滚动条来实现；

　　　　　　分页，我们可以使用AngularJS的“limitTo”过滤器（AngularJS1.1.4版本以后）和“startFrom”过滤器。可以通过限制显示列表的大小来减少渲染时间。这是减少渲染时间最高效的方法。

巴特西

AangularJS入门总结三

最新文章

热门文章