Build Your Own Angularjs 读书笔记

项目配置[编辑]

1. npm package.json
2. Lo-Dash,jQuery：不依赖，如果有就代理使用
   1. _.template("Hello,<%= name%>!")({name: to}); //var _ = require('lodash');
   2. _.forEach
   3. _.bind //等价于ES5 Function.prototype.bind
   4. _.isArray _.isObject
   5. _.forOwn //遍历object的属性
3. 用jasmine写测试（describe-it-expect）

作用域[

看到$，就会想到PHP、Perl这些脚本语言，程序员手里敲着代码眼里看的是美元符号:-D

digest cycle与脏检查：$watch,$digest,$apply

1. watch表达式（内部编译为一个函数，这个看起来有点意思！）
   1. scope.$watch( watchFn: scope -> value,listener: (old,new,scope) -> void) //var watchFn = jasmine.createSpy();
      1. 将old value缓存到watcher对象上？这边有一个小问题：watcher.last要不要初始化为当前value呢？
         1. => 初始化为function initWatchVal() {}，用于表示app级别“不存在的”对象取值，绝妙～ 但这里js变量的类型前后是不一样的（也许不需要这么严格要求？）
         2. 简单实现不能捕获listener对scope的每次修改！（除非像Vue那样重载js object的setter函数）--> 一个digest周期内listener改变了属性值，则补充再迭代，可能多次
            1. 防止无限迭代：TTL
      2. $digest迭代watcher，而不是scope的所有属性（不过假如多个watcher监视相同的属性变化？）跟react的virtual dom diff原则不同
2. $digest：迭代执行一遍所有的$watch
3. $$前缀代表angular内部的私有变量
4. 基于value的脏检查（而不是仅仅基于引用）：数组和对象的元素diff算法
   1. 为了提供value的old、new，需要deep copying...
   2. NaN!= NaN，特殊处理
5. $eval
6. $apply：集成外部代码到digest cycle
7. $evalAsync（推迟，但仍然在当前digest cycle）
   1. vs $timeout（后者是setTimeout(,0)的封装）
   2. []用作defer队列：var asyncTask = this.$$asyncQueue.shift();
8. scope phases（见鬼，从这个地方有点不太好懂了：不都是在一个digest cycle里面吗？）
   1. => 为了确保从外部调用$evalAsync后，会调度一次digest执行（setTimeout）
9. $applyAsync（原始动机：处理HTTP response，但不触发完整的digest）
   1. var self = this; //当注册callback时，引用当前的this，以防止JS的动态作用域特性引用错误的this（实际上相当于一个独立的函数，而非对象方法了）
   2. async callbacks的batch执行：用一个新的lambda将queue里的所有callback对象包起来一起执行
   3. 惯用法：
      1. self.$ $applyAsyncId = setTimeout(function(){... self.$ $applyAsyncId = null;}，0) //跟踪setTimeout是否已经被浏览器调度执行
10. $$postDigest（略）
11. 异常处理
12. 删除watch
    1. var destroyWatch = scope.$watch(...)
    2. destroyWatch(); //调用数组的splice(index,n)方法删除元素
13. $watchGroup

作用域继承

1. $rootScope
2. $new：创建新的子scope
3. child直接看得到parent的属性，但同名的情况下发生JS Prototype链上的shadowing（看到这里，会想起SICP里实现一个解释器的内容）
4. digest过程现在从rootScope触发，递归执行; $$children
   1. 注意：Angular.js本身用“prev/next-Sibling、$head/tail-Child”来组织一棵scope层次树
5. scope隔离：仍然挂在scope树上，但是断开到parent的原型链（这样属性查找只在当前child中？）
   1. directive scope linking：有选择地引用parent的属性
   2. 隔离情况下仍然想让scope共用root的属性，则在$new创建时执行一个引用copy操作...
6. 替换parent（略）
   1. 这里的隐含约束是：当scope层次树的结构动态修改后，相应的watch、apply机制仍然能够properly起作用，相当于代码灵活性的要求
7. $destroy：从$parent断开引用

用于集合对象（array、object）的高效脏检查

1. $watchCollection：每次！$areEqual的时候counter++ ？
2. 注意，之前oldValue是deep copy出来的，所以这里的核心算法就是针对array或object的diff操作而已...（但是不如React的virtual dom那么激进）
3. array-like（typeof .length === "number"）
   1. arguments
   2. DOM NodeList
   3. ？String不是Object
4. Trick：如何检测包含了length作为key的object（与array-like区分）
5. Function对象的.length属性保存了形参的个数？//作用：需不需要记住oldValue传给listenerFn

（Scope Events）事件系统：$on,$emit,$broadcast

1. Pub：emitting：当前的及其祖先scopes得到通知；往下则为广播（注意：跟DOM事件无关）
2. $on：注册事件listener
3. $emit,$broadcast
   1. var listeners = this.$$listeners[eventName] || [];
   2. var additionalArgs = _.rest(arguments);
   3. var listenerArgs = [event].concat(additionalArgs); listener.apply(null,listenerArgs);
4. 仿照DOM事件的target与currentTarget属性，有targetScope与currentScope（分别代表触发和处理事件的scope）
5. 实现event.stopPropagation()
6. 实现preventDefault //？这有意义吗？
7. this.$broadcast('$destroy'); //通知directives其所在scope已被移除

表达式与过滤器[

expr parser支持CSP（从编译模式切换到解释模式？）

常量表达式

1. “a+b" 编译为 function(scope){return scope.a+scope.b}
2. Lexer --> Parser { AST Builder --> Compiler }
3. AST Node: {type: AST.Literal,value: 42} //直接算出值
4. String类型
   1. escape：\r \n
   2. Unicode escape：\uXXXX
      1. return '\\u' + ('0000' + c.charCodeAt(0).toString(16)).slice(-4);
5. peek / consume
6. primary函数？parse value类型的子表达式？
7. var key = property.key.type === AST.Identifier? property.key.name: this.escape(property.key.value); //JSON key可能是标识符或字符串
8. 这里compiler不需要考虑生成临时变量（特别是嵌套作用域下的shadowing）的问题？watch表达式直接对着翻译？但是后面还有一个高级的|管道过滤操作符呢
   1. nextId()

Lookup与函数调用

1. this(=当前的scope)
2. var fn = parse('aKey.secondKey.thirdKey.fourthKey'); expect(fn({aKey: {}})).toBeUndefined();
   1. 这里有个错误，这里应该会抛TypeError异常，而不是返回undefined
   2. AST.MemberExpression：fourthKey属性名称在AST树的上一级？嗯，符合“先计算的在AST底层”的原则
3. locals
4. Computed Attribute Lookup（a["b"]）——这与a.b有什么区别？？
5. 方法*（a.m()也不代表m一定是个方法吧？m也有可能是个函数）
   1. call context(bind to this)
6. 赋值*
7. 安全的成员访问
   1. aFunction.constructor("return window;")()
   2. __proto__ //非标准已过世？
   3. __defineGetter__,__lookupGetter__,__defineSetter__,and __lookupSetter__ //非标准
   4. ensureSafeMemberName：屏蔽对这些不安全成员属性的访问，虽然是解决了问题，但总感觉不够灵活？与其抛出异常，不如来个静悄悄的失败？
8. 确保安全的对象（不要把window关联到Scope）：obj.window === obj
   1. DOM对象呢？
   2. 检查window不在赋值语句的右边，或函数的实参中
   3. Function（obj.constructor === obj）、Object
   4. 对函数对象，不允许call／apply（this rebind to other obj）
9. ？怎么把这些ensureSafeXxx函数传递进runtime？

操作符

1. Multiplicative Operators
   1. 优先级怎么处理？
2. Additive Operators
   1. 这里的parser代码实现是严格递归下降的，感觉无法处理“a+b+c-d”这种情况？
3. 关系比较（最低优先级？还有逻辑&& ||）
4. 三元运算符：test？t：f

过滤器

1. a | f | g 相当于g(f(a))
2. 附加的过滤器参数（生成一个partial函数？）
3. filter（实际上是个高阶函数）
   1. arr | filter:isOdd
   2. arr | filter:"!o"
   3. arr | filter:{name: "o"} //允许深度嵌套，模式匹配？？
      1. 'arr | filter:{user: {name: "Bob"}}'
      2. 'arr | filter:{$: "o"}' //任意属性位置
   4. 定制的比较函数：arr | filter:{$: "o"}:myComparator //？

表达式与watches

1. literal vs constant
   1. ast.constant 属性文法？
2. 一次表达式：
3. { {user.firstName}} { {user.lastName}}//final变量，单赋值
   1. one-time binding：{{::user.firstName}} {{::user.lastName}}
4. 输入跟踪（只有输入变量发生变化时才触发重新计算）
   1. inputsWatchDelegate：watch inputs中的每个变量？
   2. 遍历AST，决定表达式的inputs：即所有非常量的元素
   3. 注意不要分别watch逻辑表达式的左右两边，以防破坏|| &&的短路特性
5. ？this.state.computing = 'fn';
6. 有状态的过滤器
   1. ast.toWatch = stateless? argsToWatch: [ast];
7. 外部赋值
   1. var exprFn = parse('a.b'); var scope = {a: {b: 42}}; exprFn.assign(scope,43); //用于实现2-路绑定，有点像是ES6里的解构赋值
      1. 但假如watch编译后的函数返回值无法追踪到scope中的变量引用呢？
   2. fn.assign = function(scope,value,locals) { ... }
      1. AST.NGValueParameter？

模块与依赖注入[

模块与注入器

1. modules是局部变量，所以确保函数只定义一次？f=f||function(){...}
2. 不允许注册'hasOwnProperty'名称的模块
3. injector加载模块，通过“invoke queue”
   1. 备注：当整个webapp固化之后，防御性的代码是不是可以去掉了？因为angular库的使用者就是webapp的js代码
4. module.requires
5. DI: 期望injector自动找到模块依赖的参数并在构造时传递进来
   1. 显式指出：fn.$inject
   2. 绑定this：invoke：... return fn.apply(self,args);
   3. 给invoke提供额外的locals局部变量绑定
6. 数组风格的依赖标注
   1. annotate：fn.slice(0,fn.length - 1) 或 fn.$inspect
7. 依赖标注从形参（这是Angular 1.x最有意思的特性了，我当初看到简直就是大吃一惊啊！）
   1. 原理：(function(a,b) { }).toString() // => "function (a,b) { }" 靠！不过，为了取得形参的名字执行一个toString序列化有点太夸张了 -_-
   2. 去除注释：var STRIP_COMMENTS = /\/\*.*?\*\//g;
      1. 进一步改进：var STRIP_COMMENTS = /(\/\/.*$)|(\/\*.*?\*\/)/mg;
   3. 当JS代码被混淆压缩后，此机制会失效！ => 严格模式
8. 用DI实例化对象
   1. Type.$inject = ['a','b']; var instance = injector.instantiate(Type); //关键是取得a,b的实际取值！这里；
   2. var instance =Object.create(UnwrappedType.prototype); //ES 5.1
      1. invoke(Type,instance); //将当前scope绑定到this进行调用

Providers

1. 任何提供了$get函数的对象，其返回值作为依赖：
   1. 给$get提供DI参数：cache[key] = invoke(provider.$get,provider); //直接调用=>invoke()
2. 依赖的懒惰实例化（a的依赖b可以在a后面注册）
   1. cache拆成2个：var providerCache = {}; var instanceCache = {};
   2. providerCache[key + 'Provider'] = provider; //dirty trick
3. “everything in Angular is a singleton”
   1. var instance = instanceCache[name] = invoke(provider.$get);
4. 检测循环依赖
   1. 初始化DI之前，放置一个marker对象：if (instanceCache[name] === INSTANTIATING) { throw ... }
   2. 显示循环依赖的路径：var path = []; //使用一个name栈...
5. Provider Constructors
   1. Angular doesn't care.
   2. 真正需要做的是多做一个类型检查：if (_.isFunction(provider)) { provider = instantiate(provider); }
6. Two Injectors: The Provider Injector and The Instance Injector
   1. ？不能inject an instance to another provider’s constructor
   2. ？类似的，反之也不行：this.$get = function(aProvider) { return aProvider.$get(); }; X
   3. 不能通过injector.get获得provider的引用（recall：provider的存在只是为了调用$get获得其返回value）
7. 常量：总是push（unshift）到invoke队列到前面
   1. invokeLater：invokeQueue[arrayMethod || 'push']([method,arguments]);
   2. constant: invokeLater('constant','unshift'),//常量：push改成unshift

高级DI特性

1. Injecting The $injectors（以$injector提供）
   1. 最有用的是动态get方法：var aProvider = $injector.get('aProvider');
2. 注入$provide *
3. 配置块（在模块加载时执行任意‘配置函数’）
   1. $routeProvider.when('/someUrl',{

      templateUrl: '/my/view.html',

      controller: 'MyController'

      });

4. 运行块：injector构造时调用(module loader/injector --> module instance --> run blocks)
   1. module.provider('a',{$get: _.constant(42)});
   2. module.run(function(a) { ... })
   3. => moduleInstance._runBlocks.push(fn);
   4. 调用时机：需要等所有模块都加载完毕后执行（一次），trick：先收集到一个数组里，最后执行
5. 函数模块
   1. hashKey：从JS对象返回一个string key
      1. expect(hashKey(null)).toEqual('object:null'); //格式：type:valueStr,不基于value语义，2个引用value相同，但是hash key不同？
      2. value.$$hashKey = _.uniqueId();
   2. HashMap：key可以是任意JS对象（普通js object key只能是string）
6. Function Modules Redux
   1. var loadedModules = new HashMap(); //modules直接作为key？感觉更像是一个HashSet（用于判断指定module有没有被加载）
7. 工厂
   1. 可以注入实例依赖：
      1. module.factory('a',function() { return 1; });
      2. module.factory('b',function(a) { return a + 2; });
   2. factory: function(key,factoryFn) { this.provider(key,{$get: factoryFn}); } //工厂就是一个provider
   3. enforceReturnValue(factoryFn)：可以return null，但不能是undefined
8. Values
   1. values are not available to providers or config blocks（只用于instances）
   2. 实现：value: function(key,value) { this.factory(key,_.constant(value)); }
9. Services（构造器函数）
   1. module.service('aService',function MyService(theValue) {

      this.getValue = function() { return theValue; }; });

10. Decorators
    1. module.decorator('aValue',function($delegate) { $delegate.decoratedKey = 43; }); //这里aValue是一个工厂，$delegate指代它返回的对象
       1. 多个装饰器：顺序（从内往外依次封装）应用：
    2. var instance = instanceInjector.invoke(original$get,provider);
    3. //对instance进行修改...
    4. instanceInjector.invoke(decoratorFn,null,{$delegate: instance});
11. 集成Scopes、表达式、过滤器、&注入控制器
    1. ？this.register('filter',require('./filter_filter'));
    2. ？当注册一个my过滤器时，它还以myFilter的名字作为一个正常工厂提供
    3. setupModuleLoader(window); //DI injector在这里配置好？
    4. var ngModule = angular.module('ng',[]);
       1. ngModule.provider('$filter',require('./filter')); //ng基础服务
       2. ngModule.provider('$parse',require('./parse'));
       3. ngModule.provider('$rootScope',require('./scope'));
    5. $rootScopeProvider: 配置$rootScope TTL

辅助函数[

Promises

1. $q服务，Q库的裁剪版？Promises/A+兼容（jQuery 3.0+支持）
   1. Promises/A+规范是不是先多个then注册successCallback，最后来一个catch注册errorCallback？而ES6 Promise则在一个then里面同时注册2个callback？？
2. 与digest loop深度集成，可以使用$evalAsync，而不是setTimeout，来触发异步回调
3. ngModule.provider('$q',require('./q'));
4. 创建Deferreds
   1. Deferred是数据的生产者，而Promise就是消费者
   2. $q：function defer() { return new Deferred(); }
   3. d：this.promise = new Promise();
5. 解析：
   1. promise.then(promiseSpy);
   2. deferred.resolve('ok'); //当调用resolve时，Promise并不立即触发（只是push到一个异步回调队列里，对于ES6 Promise来说这套机制是原生的）
      1. 注意，Promise也允许先resolve再then注册异步回调
   3. 触发digest：$rootScope.$apply();
6. 防止多次解析
   1. 实现：维护内部的状态机！
7. 确保回调被触发
   1. 在then注册异步回调的时候检查一下状态机特殊处理即可
8. 注册多个异步回调（then链，这里实际上针对的是同一个Promise对象！）
9. 否决Deferreds及捕获‘否决’
   1. resolve / reject
   2. Promise.prototype.catch = function(onRejected) { return this.then(null,onRejected); }
10. finally: both then & catch
11. Promise链
    1. 每个then调用返回一个新的Promise（或句话说，创建了另外一个新的状态机）
    2. value在Promise链中是传递的：one.then(two).catch(three) 这里one、two的异常都会被three捕获
    3. catch的返回值将会当作下一个resolve（！）
12. 异常处理
    1. 异常不是reject到当前Promise的catch，而是传递到下一个Promise
13. Promise回调返回Promise的情况
    1. => 将其与下一个Promise连接！
    2. resolve中需要对value特殊检查：if (value && _.isFunction(value.then)) {

       value.then( _.bind(this.resolve,this),_.bind(this.reject,this));

14. finally的返回值需要被忽略（不在链中进一步传播）
    1. finally中返回一个Promise的情况：需要同步等待此Promise被resolve！**（这里有点不大好懂，需要找时间看第2遍）
15. 进度通知
    1. defer.promise.then(null,progressNotifyCb);
    2. defer.notify('working...'); //哦，每个then都会返回新的Deferred对象及其内部Promise
       1. 但这里调用notify的线索条件来自哪里呢？
    3. 注意，defer.resolve之后，notify不起作用
16. 立即否决：$q.reject，创建一个状态已经被否决的Promise
17. 立即解析：$q.when，创建一个状态已经被解析的Promise
18. Promise集合：$q.all，创建一个新的汇聚Promise，当输入的所有Promise都已经被完成后，解析自己
    1. var promise = $q.all([$q.when(1),$q.when(2),$q.when(3)]);
    2. 注意，$q.all等待的是所有Promise都成功resolve，若有一个被reject，则立即返回
    3. 备注：既然有$q.all，是不是也可以有$q.any/race？
19. ES6风格的Promises
    1. 没有Deferreds这样的概念；同时，不是注册2个callback分别对应resolve／reject，而是一个callback：function(value,error) {...}
    2. 如何用Q来模仿ES6 Promise API：略
20. 无$digest集成：$$q
    1. var d = $$q.defer(); //后面一样，这应该是用setTimeout异步调度的了

$http

1. vs $httpBackend
2. SinonJS：模仿一个虚假的XMLHttpRequest请求 //注意本书代码的风格是TDD的
   1. xhr = sinon.useFakeXMLHttpRequest(); ==> requests[0].respond(200,{},'Hello');
3. 302（服务器端重定向）被浏览器内部直接处理，不会到达JS代码
4. 默认请求参数配置
5. 请求头部
6. 响应头部
7. 允许CORS：withCredentials=true
8. 请求变换：transformRequest:[f1,f2,...] //data
   1. 设置进默认配置：$http.defaults.transformRequest = ...
9. 响应变换
   1. transformResponse: function(data,headers) { ... } //根据Content-Type？有必要这么做吗？
10. JSON序列化与解析
    1. 二进制数据：var bb = new BlobBuilder(); bb.append(...); var data = bb.getBlob('text/plain');
    2. 跳过FormData
    3. if ((contentType && contentType.indexOf('application/json') === 0) || isJsonLike(data)) { return JSON.parse(data); }
       1. isJsonLike: 字符串以{或[开始？
11. URL参数
    1. url: "...",params: { a:1,... } //车机webapp代码目前是硬拼字符串
    2. name有多个value的情况：a=1&a=2&a=...
    3. 定制的参数序列化：paramSerializer: serializeParams
       1. $httpParamSerializerJQLike：a: {b: {c: 42}} 被序列化为 a[b][c]=42（方括号被进一步url编码）
12. Shorthand方法
13. Interceptors
    1. var interceptors = _.map(interceptorFactories,function(fn) { return fn(); }); //又是工厂模式 -_-
       1. refine: return $injector.invoke(fn);
    2. Interceptors make heavy use of Promises. (靠！)
    3. serverRequest(config)：return sendReq(config,reqData).then(transformResponse,transformResponse);
       1. 现在需要$http()之后调用$rootScope.$apply()
    4. Interceptors are objects that have one or more of 4 keys: request,requestError,response,and responseError.
       1. request返回一个修改过的request，也可以返回一个Promise，这意味着它比transform机制强大的多
    5. request请求拦截器核心代码如下：//主要是修改config？
       1. var promise = $q.when(config); _.forEach(interceptors,function(interceptor) {

          promise = promise.then(interceptor.request,interceptor.requestError);

       2. });
       3. return promise.then(serverRequest);
       4. _.forEachRight(interceptors,function(interceptor) {

          promise = promise.then(interceptor.response,interceptor.responseError);

14. Promise扩展
    1. $http.get('http://teropa.info').success/error(...)
15. 请求超时
    1. timeout之后，request.aborted=true; //xhr.abort();
    2. 在正常的xhr.onload/onerror回调里，clearTimeout(timeoutId);
    3. 注意！angular 1.x实现这里有个缺陷：一旦超时abort之后，无法用方便的方法来执行一个回调通知，必须主动去检查aborted状态
16. 挂起的请求
    1. $http.pendingRequests: 请求已发送，但响应还未接受到
17. 集成$http与1.3 $applyAsync
    1. 优化：使得原先的多个$apply发生在一个digest中执行
    2. 启用：$httpProvider.useApplyAsync(true);
    3. 实现：if (useApplyAsync) { $rootScope.$applyAsync(resolvePromise); }

指令[

DOM编译与基本指令

1. "DOM编译"？为什么不叫“DOM转换”
2. directive: invokeLater('$compileProvider','directive'),//=> $provide.factory(name + 'Directive',directiveFactory);
3. $compile
   1. 指令应用：<my-directive> ... </my-directive>
   2. 注意，Angularjs不依赖jQuery实现低级DOM操纵，它有一个自己的实现：jqLite //DOM esoterica is not the focus of this book
4. 对DOM元素的属性应用指令
5. 应用指令到class
6. 应用指令到注释（囧）
7. 显示指出匹配限制：ECMA
8. 优先级
9. 中止编译
   1. terminal:true ==> 如 < div ng-if="condition"> ... </div>，用于对child节点是否继续compile的控制
10. 跨越多个节点应用指令
    1. 限制：需要multiElement flag，只对属性指令起作用
    2. groupScan：node = node.nextSibling; //开始结束属性所在节点假设在同一层上？但是要考虑相同属性存在嵌套包含的情况

指令属性

1. ng-attr- （类似于data-）
2. 设置属性：attrs.$set(k,v)
   1. var attrs = new Attributes($(node)); ...
3. 去规范化属性名称
   1. attrs.$set('someAttribute',43); ==> element.attr('some-attribute')
4. 持续观察属性
   1. Attributes.prototype.$observe = function(key,fn) {

      this.$$observers = this.$$observers || Object.create(null); //经常看到这种 a = a || b; 的写法（避免a被重复初始化）

   2. 备注：在Angular DI的编码风格下，JS对象的底层内存管理有什么差别吗？
5. while ((match = /([\d\w\-_]+)(?:\:([^;]+))?;?/.exec(className))) { className = className.substr(match.index + match[0].length); }
6. Adding Comment Directives As Attributes *
7. attrs.$addClass/$removeClass/$updateClass

指令链接与作用域

1. Linkingis the process of combining the compiled DOM tree with scope objects.
2. var linkFn = $compile(el); //返回一个函数对象的写法其实算很高级了 -_-
   1. linkFn将一个scope对象关联到DOM节点子树：$compileNodes.data('$scope',scope); //调试信息，产品build并不需要？
3. Directive Link Functions（DLF，每个指令有它自己的link函数？）
   1. wait，这里的指令可以理解为虚拟机里的字节码，前面的DOM编译过程实际上为此指令也生成了一个函数...?
   2. 而link时，则指令函数进一步看到其DOM子树关联的scope（分别对应view和model？？）
      1. compile返回link函数，compileNodes则返回‘组合的link函数’（所谓的link函数指的是将Nodes加入live document的过程吗？）
4. 普通DLF
   1. compile什么也不做，把工作推迟到link内执行？（真的很绝妙，虽然是源代码级别的转换，但是体现了JIT编译器的思想...）
5. linking子节点
   1. 最底层的DOM节点上的指令首选链接：childLinkFn = compileNodes(node.childNodes); //就是个递归
6. Pre- And Post-Linking
   1. child nodes被link之前还是之后：link: { pre:,post: function(scope,element,attrs){...}} //～DOM事件的捕获／冒泡
   2. postlink函数应该以反向优先级顺序调用
   3. 备注：什么样的情况下需要更细致的pre-／post- link的划分呢？
7. 保持linking节点的稳定性
   1. 即child nodes先用一个var stableNodeList = [];存起来...
8. 跨越多个nodes的指令linking
   1. groupElementsLinkFnWrapper: 这种情况实际上使得函数的参数不是稳定的一种类型，而可能变成是t或者[t]两种类型
9. linking与作用域继承
   1. 更common的情况是指令创建它们自己的scope...(a inherited scope？这似乎指的是直接引用$parent的scope？)
      1. => scope = scope.$new(); //创建一个新的scope，但从$parent继承
   2. element将得到一个ng-scope class
10. 隔离的scopes（不继承的）
    1. 使得指令更模块化（但这意味着外部依赖都需要通过函数传参的方式传递？）
    2. 隔离scope上的scope不会传递给同一／child element上的其他指令
    3. App开发者常见的错误：Multiple directives asking for new/inherited scope（有意思！）
    4. ng-isolate-scope class及jQuery .$isolateScope
11. 隔离的属性绑定
    1. ‘@’
       1. 可以指定不同的名字（映射）：scope: { aScopeAttr: '@anAttr' },...
12. 双向数据绑定（React好像是单向传递？）
    1. ‘=’
    2. 子scope的属性改变自动更新到parent scope，在link后起作用
       1. case '=': var parentGet = $parse(attrs[attrName]); isolateScope[scopeName] = parentGet(scope);

          scope.$watch(parentGet,function(newValue) { isolateScope[scopeName] = newValue; })

    3. var el = $('< div my-directive my-attr="parentAttr"></div>'); //对myAttr的赋值将更新到parent scope的parentAttr属性上去
    4. 一个digest中父子属性同时改变时，父修改优先
       1. 子scope注册自己的watch函数之前，先记下父属性的值，然后子watch实际调用时检查是不是发生过改变（但是无法处理ABA问题？）
       2. 备注：数据双向绑定，我还以为是指MV* view<-->model之间的双向绑定呢
    5. =* 处理my-attr="parentFn()"收到一个集合对象的情况？$watchCollection
    6. =？如果DOM属性不存在，则不创建watcher
13. 表达式绑定
    1. &
    2. 绑定行为，而不是数据（？）如ngClick
    3. expression在parent scope的context中被调用，而不是当前的isolate scope，原因很简单：表达式中的函数是由当前的指令使用者定义的
    4. case '&': var parentExpr = $parse(attrs[attrName]);

       isolateScope[scopeName] = function() { return parentExpr(scope); };

    5. 允许传参
       1. 例：< div my-expr="parentFunction(a,b)"></div>
       2. 使用命名参数：scope.myExpr({a: 1,b: 2}); //Angular中的参数使用$前缀，如$event
       3. 实现：引入locals参数（<-- recall back!)

控制器

1. $controller服务及其provider
2. var $controller = injector.get('$controller'); //加载ng的内建控制器模块
3. var controller = $controller(MyController,{aDep: 42}); //初始化特定控制器的实例（function MyController(aDep) {...}）
4. 注册
   1. $controllerProvider上的register方法并不那么常见，通常使用module上的:

      module.controller('MyController',function MyController() { });

5. 全局的控制器查找（不推荐，略）
6. 指令控制器
   1. 指令增加一个controller属性，引用控制器的构造函数
      1. if (controllerName === '@') controllerName = attrs[directive.name];
      2. $controller(controllerName);
   2. locals
      1. function MyController($element,$scope,$attrs) {...} //注意！参数是DI注入的，所以其声明顺序无关紧要
   3. 你可以在控制器函数里做任何指令的link函数可以做到的事情
      1. 优点：你不需要实例化指令，就可以对控制器进行单元测试...
7. 关联到scope *
   1. 在指令上指定一个controllerAs属性（app开发者用不到，compiler内部使用）
8. Controllers on Isolate Scope Directives
   1. 当指令has isolate scope时，$scope指的是当前isolate scope，而不是surrounding scope（parent）
   2. bindToController
      1. bindings将从$scope转移到controller上

         ... => This means that we need to have the controller object before we actually call the controller constructor. (JS里是可能的)

      2. $controller的第3个参数：later，将使得创建一个“半构造的”控制器
         1. 当调用时，调用真正的控制器构造函数
         2. 有一个instance属性指向控制器对象
      3. ... instance = Object.create(ctrlConstructor.prototype);
   3. 嗯... 同名但使用时类型会改变的变量，可以理解为2个类型变量的一个union组合变量
9. Requiring Controllers
   1. 当directive.require指定对另一个指令的依赖时，将对应到link函数的第4个参数，并可从中得到依赖指令的controller（其实，对JS来说，不存在私有变量）
10. Requiring Multiple Controllers：略
11. Self-Requiring Directives：当一个指令定义了自己的controller，而不是依赖于其他指令的
12. Requiring Controllers in Multi-Element Directives
13. Requiring Controllers from Parent Elements
    1. require: '^myDirective'
    2. ^^ 直接从parent寻找，而不是先从siblings开始
14. 可选的Requiring：找不到controller不报错
    1. require: '?noSuchDirective'
15. ngController指令
    1. < div ng-controller="TodoController as todoCtrl"> //注意，这里使用正则表达式来提取嵌入的变量名
16. 从scope中查找控制器的constructor：locals => global(window)

指令模板

1. replace: ture //此做法已废弃
2. template: '< div my-other-directive></div>' //使得可以组件化的风格编写webapp
3. 模板函数 //实际上，之前的模板字符串就被编译为一个函数
   1. 模板内的指令将接受到一个isolate scope **
4. 异步模板：templateUrl
   1. 如何暂停-重启编译？？
   2. 需要记住当前还没有应用的指令（保存状态）：applyDirectivesToNode
5. templateUrl也可以是一个函数：Template URL Functions（函数的返回值就是一个url？）
6. 一个元素不允许超过1个templateUrl（技术实现的限制？？）
7. var templateDirective = prevIoUsCompileContext.templateDirective; //这是什么意思呢？？-_-
8. 链接异步指令（这将构造异步回调链）
   1. trick 1: 返回一个特殊的“delayed node link function”（？这个时候模板内容可能还没有成功下载下来吧）
      1. afterTemplateNodeLinkFn = applyDirectivesToNode(directives,$compileNode,attrs,prevIoUsCompileContext);
      2. afterTemplateChildLinkFn = compileNodes($compileNode[0].childNodes);
   2. trick 2：让link在template接受到之前发生
      1. 引入var linkQueue = []; //所以，对于一般的异步回调链而言，需要检查2种情况？
9. Linking Directives that Were Compiled Earlier
   1. 1. var preLinkFns = prevIoUsCompileContext.preLinkFns || [];
      2. var postLinkFns = prevIoUsCompileContext.postLinkFns || []; ...
10. 保留isolate scope指令 *
11. 保留控制器指令 *

Directive Transclusion（k,感觉这部分内容是本书最复杂的...）

1. 依我的理解，Transclusion指的是指令模板在被嵌套包含的情况下，其binding上下文可以自动对接的意思？？？
2. ‘Transclusion’也可以被cloned：transclude: ’element’
3. 基本Transclusion（即没有scope binding的情况）
   1. transclude: true
   2. var $transcludedNodes = $compileNode.clone().contents(); //注意这里的clone调用
   3. link: function(scope,ctrl,transclude) { element.find('[in-template]').append(transclude()); } //
   4. ... At its core,the transclusion function is really a link function. //Yes,of course
4. Transclusion And Scopes
   1. 绑定的scope是定义时的（文法作用域），而不是使用时的（动态作用域）
   2. boundTranscludeFn = function() { return linkFn.nodeLinkFn.transclude(scope); } //到处是这种引用定义时上下文的闭包函数...
   3. 修改scope.$new()，指定parentE

      We should create a special transclusion scope that prototypally inherits from the surrounding scope,but whose $parent is set to the Scope of the transclusion directive.

      ！the scope-bound transclusion function（靠～ 这个地方真的有点复杂，它涉及到闭包下的对象生命周期控制问题...）

   4. ：boundTranscludeFn = function(containingScope) { var transcludedScope = scope.$new(false,containingScope); ...
5. Transclusion from Descendant Nodes
   1. ???
6. Transclusion in Controllers
7. The Clone Attach Function
   1. link时先clone，并可修改；与Transclusion不同（？）
8. Transclusion with Template URLs
9. Transclusion with Multi-Element Directives
10. ngTransclude指令
    1. 提供一个内容替换掉stub位置（实现非常简单：...）
11. Full Element Transclusion
    1. 元素本身也包含在内，而不仅仅是其children。～ ngIf,ngRepeat
    2. $compileNode.replaceWith($(document.createComment(' ' + directive.name + ': ' +attrs[directive.name] + ' ')));
    3. 每个指令的compile函数应该只调用一次：_.forEach => _.times($compileNodes.length,function(i) { ... }
12. Requiring Controllers from Transcluded Directives
    1. $linkNodes.data('$' + name + 'Controller',controller.instance); //部分构造

插值: { { expr }}

1. $interpolate服务（app开发人员很少使用，直接集成在$compile里面）
2. 字符串插值
   1. var interpolateFn = $interpolate('{ {a}} and { {b}}'); interpolateFn({a: 1,b: 2}); // => '1 and 2'
   2. parts.push(text ／ expFn ); //expFn = $parse(exp);
3. Value Stringification
   1. 转义：'\\{\\{expr\\}\\}' //注意这里\还有JS字符串转义
4. 文本节点插值
   1. addTextInterpolateDirective(directives,node.nodeValue); //直接从nodeValue构造插值函数
      1. link：scope.$watch(interpolateFn,function(newValue) { element[0].nodeValue = newValue; }); //就是一个watch
   2. element.parent().addClass('ng-binding'); //用于辅助Batarang工具
      1. also added：$binding数据属性
5. 属性插值
   1. addAttrInterpolateDirective：基本情况同Text Node的
   2. 与元素上其他指令交互：
      1. 其他指令可能通过Attributes.$observe在观察元素上的属性变化，当属性由于插值变化时，需要触发这些observers：

         不适用jQuery的attr()，改为attrs.$set(name,newValue);

      2. 指令希望收到的是插值完成后的属性值：

         增加一个marker标记：$rootScope.$evalAsync：if(!self.$$observers[key].$$inter)

         触发：link：attrs.$$observers[name].$$inter = true; ...

      3. 当前插值发生在first digest after linking,但实际上应该是before any digests

         优先级设为100（高）+ 挂载到pre-link时机

      4. isolate scope指令的问题

         case '@': ... destination[scopeName] = $interpolate(attrs[attrName])(scope); ...

      5. 指令应用时可能删除元素属性（或修改其值），此种情况下需要移除插值调用
   3. 需要防止用户在事件处理器里进行插值，如onclick：<button onclick="{ {myFunction()}}">
   4. Optimizing Interpolation Watches With A Watch Delegate
      1. 当给一个watch函数关联一个$$watchDelegate函数属性时，将使用它来检测变化，而不是基于watch函数的返回值

         function(scope,listener) { return scope.$watchGroup(expressionFns,function() { listener(compute(scope)); }); }

   5. Making Interpolation Symbols Configurable（默认是2个大括号对）
      1. $interpolateProvider.startSymbol('FOO').endSymbol('OOF');
      2. 需要动态构造RegExp：new RegExp(startSymbol.replace(/./g,escapeChar),'g');

自启

1. 实现ngClick
   1. Angularjs框架有点像是一个编译器+解释器框架，而编写定制指令则有点像一个编译器后端优化Pass...
   2. var button = $('<button ng-click="doSomething()"></button>');
   3. link: function(scope,element) { element.on('click',function(evt) { scope.$apply(attrs.ngClick); }); }
      1. 注入$event：scope.$eval(attrs.ngClick,{$event: evt});
   4. 注册：ngModule.directive('ngClick',require('./directives/ng_click'));
2. Bootstrapping Angular Applications Manually
   1. 手工自启
      1. injector.invoke(['$compile','$rootScope',function($compile，$rootScope) { $compile($element)($rootScope); }]); //DOM不仅仅被compile，而且被link到root scope
      2. 运行初始digest：=> $rootScope.$apply(function() { $compile($element)($rootScope); });
      3. 严格的DI？window.angular.bootstrap(element,['myModule'],{strictDi: true});
   2. 自动（via ng-app属性）
      1. $(document).ready(function() { ... });
      2. window.angular.bootstrap(foundAppElement,foundModule? [foundModule]: []);
   3. Building The Production Bundle
      1. ./node_modules/browserify/bin/cmd.js src/bootstrap.js > myangular.js //递归扫描所有的require，打包到一个js文件里面去
      2. npm install --save-dev uglifyjs
      3. package.json： "build:minified": "browserify src/bootstrap.js | uglifyjs -mc > myangular.min.js"
   4. Running An Example App
      1. app.js: angular.module('myExampleApp',[]); //?

原文链接：https://www.f2er.com/angularjs/147183.html