深入vue2.0源码系列: 指令的实现原理与实现方式

// 自定义指令 v-focus，将元素聚焦
Vue.directive('focus', {
  // 当指令所在的元素插入到 DOM 中时触发
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

// 解析模板中的指令
function parseDirective(attr) {
  var dir = {}
  // 解析指令名称
  var name = attr.name.slice(2)
  // 解析指令参数
  var arg = attr.name.match(/:([^:]+)$/)[1]
  // 解析指令修饰符
  var modifiers = {}
  attr.name.replace(/\.[^\.]+/g, function (m) {
    modifiers[m.slice(1)] = true
  })
  // 将解析后的指令信息存储到 dir 对象中
  dir.name = name
  dir.arg = arg
  dir.modifiers = modifiers
  dir.expression = attr.value
  return dir
}

// 遍历 AST 树解析指令
function traverse(node) {
  if (node.type === 1) { // 元素节点
    // 遍历元素的所有属性
    for (var i = 0; i < node.attrs.length; i++) {
      var attr = node.attrs[i]
      // 如果属性名称以 v- 开头，则说明是一个指令属性
      if (attr.name.indexOf('v-') === 0) {
        // 解析指令
        var dir = parseDirective(attr)
        // 创建 Watcher 对象
        var watcher = new Watcher(vm, dir.expression, function (value, oldValue) {
          // 根据指令名称调用对应的更新函数
          var fn = vm.$options.directives[dir.name].update
          if (fn) {
            fn(el, dir, value, oldValue)
          }
        })
        // 将 Watcher 对象存储到元素的私有数据中
        el._watchers.push(watcher)
      }
    }
  } else if (node.type === 3) { // 文本节点
    // 解析文本节点中的插值表达式
    var tokens = parseText(node.text)
    // 遍历插值表达式中的所有指令
    for (var i = 0; i < tokens.length; i++) {
      var token = tokens[i]
      if (token.tag) { // 指令
        // 创建 Watcher 对象
        var watcher = new Watcher(vm, token.value, function (value, oldValue) {
          // 根据指令名称调用对应的更新函数
          var fn = vm.$options.directives[token.tag].update
          if (fn) {
            fn(node, token, value, oldValue)
          }
        })
        // 将 Watcher 对象存储到文本节点的私有数据中
        node._watchers.push(watcher)
      }
    }
  }
  // 遍历所有子节点
  if (node.children) {
    for (var i = 0; i < node.children.length; i++) {
      traverse(node.children[i])
    }
  }
}

// 更新 v-focus 指令
function updateFocus(el, dir, value) {
  // 当值为 true 时将焦点设置到元素上
  if (value) {
    el.focus()
  }
}

// 编译表达式
function compileExp(exp) {
  return function (vm) {
    return vm.$eval(exp)
  }
}

// 解析指令参数和修饰符
function parseDirective(attr) {
  var name = attr.name.slice(2)
  var exp = attr.value
  var argRE = /:(.*)$/
  var argMatch = exp.match(argRE)
  var arg = argMatch && argMatch[1]
  var modifiers = {}
  exp = arg ? exp.slice(0, -(arg.length + 1)) : exp
  var rawName = name
  if (arg) {
    // 解析指令修饰符
    var modifiersRE = /\.[^.\]]+(?=[^\]]*$)/g
    var modifierMatch = name.match(modifiersRE)
    if (modifierMatch) {
      modifierMatch.forEach(function (m) {
        modifiers[m.slice(1)] = true
        name = name.replace(m, '')
      })
    }
  }
  return {
    name: name,
    rawName: rawName,
    arg: arg,
    modifiers: modifiers,
    expression: exp
  }
}

// 解析文本节点中的插值表达式
function parseText(text) {
  var tagRE = /\{\{((?:.|\n)+?)\}\}/g
  var tokens = []
  var lastIndex = 0
  var match, index, value
  while ((match = tagRE.exec(text))) {
    index = match.index
    // push text token
    if (index > lastIndex) {
      tokens.push({
        value: text.slice(lastIndex, index)
      })
    }
    // tag token
    value = match[1].trim()
    tokens.push({
      tag: true,
      value: value
    })
    lastIndex = index + match[0].length
  }
  // push trailing text token
  if (lastIndex < text.length) {
    tokens.push({
      value: text.slice(lastIndex)
    })
  }
  return tokens
}