Commit 31: better dep parsing

这个和下面的Commit32一起说～都是和计算属性有关的

Commit 32: computed properties!!!

• 主要改动：实现计算属性

• 总体思路：

  • 首先请看一下官网上介绍的计算属性：

  • 这次Commit实现的计算属性只是最初版本的，但是基本思路是不变的。事实上官网上已经告诉我们计算属性的实现思路，你可以体会一下下面这段话：

    Vue 知道 vm.reversedMessage依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。

    关键就在于“依赖”，我们要将这种依赖关系保存起来。这样每次message更新的时候，我们就可以通知那些“依赖”也进行相应的更新。这是一个十分典型的观察者模式的应用场景。

• 如何使用

  我们来看examples/todos.html文件中的这两段代码

  • html：

    Total: <span sd-text="total < todos"></span> |
    Remaining: <span sd-text="remaining < completed"></span> |
    Completed: <span sd-text="completed"></span>
    

  • js：

    scope.total = function () {
        return scope.todos.length
    }
    
    scope.remaining = function () {
        return scope.todos.length - scope.completed
    }
    

    上文已经说过这是一个最初版本的计算属性，因此很多地方并不“智能”。比如我们需要手动记录某个计算属性依赖于哪个变量。

    例如sd-text="remaining < completed"中，remaining是计算属性，依赖于completed，中间用<隔开

• 代码实现

  1. 我们首先再来回顾一下之前绑定指令的过程

     1. 以<span sd-text="total">为例，第一步需要生成要绑定的指令，其中包含了该指令的所有信息。比如该指令的名称（total）、指令类型（text）、_update方法等等。
     2. 把生成的指令保存在_bindings[total]中
     3. set total时调用_bindings[total]中每个指令的_update方法

  2. 生成含依赖的指令

     在生成total的指令时，添加依赖。

     • 例如对于<span sd-text="total < todos">，添加一个deps数组来保存其依赖于todos

  3. 根据deps绑定指令

     其实就是一个典型的观察者模式的思想，todos是目标，total是观察者，我们已经将目标存在deps中。那么下一步就是在deps的每个目标中添加观察者列表（dependents），然后添加一个通知所有观察者的函数（refreshDependents）。

     例如<span sd-text="total < todos">，我们根据之前的步骤已经得到deps，其值为['todos']。那么就在bindings['todo']中添加观察者列表dependents，把total存进去。接下来如果有另外的属性引用了todos，就继续往这个列表中添加。

     commit32.png

     这样我们只需在set todos时调用refreshDependents方法，就能实现total的自动更新。

Commit 33: todos

略

Commit 34: complete todo example

完善了一下demo（./examples/todos/index.html），囊括了很多指令。运行起来是以下这个样子，有兴趣的可以自己运行试一下。

image.png

Commit 35: jshint;

Commit 36: todo

Commit 37: thoughts

略

Commit 38: use emitters

• 主要改动：用component/emitter优化了一下指令绑定。

  虽然这个工具比较久远，但是由于之后还会用到这个东西，所以我查阅了一下官网☞component/emitter。这里我简单罗列一下之后可能会用到的几个API，具体可以看官网：

  • emitter.on(event, fn)：注册事件监听器
  • emitter.off(event, fn)：移除事件监听器
  • emitter.emit(event, fn的参数)：发送事件

Commit 39: sourceURLs for dev, reverse value

• 主要改动：增加了对“!”的支持。

  比如可以这样：<div sd-show="!isShow"></div>

Commit 40: add simple example & manual refresh of computed properties

• 主要改动：增加了一个实例方法_refreshBinding，可以手动更新计算属性。

Commit 41: auto parse dependency for computed properties!!!!!

• 主要改动：自动生成计算属性的依赖

  • 在Commit32中，我们需要在html中手动写好计算属性依赖的属性，就像这样：<section id="main" sd-show="total < todos">，用“<”隔开。

    印象模糊的可以再回上去看一下commit32

  • 改动后不再需要用“<”手动写依赖属性，定义时与一般属性并无差别。例如<section id="main" sd-show="total">。但在js中需要这样：

    scope.total = {
        // 需要定义一个get
        get: function () {
            return scope.todos.length
        }
    }
    

• 代码实现

  • 这次提交中计算属性的“观察者模式”的核心思想并没有变化。变化的是如何自动识别观察者所依赖的属性。例如对于

    scope.total = {
        get: function () {
            return scope.todos.length
        }
    }
    

    我们要将total添加到todos.dependents中。

  • 过程：
    commit41.png
    1. 首先要把指令都绑定好，并把绑定过程中遇到的计算属性都保存起来（上文说过我们需要在计算属性中定义一个get方法，就是用于这个步骤），保存在_computed数组中
    2. 接下来就是处理_computed数组。以total这个计算属性为例，我们先depsObserver注册一个get事件的监听器（具体看上图）
    3. 然后我们调用我们自定义的get函数。由于已经将所有属性都绑定好，因此一旦访问到其他属性（todos）的时候，就会触发我们在绑定时已经设定好的todos的setter。在setter中我们对这种情况进行了特殊处理，即会发送get事件。这样就可以在todos的dependents中加入total。