运行时构建 — 浏览器环境 (第一层)

当看到这些代码时，我的第一个问题是，为什么要把这些代码放在这这一层？

看到注释说，这些代码都为特殊平台定制的API。考虑到这一块的构建又正好是 web-runtime 的入口文件，也就通顺了。

这一部分主要是为 Vue 注入浏览器平台相关的功能模块（为Web 扩展）

DOM 相关的工具API
扩展指令和组件功能(todo)
扩展虚拟DOM（todo）
添加 $mount 方法：提供另一种创建Vue实例的方法（todo）。
浏览器环境下，检测并开启 devtools。

这一部分，只有 DOM 相关的工具 API 可以直接阅读，其他部分都需要先理解 Vue 核心模块对这几个部分的出力才能继续阅读，所以暂时先只记录这一模块。

整个源码的阅读过程应该是交叉进行的。

DOM 相关的工具 API

代码如下：

import {
  query,
  mustUseProp,
  isReservedTag,
  isReservedAttr,
  getTagNamespace,
  isUnknownElement
} from 'web/util/index'


Vue.config.mustUseProp = mustUseProp  //判断元素的值是否可以通过prop指定
Vue.config.isReservedTag = isReservedTag //判断元素是否是HTML标准中的元素
Vue.config.isReservedAttr = isReservedAttr//判断是否是保留属性(style、class)
Vue.config.getTagNamespace = getTagNamespace //判断标签是是否是 svg 或者 math(MathML 是数学标记语言)
Vue.config.isUnknownElement = isUnknownElement//是否是未知标签类型

这一部分代码都在 util目录下， 'web/util/index' 中代码如下，这里引入了 attrs、class、element 的几个方法：

export * from './attrs'
export * from './class'
export * from './element'

/**
 * Query an element selector if it's not an element already.
 */
export function query (el: string | Element): Element {
  if (typeof el === 'string') {
    const selected = document.querySelector(el)
    if (!selected) {
      process.env.NODE_ENV !== 'production' && warn(
        'Cannot find element: ' + el
      )
      return document.createElement('div')
    }
    return selected
  } else {
    return el
  }
}

util 目录如下：

image.png

从上面的代码和util文件目录中发现，有些文件似乎没有被引用，那么是不是就说明这些代码不属于这一模块呢？并不是，没有在util/index文件中被引用的文件和api只是被这一层的其他文件引用了，这些都属于层次比较深的代码了。这里就不在逐个分析流程了，也没有意义。这里记录下这几个文件中一些比较有意思的函数和一些知识点。

attrs.js

知识点

这里大量用到了 makeMap 函数，其作用是将一个字符串分转为map，然后通过map结构判断字符串是否存在，以 map 取代 array 来存放一组数据，并判断是否存在的问题，以代码提高性能。
xlink: XML链接语言，或XLink，是一种通过W3C推荐标准认证的XML标记语言，用于在 XML 文档中创建超链接，以及提供与这些链接相关联的元数据,例如 img 标签 object 标签

class.js

知识点

这里用到了isObject 函数去判断一个变量是否是对象。点在于其判断逻辑是：typeof obj !=== null && typeof obj === 'object'
Vue 中，一个元素的 class 可能包含两部分staticClass和dynamicClass，在合并时其前后顺序是 staticClass 在前，dynamicClass 在后。

style.js

这里用到了一个 cached 的方法。用来缓存函数的执行结果。

当解析 style 时，对解析结果进行了缓存，因为 style 很有可能会存在大量的重复内容，而字符串的解析又不存在指针指向问题，此时通过缓存解析结果可以提升解析性能。

/**
 * Create a cached version of a pure function.
 */
export function cached<F: Function> (fn: F): F {
  const cache = Object.create(null)
  return (function cachedFn (str: string) {
    const hit = cache[str]
    return hit || (cache[str] = fn(str))
  }: any)
}

export const parseStyleText = cached(function (cssText) {
  const res = {}
  const listDelimiter = /;(?![^(]*\))/g
  const propertyDelimiter = /:(.+)/
  cssText.split(listDelimiter).forEach(function (item) {
    if (item) {
      const tmp = item.split(propertyDelimiter)
      tmp.length > 1 && (res[tmp[0].trim()] = tmp[1].trim())
    }
  })
  return res
})

这里用了闭包的特性，当调用 cached 时会在当前函数作用于创建 cache 对象，用于保存缓存结果，同时返回一个新的可执行函数 cachedFn，在该函数内返回缓存值或者计算新值并缓存。最终 parseStyleText = cachedFn。将cache对象写在 cached 内部而不是写在最外部的好处是，每次调用 cached() 都会生成一个新的 cache。如果此时再有一个 parseClassText = cached(function(str){})。那么parseStyleText和parseClassText将会拥有各自的缓存空间，而不至于全局用同一个。很完美的解耦和复用！

下一步：'core/index’ Vue 核心的构建过程。

Vue 源码分析《运行时构建 — 浏览器环境》