乐趣区

关于javascript:Vue011版本源码阅读系列四详解指令值解析函数

jiezi

需要

首先该版本的 vue 指令值反对一下几种类型以及通过 dirParser.parse 要返回的数据：

1. 实例属性：message，解析后应为：

[
    {
        "raw":"message",
        "expression":"message"
    }
]

2. 表达式：message === 'show'，解析后应为：

[
    {"raw":"message ==='show'","expression":"message === 'show'"}
]

3. 三元表达式：show ? true : false，解析后应为：

[
    {
        "raw":"message ==='show'? true : false",
        "expression":"message ==='show'? true : false"
    }
]

4. 设置元素类名、款式、属性、事件的：red:hasError,bold:isImportant,hidden:isHidden，解析后应为：

[{"arg":"red","raw":"red: hasError","expression":"hasError"},
    {"arg":"bold","raw":"bold: isImportant","expression":"isImportant"},
    {"arg":"hidden","raw":"hidden: isHidden","expression":"isHidden"}
]

或者：top: top + 'px',left: left + 'px',background-color: 'rgb(0,0,' + bg + ')'，解析后应为：

[{"arg":"top","raw":"top: top +'px'","expression":"top + 'px'"},
    {"arg":"left","raw":"left: left +'px'","expression":"left + 'px'"},
    {"arg":"background-color","raw":"background-color:'rgb(0,0,'+ bg +')'","expression":"'rgb(0,0,'+ bg +')'"}
]

5. 双大括号插值的：{{partialId}}，解析后应为：

[
    {"raw":"{{partialId}}",
        "expression":"{{partialId}}"
    }
]

6. 指令值是数组或对象

[1, 2, 3]应解析为：

[
    {"raw":"[1, 2, 3]",
        "expression":"[1, 2, 3]"
    }
]

{arr: [1, 2, 3], value: 'abc'}应解析为：

[
    {"raw":"{arr: [1, 2, 3], value:'abc'}",
        "expression":"{arr: [1, 2, 3], value:'abc'}"
    }
]

7. 过滤器：

message | capitalize应解析为：

[
    {
        "expression":"message",
        "raw":"message | capitalize",
        "filters":[
            {
                "name":"capitalize",
                "args":null
            }
        ]
    }
]

带参数的 message | capitalize 4 5 应解析为：

[
    {
        "expression":"message",
        "raw":"message | capitalize 4 5",
        "filters":[
            {
                "name":"capitalize",
                "args":["4","5"]
            }
        ]
    }
]

多个过滤器之间应用 | 进行分隔。

总结一下，就是如果是以逗号分隔的冒号表达式，则解析为：

[
    {
        arg:【冒号前的字符】,
        expression:【冒号后的字符】,
        raw:【原始值】},
    ...
]

带过滤器的会多一个 filters 字段。

其余一律解析为：

[
    {
        expression:【和原始值一样的值】,
        raw:【原始值】}
]

实现

当初让咱们从 0 开始写一个解析器：

let dirs = []
function parse(s) {return dirs}

简略的变量

首先反对最简略的第一种，实例属性或办法，依据下面的对照，根本一成不变返回即可：

var str = ''
var dirs = []
var dir = {}
var begin = 0
var i = 0
exports.parse = function (s) {
  str = s
  for (i = 0, l = str.length; i < l; i++) {}
  pushDir()
  return dirs
}
function pushDir () {dir.raw = str.slice(begin, i)
  dir.expression = str.slice(begin, i)
  dirs.push(dir)
}

能够看到齐全就是为了失去目标值的一个多此一举的过程，下一步来反对逗号分隔的冒号表达式。

冒号表达式

先看就一个的状况，如 a:b，遍历到的以后字符如果是冒号的话就把冒号之前的字符截取进去作为arg，冒号后的字符作为expression，begin 变量是用来标记以后这个表达式的终点的，所以要截取冒号后的字符须要新增一个变量：

