ThinkSSL🔒 一键申购 5分钟快速签发 30天无理由退款 购买更放心 广告
[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) {} ~~~