[TOC]
****
## 4 (web\util\)web工具目录
~~~
web\util\
attrs.js
class.js
element.js
index.js
~~~
## 4-1 attrs.js 属性操作工具
>[info] import
~~~
;(导入)Map工具
import { makeMap } from 'shared/util'
~~~
>[info] module
~~~
;特殊属性Map
export const mustUseProp = makeMap('value,selected,checked,muted')
export const isEnumeratedAttr = makeMap('contenteditable,draggable,spellcheck')
export const isBooleanAttr = makeMap(
'allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,' +
'default,defaultchecked,defaultmuted,defaultselected,defer,disabled,' +
'enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,' +
'muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,' +
'required,reversed,scoped,seamless,selected,sortable,translate,' +
'truespeed,typemustmatch,visible'
)
export const propsToAttrMap = {
acceptCharset: 'accept-charset',
className: 'class',
htmlFor: 'for',
httpEquiv: 'http-equiv'
}
export const xlinkNS = 'http://www.w3.org/1999/xlink'
export const isXlink = name => name.charAt(5) === ':' && name.slice(0, 5) === 'xlink'
export const getXlinkProp = name => isXlink(name) ? name.slice(6, name.length) : ''
export const isFalsyAttrValue = val => val == null || val === false
~~~
>[info] export
~~~
;(导出)属性集合Map
export const mustUseProp
export const isEnumeratedAttr
export const isBooleanAttr
export const propsToAttrMap
export const xlinkNS
export const isXlink
export const getXlinkProp
export const isFalsyAttrValue
~~~
## 4-2 class.js class操作工具
>[info] import
~~~
import { extend, isArray, isObject } from 'shared/util'
~~~
>[info] module
~~~
;为节点生成class
export function genClassForVnode (vnode) {
let data = vnode.data
// Important: check if this is a component container node
// or a child component root node
let i
if ((i = vnode.child) && (i = i._vnode.data)) {
data = mergeClassData(i, data)
}
if ((i = vnode.parent) && (i = i.data)) {
data = mergeClassData(data, i)
}
return genClassFromData(data)
}
;合并class数据
function mergeClassData (child, parent) {
return {
staticClass: concat(child.staticClass, parent.staticClass),
class: child.class ? extend(child.class, parent.class) : parent.class
}
}
;从data创建class
function genClassFromData (data) {
const dynamicClass = data.class
const staticClass = data.staticClass
if (staticClass || dynamicClass) {
return concat(staticClass, stringifyClass(dynamicClass))
}
}
;连接
export function concat (a, b) {
return a ? b ? (a + ' ' + b) : a : (b || '')
}
;字符串化class
export function stringifyClass (value) {
if (!value) {
return ''
}
if (typeof value === 'string') {
return value
}
if (isArray(value)) {
let res = ''
for (let i = 0, l = value.length; i < l; i++) {
if (value[i]) res += stringifyClass(value[i]) + ' '
}
return res.slice(0, -1)
}
if (isObject(value)) {
let res = ''
for (const key in value) {
if (value[key]) res += key + ' '
}
return res.slice(0, -1)
}
}
~~~
>[info] export
~~~
(导出)生成节点的class
export function genClassForVnode (vnode) {}
(导出)连接
export function concat (a, b) {}
(导出)字符串化class
export function stringifyClass (value) {}
~~~
## 4-3 element.js el操作工具
>[info] import
~~~
import { inBrowser } from 'core/util/env'
import { makeMap } from 'shared/util'
~~~
>[info] module
~~~
;命名空间
export const namespaceMap = {
svg: 'http://www.w3.org/2000/svg',
math: 'http://www.w3.org/1998/Math/MathML'
}
;保留元素标签
export const isReservedTag = makeMap(
'html,base,head,link,meta,style,title,' +
'address,article,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
'div,dd,dl,dt,figcaption,figure,hr,img,li,main,ol,p,pre,ul,' +
'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +
's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' +
'embed,object,param,source,canvas,script,noscript,del,ins,' +
'caption,col,colgroup,table,thead,tbody,td,th,tr,' +
'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +
'output,progress,select,textarea,' +
'details,dialog,menu,menuitem,summary,' +
'content,element,shadow,template'
)
;单标签
export const isUnaryTag = makeMap(
'area,base,br,col,embed,frame,hr,img,input,isindex,keygen,' +
'link,meta,param,source,track,wbr',
true
)
;可以使用单标签
export const canBeLeftOpenTag = makeMap(
'colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr,source',
true
)
;
export const isNonPhrasingTag = makeMap(
'address,article,aside,base,blockquote,body,caption,col,colgroup,dd,' +
'details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,' +
'h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,' +
'optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,' +
'title,tr,track',
true
)
;svg标签类型
const isSVG = makeMap(
'svg,g,defs,symbol,use,image,text,circle,ellipse,' +
'line,path,polygon,polyline,rect',
true
)
;获取tag命名空间
export function getTagNamespace (tag) {
if (isSVG(tag)) {
return 'svg'
}
if (tag === 'math') {
return 'math'
}
}
;未知el缓存
const unknownElementCache = Object.create(null)
;检测是否未知el
export function isUnknownElement (tag) {
if (!inBrowser) {
return true
}
tag = tag.toLowerCase()
if (unknownElementCache[tag] != null) {
return unknownElementCache[tag]
}
const el = document.createElement(tag)
if (tag.indexOf('-') > -1) {
return (unknownElementCache[tag] = (
el.constructor === window.HTMLUnknownElement ||
el.constructor === window.HTMLElement
))
} else {
return (unknownElementCache[tag] = (
/HTMLUnknownElement/.test(el.toString()) &&
!/^(data|time|rtc|rb)$/.test(tag)
))
}
}
~~~
>[info] export
~~~
export const namespaceMap = {}
export const isReservedTag = {}
export const isUnaryTag = {}
export const canBeLeftOpenTag = {}
export const isNonPhrasingTag = {}
export function getTagNamespace
export function isUnknownElement
~~~
## 4-4 index.js 操作工具入口
>[info] import
~~~
;(导入)核心工具
import { warn, inBrowser } from 'core/util/index'
~~~
>[info] module
~~~
;其他工具接口
export * from './attrs'
export * from './class'
export * from './element'
;web环境接口
const UA = inBrowser && window.navigator.userAgent.toLowerCase()
export const isIE9 = UA && UA.indexOf('msie 9.0') > 0
export const isAndroid = UA && UA.indexOf('android') > 0
;el查找接口
export function query (el) {
if (typeof el === 'string') {
const selector = el
el = document.querySelector(el)
if (!el) {
process.env.NODE_ENV !== 'production' && warn(
'Cannot find element: ' + selector
)
}
}
return el
}
~~~
>[info] export
~~~
;(导出)其他操作工具
export * from './attrs'
export * from './class'
export * from './element'
;(导出)环境检测工具
export const isIE9
export const isAndroid
;(导出)元素查找工具
export function query (el) {}
~~~
- 概述
- 框架结构
- 编译入口(\entries)
- web-compiler.js(web编译)
- web-runtime.js(web运行时)
- web-runtime-wih-compiler.js(web编译运行)
- web-server-renderer.js(web服务器渲染)
- 核心实现 (\core)
- index.js(核心入口)
- config.js(核心配置)
- core\util(核心工具)
- core\observer(双向绑定)
- core\vdom(虚拟DOM)
- core\global-api(核心api)
- core\instance(核心实例)
- 模板编译(\compiler)
- compiler\parser(模板解析)
- events.js(事件解析)
- helper.js(解析助手)
- directives\ref.js(ref指令)
- optimizer.js(解析优化)
- codegen.js(渲染生成)
- index.js(模板编译入口)
- web渲染(\platforms\web)
- compiler(web编译目录)
- runtime(web运行时目录)
- server(web服务器目录)
- util(web工具目录)
- 服务器渲染(\server)
- render-stream.js(流式渲染)
- render.js(服务器渲染函数)
- create-renderer.js(创建渲染接口)
- 框架流程
- Vue初始化
- Vue视图数据绑定
- Vue数据变化刷新
- Vue视图操作刷新
- 框架工具
- 基础工具(\shared)
- 模板编译助手
- 核心实例工具
- Web渲染工具
- 基础原理
- dom
- string
- array
- function
- object
- es6
- 模块(Module)
- 类(Class)
- 函数(箭头)
- 字符串(扩展)
- 代理接口(Proxy)
- 数据绑定基础
- 数据绑定实现
- mvvm简单实现
- mvvm简单使用
- vdom算法
- vdom实现
- vue源码分析资料