var str = ''
var dirs = []
var dir = {}
var begin = 0
var argIndex = 0 // ++
var i = 0
exports.parse = function (s) {
  str = s
  for (i = 0, l = str.length; i < l; i++) {
    // ++
    c = str.charCodeAt(i)
    if (c === 0x3A) {// 冒号:
      dir.arg = str.slice(begin, i).trim()
      argIndex = i + 1
    }
  }
  pushDir()
  return dirs
}
function pushDir () {dir.raw = str.slice(begin, i)
  dir.expression = str.slice(argIndex, i).trim()// ++
  dirs.push(dir)
}

接下来反对存在逗号的状况，逗号相当于一个表达式的完结，所以要进行一次 push，另外begin、argIndex、dir 变量都须要重置：

exports.parse = function (s) {
  str = s
  for (i = 0, l = str.length; i < l; i++) {c = str.charCodeAt(i)
    if (c === 0x3A) {// 冒号:
      dir.arg = str.slice(begin, i).trim()
      argIndex = i + 1
    } else if (c === 0x2C) {// 逗号, ++
      pushDir()
      dir = {}
      begin = argIndex = i + 1
    }
  }
  pushDir()
  return dirs
}

三元表达式

接下来反对三元表达式，目前会把三元表达式的冒号前后局部拆散调，会输入相似上面的后果：

[
    {
        "arg":"show ? true",
        "raw":"show ? true : false",
        "expression":"false"
    }
]

所以查看到冒号的时候咱们要判断一下这是否是个三元表达式，是的话就不截取：

exports.parse = function (s) {
  str = s
  for (i = 0, l = str.length; i < l; i++) {c = str.charCodeAt(i)
    if (c === 0x3A) {// 冒号: ++
      var arg = str.slice(begin, i).trim()
      if (/^[^\?]+$/.test(arg)) {
        dir.arg = arg
        argIndex = i + 1
      }
    } else if (c === 0x2C) {pushDir()
      dir = {}
      begin = argIndex = i + 1
    }
  }
  pushDir()
  return dirs
}

判断一下冒号之前的字符里是否存在?，存在的话就代表是三元表达式，则不进行宰割。

看一个非凡状况：background-color: 'rgb(0,0,' + bg + ')'

目前会解析成：

[
    {
        "arg":"background-color",
        "raw":"background-color:'rgb(0","expression":"'rgb(0"},
    {
        "raw":"0",
        "expression":"0"
    },
    {"raw":"'+ bg +')'","expression":"' + bg + ')'"
    }
]

起因就出在属性值里的逗号，如果属性值里存在逗号，那该属性值肯定是被引号突围的，所以在单引号或双引号里的都要疏忽，所以让咱们新增两个变量来记录是否是在引号里：

var inDouble = false // ++
var inSingle = false // ++

如果呈现第一个引号，把标记设为 true，而后两头字符都间接跳过，直到呈现闭合的引号，才退出持续其余的判断：

exports.parse = function (s) {
  str = s
  for (i = 0, l = str.length; i < l; i++) {c = str.charCodeAt(i)
    if (inDouble) {// 双引号还未闭合 ++
      if (c === 0x22) {// 呈现了闭合引号
        inDouble = !inDouble
      }
    } else if (inSingle) {// 单引号还未闭合 ++
      if (c === 0x27) {// 呈现了闭合引号
        inSingle = !inSingle
      }
    } else if (c === 0x3A) {// ...} else if (c === 0x2C) {// ...} else {// ++
      switch (c) {
        // 首次呈现引号设置标记位
        case 0x22: inDouble = true; break // "case 0x27: inSingle = true; break //'      
        default:
          break;
      }
    }
  }
  pushDir()
  return dirs
}

数组或对象

数组或对象都须要一成不变的返回，因为带冒号和逗号目前都会被切割，对数组来说，字符都是被 [] 中括号突围的，所以在这区间的逗号要疏忽掉，因为括号可能多重嵌套，所以减少一个变量来计数，呈现左括号加 1，呈现右括号减 1，为 0 就代表不在括号里：

var square = 0// ++
exports.parse = function (s) {
  str = s
  for (i = 0, l = str.length; i < l; i++) {c = str.charCodeAt(i)
    if (inDouble) {} 
    else if (inSingle) {} 
    else if (c === 0x3A) {} 
    else if (c === 0x2C && square === 0) {// ++
      pushDir()
      dir = {}
      begin = argIndex = i + 1
    } else {switch (c) {
        case 0x22: inDouble = true; break 
        case 0x27: inSingle = true; break   
        case 0x5B: square++; break        // [ ++
        case 0x5D: square--; break        // ] ++
        default:
          break;
      }
    }
  }
  pushDir()
  return dirs
}

