读vue-0.6-text-parser.js源码

提取字符串中的表达式

var BINDING_RE = /\{\{(.+?)\}\}/;
function parse(text) {
    // 找不到返回null
    if (!BINDING_RE.test(text)) return null
    var m, i, tokens = []
    while (m = text.match(BINDING_RE)) {
        i = m.index
        /*
            这句话很重要，它会将不在{{}}之前的值也加入到tokens中，比如下面这段代码:
            <div> 总共消费 {{102 + 2}} 元</div>
            很显然其中的` 总共消费 `和` 元`也是需要的，虽然它们不需要计算，主要原因还是因为vue是通过textContent直接将dom中的内容替换。
        */
        if (i > 0) tokens.push(text.slice(0, i))
        /*
            将找到的值去首尾空格后赋给key
         */
        tokens.push({ key: m[1].trim() })
        /*
            将text移到下一处，如:
            <div>{{1 + 2}}{{2 + 3}}</div>
            提取完{{1 + 2}}接着提取{{2 + 3}}
         */
        text = text.slice(i + m[0].length)
    }
    // 这句话是为了防止表达式后面还有内容，所以我们需要将表达式后面的内容再提取出来。
    if (text.length) tokens.push(text)
    return tokens
}