Vue 源码阅读笔记

#1

Commit ID: 871ed9126639c9128c18bb2f19e6afd42c0c5ad9

---

• Label: HTML Template Transfer
• CodeSegment:

el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken)

function markToken (match, variable) {
    bindings[variable] = {}
    return ''
}

• Note:
  通过正则全局查找双花括号语法 {{ }} ，以符合条件的字符串作 key，生成空对象，并添加至 bindings 中。
• Knowledge:

  • \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\' 匹配 "" 而 "(" 则匹配 "("。

  • String.prototype.replace() 第二个传入的参数支持 String 或 Function
    当第二个参数为方法时，如果第一个参数为正则表达式，该方法的传入的第一个参数为匹配的子串，第二个参数则为正则表达式匹配的字符串，例如 HTML 文本为 {{ msg }}，在上文中的 markToken 则接收了 {{ msg }} , msg 为他的第一、二个参数。

str.replace(regexp|substr, newSubstr|function)

---

• Label: Data Binding
• CodeSegment:

for (var variable in bindings) {
    bind(variable)
}

function bind (variable) {
    bindings[variable].els = el.querySelectorAll('[' + bindingMark + '="' + variable + '"]')
    [].forEach.call(bindings[variable].els, function (e) {
        e.removeAttribute(bindingMark)
    })
    Object.defineProperty(data, variable, {
        set: function (newVal) {
            [].forEach.call(
                bindings[variable].els, 
                function (e) {
                    bindings[variable].value = e.textContent = newVal
                }
            )
        },
        get: function () {
            return bindings[variable].value
        }
    })
}

• Note:
  先通过自定义的 bindingMark 查找 HTML 模版中需要绑定的数据，然后在 data 对象中初始化数据模型后移除 bindingMark，再通过 Object.defineProperty()方法覆盖对应属性的 getter/setter ，在 setter 中通过 bindings[variable].value = e.textContent = newVal 的方式达到数据与视图层双向绑定的目的。
• Knowledge:
  • Object.defineProperty(object, peroperty, descriptor)
  • Function.prototype.call(thisArgument, ...Args)