MV* 框架

[wangbinyq]

Backbone

• Events Backbone 实现的 sub/pub 机制, 所有 Backbone 对象包括 Backbone 本身都是一个 Events.
• Model 数据模型, 承担与后端进行数据交互的工作, 其关键是 Backbone.sync 方法.
• Collection 表示数据的集合, 提供对一组数据进行操作的方法.
• View 对应 DOM 元素, 绑定 DOM 事件(events), UI 逻辑
• Router/history Router: 绑定路由事件(routes), history: 全局变量, 底层 url 处理

[wangbinyq]

Preact

source code structure:

• dom/: That directly operation on real dom, include createNode, removeNode, setAttribute, setProperty, eventProxy.
• vdom/: The core implementation of preact. diff.js contains the most important part of preact, It include the diff algorithm. component.js handle component (lifecycle) and the associated dom.
• render-queue.js.

https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf

[wangbinyq]

Angular

Dependency Injection

Module

• create module
  • depended modules

    angular.module('AModule', ['AnotherModule'])

• get module
  • by name

    var module = angular.module('AModule')

• register a constant

  module.constant('aConstant', 42)

Injector

• create injector
  • depended modules
  • loaded modules

    var injector = createInjector(['AModule'])

• get a registered constant from depended modules

  var c = injector.get('aConstant')

• invoke a function with dependency injection

  
  module.constant('a', 2)
  module.constant('b', 40)

var fn = function (a , b) { return a + b } fn.$inject = ['a', 'b'] injector.invoke(fn) === 42

- invoke a function with local variables
- instantiating objects
```js
function Type (a, b) {
  this.result = a + b
}

Type.$inject = ['a', 'b']
injector.instantiate(Type).result === 42

Provider

• Providers are objects that know how to make dependencies.
• simplest provider just have a $get function.

  
  module.provider('a', {
  $get: function () { return 42 }
  })

injector.get('a') === 42

- provider can be injected?
```js
module.provider('b', {$get: function (a) { return a + 2} })
module.provider('a', {$get: function () { return 40 }}

injector.get('b') === 42

• everything created by dependency injection is singleton
• detect circular dependencies
• Provider can be a constructor which have a $get method