[email protected] 文件內容

[email protected]

文件

snabbdom.js

核心文件。包含

• init 返回patch函數
• h 返回vNode
• thunk patch優化類似於pureComponent

script方法引入後使用snabbdom全局變量。

init

# 核心函數 返回patch函數
var hooks = ['create', 'update', 'remove', 'destroy', 'pre', 'post'];
function init(modules, domApi) {
	var i, j, cbs = {}; //收集 module 中的 hook
    ...
    function emptyNodeAt(){};
    function createRmCb(){};
    function createElm(){};
    function addVnodes(){};
    function invokeDestroyHook(){};
    function removeVnodes(){};
    function updateChildren(){};
    function updateChildren(){};
    function patchVnode(){};
    return function patch(){}
}

• modules是數組，可以是classModule、propsModule、styleModule、eventListenersModule…
• domApi dom 相關的 api可以自定義。默認、weex 的相關實現

h

function h(sel: any, b?: any, c?: any): VNode {}

根據不同的參數個數，參數類型調用vnode返回規範的vNode。

svg比較特殊addNS

function vnode(sel, data, children, text, elm) {
    var key = data === undefined ? undefined : data.key;
    return { sel: sel, data: data, children: children,
        text: text, elm: elm, key: key };
}

updateChildren

兩個數組前後對比，認真看還是能明白的加油

function sameVnode(vnode1, vnode2) {
    return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
}

patchVnode

1. hook.prepatch
2. cbs.update
3. hook.update
4. 更新節點內容
5. hook.postpatch

patch

function emptyNodeAt(elm) {
        var id = elm.id ? '#' + elm.id : '';
        var c = elm.className ? '.' + elm.className.split(' ').join('.') : '';
        return vnode(api.tagName(elm).toLowerCase() + id + c, {}, [], undefined, elm);
}

createElm

1. 判斷是否有data.hook.init，執行hook.init
2. sel選擇器如果是!添加註釋createComment
3. sel如果是undefined，創建文本節點createTextNode
4. 創建節點createElement

創建節點createElement
添加id、class
執行cbs.create。例如styleModule.create
添加children

snabbdom-patch.js

包裝後文件。和文件snabbdom.js二選一就可以。包含

• h
• patch

script方法引入後使用snabbdom全局變量。

核心代碼，包含的Module

var patch = snabbdom.init([
    attributes_1.attributesModule,
    class_1.classModule,
    props_1.propsModule,
    style_1.styleModule,
    eventlisteners_1.eventListenersModule
]);

snabbdom-style.js

exports.styleModule = {
    create: updateStyle,
    update: updateStyle,
    destroy: applyDestroyStyle,
    remove: applyRemoveStyle
};

snabbdom-props.js

exports.propsModule = { 
	create: updateProps, 
	update: updateProps 
};

snabbdom-eventlisteners.js

exports.eventListenersModule = {
    create: updateEventListeners,
    update: updateEventListeners,
    destroy: updateEventListeners
};

snabbdom-dataset.js

exports.datasetModule = { 
	create: updateDataset, 
	update: updateDataset 
};

snabbdom-class.js

exports.classModule = { 
	create: updateClass, 
	update: updateClass 
};

snabbdom-attributes.js

exports.attributesModule = { 
	create: updateAttrs, 
	update: updateAttrs 
};

測試demo

snabbdom-patch.js和snabbdom.js二選一引入。主要使用h、patch兩個函數。
snabbdom.js使用init函數返回patch。

const patch = snabbdom.init([
	snabbdom_style.styleModule,
]);
const {h} = snabbdom;

snabbdom-patch.js直接使用

const {snabbdomBundle: {h, patch}} = snabbdom;

先試用cdn引入，大概明白後下載源碼，本地引入，添加斷點、console等方法，慢慢看。
測試demo

參考文章
參考文章