## [shared\util.js]
>[info] import
~~~
;轉換為字符串輸出
export function renderString (val) {
return val == null
? ''
: typeof val === 'object'
? JSON.stringify(val, null, 2)
: String(val)
}
;字符串轉換為Map結構,并檢查key是否在Map中
export function makeMap (str, expectsLowerCase) {
const map = Object.create(null)
const list = str.split(',')
for (let i = 0; i < list.length; i++) {
map[list[i]] = true
}
return expectsLowerCase
? val => map[val.toLowerCase()]
: val => map[val]
}
;自定義內建標簽
export const isBuiltInTag = makeMap('slot,component,render,transition', true)
;刪除數組的項
export function remove (arr, item) {
if (arr.length) {
const index = arr.indexOf(item)
if (index > -1) {
return arr.splice(index, 1)
}
}
}
;檢測是否為對象的屬性
const hasOwnProperty = Object.prototype.hasOwnProperty
export function hasOwn (obj, key) {
return hasOwnProperty.call(obj, key)
}
;檢測是否為原子類型(數字和字符串)
export function isPrimitive (value) {
return typeof value === 'string' || typeof value === 'number'
}
;函數的緩存版本
export function cached (fn) {
const cache = Object.create(null)
return function cachedFn (str) {
const hit = cache[str]
return hit || (cache[str] = fn(str))
}
}
const camelizeRE = /-(\w)/g
;字符串駝峰化
export const camelize = cached(str => {
return str.replace(camelizeRE, toUpper)
})
function toUpper (_, c) {
return c ? c.toUpperCase() : ''
}
const hyphenateRE = /([a-z\d])([A-Z])/g
;字符串解駝峰
export const hyphenate = cached(str => {
return str
.replace(hyphenateRE, '$1-$2')
.toLowerCase()
})
;函數綁定環境運行
export function bind (fn, ctx) {
return function (a) {
const l = arguments.length
return l
? l > 1
? fn.apply(ctx, arguments)
: fn.call(ctx, a)
: fn.call(ctx)
}
}
;數組類對象轉換為數組
export function toArray (list, start) {
start = start || 0
let i = list.length - start
const ret = new Array(i)
while (i--) {
ret[i] = list[i + start]
}
return ret
}
;屬性合并
export function extend (to, _from) {
for (const key in _from) {
to[key] = _from[key]
}
return to
}
;檢測是否為對象
export function isObject (obj) {
return obj !== null && typeof obj === 'object'
}
;檢測是否為簡單對象
const toString = Object.prototype.toString
const OBJECT_STRING = '[object Object]'
export function isPlainObject (obj) {
return toString.call(obj) === OBJECT_STRING
}
;檢測是否為數組
export const isArray = Array.isArray
~~~
>[info] module
~~~
~~~
>[info] export
~~~
;(導出)字符串輸出
export function renderString (val) {}
;(導出)字符串到Map結構轉換
export function makeMap (str, expectsLowerCase) {}
;(導出)自定義內置標簽
export const isBuiltInTag
;(導出)刪除數組項
export function remove (arr, item) {}
;(導出)檢測對象屬性
export function hasOwn (obj, key) {}
;(導出)檢測值是否是數字和字符串原子類型
export function isPrimitive (value) {}
;(導出)函數的緩存版本
export function cached (fn) {}
;(導出)字符串駝峰化
export const camelize{}
;(導出)字符串解駝峰化
export const hyphenate{}
;(導出)函數綁定環境運行
export function bind (fn, ctx) {}
;(導出)對象轉換為數組
export function toArray (list, start) {}
;(導出)合并對象屬性
export function extend (to, _from) {}
;(導出)檢測是否為對象
export function isObject (obj) {}
;(導出)檢測是否為簡單對象
export function isPlainObject (obj) {}
;(導出)檢測是否為數組
export const isArray
~~~
- 概述
- 框架結構
- 編譯入口(\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源碼分析資料