Commit 42 - 71：字符串解析；嵌套属性

Commit 42: fix _dump()

修复了_dump函数

Commit 43: no longer need $refresh

删除了_refreshBinding，因为可以自动生成依赖（commit41），所以不再需要手动更新了

Commit 44: clean up, trying to fix delegation after array reset

• 主要改动：数组清空时移除父节点上的委托事件

  我们在commit27中实现了事件委托。这个commit的工作就是移除监听器

Commit 45: fix delegation, and invoke updates during binding

Commit 46: separate binding into its own file

Commit 47: clean up binding

略

Commit 48: sd-if

增加了sd-if指令

Commit 49: sd-style

增加了sd-style

Commit 50: remove unused

Commit 51: remove redundant dependencies for computed properties

• 主要改动：只依赖于 自身没有依赖项的 属性

  /*
   *  The second pass of dependency extraction.
   *  Only include dependencies that don't have dependencies themselves.
   */
  

  比如以下代码

  // total依赖于todos
  scope.total = {get: function () {
      return scope.todos.length
  }}
  // completed依赖于total和remaining
  scope.completed = {get: function () {
      return scope.total - scope.remaining
  }}
  

  这种情况下，由于total只是completed和todos之间的桥梁，那么total的dependents数组中不应该有completed。因为真正影响completed的实际上是todos。最终：

  • todos.dependents：total和completed
  • total.dependents：无
  • completed.dependents：无

• 代码实现

  function injectDeps (binding) {
      binding.dependencies.forEach(function (dep) {
          // 被依赖的属性必须自身不依赖于别的属性
          if (!dep.dependencies || !dep.dependencies.length) {
              dep.dependents.push.apply(dep.dependents, binding.instances)
          }
      })
  }
  

Commit 52: html and attr directives

添加了html、attr指令

Commit 53: text parser started, features, optional oneway binding for input

Commit 54: text parser

Commit 55: finish text parser

• 主要改动：（这3个commit）完成文本解析，支持单向绑定

• 代码实现

  • 单向绑定：

    // 执行绑定时什么都不做，这样页面更改了也不会影响到seed中的data
    bind: function () {
      if (this.oneway) return
    }
    

  • 文本解析：

    • 就是能解析像"{{completed}}"这样的字符串

    • 曾经在处理节点的时候，我们不会特别处理文本节点。现在，我们需要识别{{}}符号。

      commit55

    • 代码：

      Seed.prototype._compileTextNode = function (node) {
          // 这个parse有兴趣自己看吧，就是通过正则处理一下
          var tokens = TextParser.parse(node)
          if (!tokens) return
          var seed = this
          tokens.forEach(function (token) {
              // 添加一个TextNode（这行本来有个bug，我改了一下）
              var el = document.createTextNode('')
              if (token.key) {
                  // 在TextNode上绑定text指令
                  var directive = Directive.parse(config.prefix + '-text', token.key)
                  if (directive) {
                      directive.el = el
                      seed._bind(directive)
                  }
              } else {
                  el.nodeValue = token
              }
              // 插入节点
              node.parentNode.insertBefore(el, node)
          })
          // 删除原节点
          node.parentNode.removeChild(node)
      }
      

Commit 56: jshint pass, readme & todo

Commit 57: chinese readme

Commit 58: minor updates

• 主要改动：添加了中文的readme

  （感觉好几个好像都有写过，顺便整理一波吧）

  （以及感觉速度太慢了，接下去应该会跳过很多小改动）

  Seed

  迷你MVVM框架

  • gzip后5kb大小
  • 基于DOM的动态模版，精确到TextNode的DOM操作
    • Commit 55: finish text parser
  • 管道过滤函数 (filter piping)
    • 这个没有仔细讲，但可以看看Commit 3: naive implementation的图
  • 自定义绑定函数 (directive) 和过滤函数 (filter)
    • 这个我没有单独讲，Commit 9: refactor的图中有提到
  • Model就是原生JS对象，不需要繁琐的get()或set()。操作对象自动更新DOM
    • 这个是最重要的功能，在整个开发过程中都在不断完善。基本原理可以看看Commit 3: naive implementation
  • 自动抓取需要计算的属性 (computed properties) 的依赖
    • Commit 41: auto parse dependency for computed properties!!!!!
  • 在数组重复的元素上添加listener的时候自动代理事件 (event delegation)
    • Commit 27: event delegation in sd-each
  • 基于Component，遵循CommonJS模块标准，也可独立使用
  • 移除时自动解绑所有listener

Commit 59-70

略

Commit 71: nested properties

• 主要改动：支持嵌套属性

  嵌套属性指的是以下这种：

  HTML：

  JS：

   a = {
        c: 1,
        b: {
            c: 1
        }
    }
  

• 思路：递归地设置b、c等嵌套属性的getter和setter

• 代码实现：

  // path代表有path层嵌套：'a.b.c'.split('.')
  Binding.prototype.defineAccessors = function (scope, path) {
      var self = this,
          key = path[0]
      if (path.length === 1) {
          // 这里意味着我们已经到了嵌套的最内层（a.b.c）
          // here we are! at the end of the path!
          // define the real value accessors.
          Object.defineProperty(scope, key, {
              get: function () {
                  if (observer.isObserving) {
                      observer.emit('get', self)
                  }
                  return self.isComputed
                      ? self.value.get()
                      : self.value
              },
              set: function (value) {
                  if (self.isComputed) {
                      // computed properties cannot be redefined
                      // no need to call binding.update() here,
                      // as dependency extraction has taken care of that
                      if (self.value.set) {
                          self.value.set(value)
                      }
                  } else if (value !== self.value) {
                      self.value = value
                      self.update(value)
                  }
              }
          })
      } else {
          // 这里还不是我们我们想要的属性
          // 每一层都需要设置getter、setter，否则里面的数据
          // we are not there yet!!!
          // create an intermediate subscope
          // which also has its own getter/setters
          var subScope = scope[key]
          if (!subScope) {
              subScope = {}
              Object.defineProperty(scope, key, {
                  get: function () {
                      return subScope
                  },
                  set: function (value) {
                      // when the subScope is given a new value,
                      // copy everything over to trigger the setters
                      for (var prop in value) {
                          subScope[prop] = value[prop]
                      }
                  }
              })
          }
          this.defineAccessors(subScope, path.slice(1))
      }
  }