MAGIX

# 不稳定阶段

805a11895134fd25409edee3b6b4649abad2172a 在上一个 commit 已经完成了动态模板绑定的核心功能，现在需要在此基础上增加其他功能。

# 功能尝试

# 事件绑定

在事件绑定分析之前，先解决一个遗留问题

function handleDirective(el) {
        // 在使用 forEach 时要注意，在遍历时的操作会影响遍历的结果。
        cloneAttributes(el.attributes).forEach(function(attr) {
            var directive = parseDirective(attr);
            if(directive) {
                excute(el, directive);
            }
        });
    }

在 handleDirective 函数中，将 [].forEach.call 修改为 clone 函数，原因在上一篇提到了。
在 parseDirective 函数中， 将 dev 修改为

update: typeof def === 'function' ? def : def.update

因为在事件监听中，需要有不同的操作，绑定，解绑等等。

# 拦截器

通过选择器为指令事件增加拦截器，可以指定具体选择器下的节点响应事件。

# 销毁节点

销毁整个节点，并解绑事件监听，以提升性能。

# 重构

cf1732bea21dcc1637d587d295d534535a92d2b7 在非常早期的时候，vue 迎来了第一次重构。这次重构主要以原型继承的思路，重新设计了指令构造函数， 同时把主逻辑之外的操作抽离出来，作为指令对象的原型方法。这样做的优势：

  • 逻辑更清晰
  • 去除非必要形参
  • 耦合性耕地

# 探索

在 cf1732bea21dcc1637d587d295d534535a92d2b7 重构之后，作者在三四天中不断的尝试，项目的结构也反复变化，这个过程持续 几个 commit：

  • augmentArray seems to work
  • WIP
  • refactor
  • kinda working now.
  • sd-each-* works
  • big refactor.. again
  • kinda work now except for scope nesting
  • almost there! scope nesting
  • finally workssssss

首先逆向思维，我决定先看看成果。

# 最终实现

  • 指令绑定 （数据、事件、类、show、todolist）
  • 拦截器
  • 销毁 现在，就让我们一起来看看经历了怎样的变化，才生成当前的代码吧~

← 基础 →