对象也是相似，然而对象多了冒号，冒号也会被截掉，所以须要和三元表达式一样进行判断：

var curly = 0// ++
exports.parse = function (s) {
  str = s
  for (i = 0, l = str.length; i < l; i++) {c = str.charCodeAt(i)
    if (inDouble) {} 
    else if (inSingle) {} 
    else if (c === 0x3A) {var arg = str.slice(begin, i).trim()
      if (/^[^\?\{]+$/.test(arg)) {// ++ 正则表达式批改，如果呈现了{代表可能是对象
        dir.arg = arg
        argIndex = i + 1
      }
    } else if (c === 0x2C && square === 0 && curly === 0) {// ++
      pushDir()
      dir = {}
      begin = argIndex = i + 1
    } else {switch (c) {
        // ...
        case 0x7B: curly++; break         // { ++
        case 0x7D: curly--; break         // } ++
        default:
          break;
      }
    }
  }
  pushDir()
  return dirs
}

过滤器

最初来看过滤器，过滤器应用管道符 |，所以遍历到这个字符时推入过滤器，过滤器反对多个，第一个字符串代表表达式，后续| 分隔的各代表一个过滤器，当呈现第一个 | 时只能获取到该过滤器所被利用的值，也就是 expression 的值，须要持续遍历才晓得具体的过滤器，如何判断是否是第一个 | 能够依据 expression 是否有值：

exports.parse = function (s) {for (i = 0, l = str.length; i < l; i++) {c = str.charCodeAt(i)
        // ...
        else if (c === 0x7C) {// 管道符 |
            if (dir.expression === undefined) {// 第一次呈现 |
                dir.expression = str.slice(argIndex, i).trim()// 截取第一个 | 前的字符来作为表达式的值}
        }
        // ...
    }
}
function pushDir () {dir.raw = str.slice(begin, i)
    if (dir.expression === undefined) {// ++ 这里也须要进行判断，如果有值代表曾经被过滤器分支设置过了，这里就不须要设置
        dir.expression = str.slice(argIndex, i).trim()}
    dirs.push(dir)
}

假如只有一个过滤器的话持续遍历会直到完结，完结后会再调一次 pushDir 办法，所以批改一下这个办法，进行一次过滤器收集解决：


function pushDir () {dir.raw = str.slice(begin, i)
  if (dir.expression === undefined) {dir.expression = str.slice(argIndex, i).trim()} else {// ++ 增加过滤器
    pushFilter()}
  dirs.push(dir)
}
function pushFilter () {// 这里要截取的字符串应该是 | 前面的，begin 和 argIndex 字段都用不了，所以须要新增一个变量}

新增一个变量用于记录以后过滤器的起始地位：

var lastFilterIndex = 0 // ++
exports.parse = function (s) {for (i = 0, l = str.length; i < l; i++) {c = str.charCodeAt(i)
        // ...
        else if (c === 0x7C) {if (dir.expression === undefined) {dir.expression = str.slice(argIndex, i).trim()}
            lastFilterIndex = i + 1// ++
        }
        // ...
    }
}

因为过滤器反对带参数，参数和过滤器名之间用空格分隔，所以写一个正则来匹配一下：/[^\s'"]+|'[^']+'|"[^"]+"/g，参数除了是变量也能够是字符串，所以前面两个对引号的匹配是为了保障最初匹配的后果也是带引号的，否则：capitalize'abc'和 capitalize abc 最初匹配进去的都是：["abc"]，加上前面两个引号的匹配后则才是咱们须要的：["'abc'"]。

function pushFilter() {var exp = str.slice(lastFilterIndex, i).trim()
  if (exp) {var tokens = exp.match(/[^\s'"]+|'[^']+'|"[^"]+"/g)
    var filter = {}
    filter.name = tokens[0]
    filter.args = tokens.length > 1 ? tokens.slice(1) : null
    dir.filters = dir.filters || []
    dir.filters.push(filter)
  }
}

后果如下：

接下来反对一下多个过滤器的状况，多个过滤器，则会呈现多个 |，所以又会走到| 的if分支，非第一次呈现的话不须要批改 expression 的值，间接 push 以后遍历到的过滤器即可：

exports.parse = function (s) {for (i = 0, l = str.length; i < l; i++) {c = str.charCodeAt(i)
        // ...
        else if (c === 0x7C) {if (dir.expression === undefined) {dir.expression = str.slice(argIndex, i).trim()} else {// 非第一次呈现间接 push ++ 
                pushFilter()}
            lastFilterIndex = i + 1
        }
        // ...
    }
}

后果如下：

最初也看一种非凡状况，就是 || 的状况，这是或的意思，所以必定不能解析为过滤器，在 if 条件里减少一下判断，排除以后遍历到的 | 前一个或后一个字符也是 | 的状况：

exports.parse = function (s) {for (i = 0, l = str.length; i < l; i++) {c = str.charCodeAt(i)
        // ...
        else if (c === 0x7C && str.charCodeAt(i - 1) !== 0x7C && str.charCodeAt(i + 1) !== 0x7C) {// ++ 
            // ...
        }
        // ...
    }
}

实现

到这里根本就实现了，残缺代码如下：

var str = ''
var dirs = []
var dir = {}
var begin = 0
var argIndex = 0 
var i = 0
var inDouble = false
var inSingle = false
var square = 0
var curly = 0
var lastFilterIndex = 0
function reset() {
  str = ''
  dirs = []
  dir = {}
  begin = 0
  argIndex = 0 
  i = 0
  inDouble = false
  inSingle = false
  square = 0
  curly = 0
  lastFilterIndex = 0
}
exports.parse = function (s) {reset()
  str = s
  for (i = 0, l = str.length; i < l; i++) {c = str.charCodeAt(i)
    if (inDouble) {// 双引号还未闭合
      if (c === 0x22) {// 呈现了闭合引号
        inDouble = !inDouble
      }
    } else if (inSingle) {// 单引号还未闭合
      if (c === 0x27) {// 呈现了闭合引号
        inSingle = !inSingle
      }
    } else if (c === 0x3A) {// 冒号:
      var arg = str.slice(begin, i).trim()
      if (/^[^\?\{]+$/.test(arg)) {
        dir.arg = arg
        argIndex = i + 1
      }
    } else if (c === 0x2C && square === 0 && curly === 0) {// 逗号,
      pushDir()
      dir = {}
      begin = argIndex = i + 1
    } else if (c === 0x7C && str.charCodeAt(i - 1) !== 0x7C && str.charCodeAt(i + 1) !== 0x7C) {// 管道符 |
      if (dir.expression === undefined) {// 第一次呈现 |
        dir.expression = str.slice(argIndex, i).trim()} else {// 非第一次呈现间接 push
        pushFilter()}
      lastFilterIndex = i + 1
    } else {switch (c) {
        case 0x22: inDouble = true; break // "case 0x27: inSingle = true; break //'  
        case 0x5B: square++; break        // [case 0x5D: square--; break        //]
        case 0x7B: curly++; break         // {case 0x7D: curly--; break         //}
        default:
          break;
      }
    }
  }
  pushDir()
  return dirs
}
function pushDir () {dir.raw = str.slice(begin, i)
  if (dir.expression === undefined) {// ++ 这里也须要进行判断，如果有值代表曾经被过滤器分支设置过了，这里就不须要设置
    dir.expression = str.slice(argIndex, i).trim()} else {// ++ 增加过滤器
    pushFilter()}
  dirs.push(dir)
}
function pushFilter() {var exp = str.slice(lastFilterIndex, i).trim()
  if (exp) {var tokens = exp.match(/[^\s'"]+|'[^']+'|"[^"]+"/g)
    var filter = {}
    filter.name = tokens[0]
    filter.args = tokens.length > 1 ? tokens.slice(1) : null
    dir.filters = dir.filters || []
    dir.filters.push(filter)
  }
}

把下面的代码替换掉 vue 源码里的相干代码，测试了一下根本用例是能跑通的，然而可能还会有其余一些非凡场景没有关照到，更欠缺的代码请自行浏览 vue 源码。

退出移动版