[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

参考文章
参考文章