Vue0.11版本源码阅读系列四:详解指令值解析函数

简介: Vue0.11版本源码阅读系列四:详解指令值解析函数

需求


首先该版本的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,冒号后的字符作为expressionbegin变量是用来标记当前这个表达式的起点的,所以要截取冒号后的字符需要新增一个变量:


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,另外beginargIndexdir变量都需要重置:


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)
  }
}


结果如下:


image.png

接下来支持一下多个过滤器的情况,多个过滤器,则会出现多个|,所以又会走到|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
        }
        // ...
    }
}


结果如下:


image.png


最后也看一种特殊情况,就是||的情况,这是或的意思,所以肯定不能解析为过滤器,在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源码。


相关文章
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
573 0
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
548 77
|
4月前
|
JavaScript 前端开发 UED
Vue 手风琴实现的三种常用方式及长尾关键词解析
手风琴效果是Vue开发中常见的交互组件,可节省页面空间、提升用户体验。本文介绍三种实现方式:1) 原生Vue结合数据绑定与CSS动画;2) 使用Element UI等组件库快速构建;3) 自定义指令操作DOM实现独特效果。每种方式适用于不同场景,可根据项目需求选择。示例包括产品特性页、后台菜单及FAQ展示,灵活满足多样需求。附代码示例与资源链接,助你高效实现手风琴功能。
168 10
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
213 1
|
7月前
|
算法 测试技术 C语言
深入理解HTTP/2:nghttp2库源码解析及客户端实现示例
通过解析nghttp2库的源码和实现一个简单的HTTP/2客户端示例,本文详细介绍了HTTP/2的关键特性和nghttp2的核心实现。了解这些内容可以帮助开发者更好地理解HTTP/2协议,提高Web应用的性能和用户体验。对于实际开发中的应用,可以根据需要进一步优化和扩展代码,以满足具体需求。
658 29
|
10月前
|
NoSQL Java Linux
《docker高级篇(大厂进阶):2.DockerFile解析》包括:是什么、DockerFile构建过程解析、DockerFile常用保留字指令、案例、小总结
《docker高级篇(大厂进阶):2.DockerFile解析》包括:是什么、DockerFile构建过程解析、DockerFile常用保留字指令、案例、小总结
467 76
|
7月前
|
前端开发 数据安全/隐私保护 CDN
二次元聚合短视频解析去水印系统源码
二次元聚合短视频解析去水印系统源码
191 4
|
7月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
移动开发 前端开发 JavaScript
从入门到精通:H5游戏源码开发技术全解析与未来趋势洞察
H5游戏凭借其跨平台、易传播和开发成本低的优势,近年来发展迅猛。接下来,让我们深入了解 H5 游戏源码开发的技术教程以及未来的发展趋势。

热门文章

最新文章

推荐镜像

更多
  • DNS