snabbdom.js(四)

总共写了四篇文章（都是自己的一些拙见，仅供参考，请多多指教，我这边也会持续修正加更新）

介绍一下snabbdom基本用法
介绍一下snabbdom渲染原理
介绍一下snabddom的diff算法和对key值的认识
介绍一下对于兼容IE8的修改

这篇主要是记录一下针对ie8做了哪些修改

增加polyfill.js用来兼容某些功能函数，例如addeventliostener,forEach等

将每个文件单独用对象封装供其他文件使用
举例：
导出
//a.js
aModule={};

(function(aModule){
aModule.init=function(){}
})(aModule)

导入
<script type=”text/javascript” src=”a.js”></script>
var init=aModule.init;

class.js(IE8没有classList属性)
elm.classList.remove(name); //兼容IE8
改为：
if (elm.classList) {
elm.classList.remove(name);
} else { //兼容IE8
elm.className = elm.className.replace(name, “”);
}

elm.classList[cur ? ‘add’ : ‘remove’](name);
改为:
if (elm.classList) {
elm.classList[cur ? ‘add’ : ‘remove’](name);
} else { //兼容IE8
if (cur) { //add
elm.className += ‘ ‘ + name;
} else { //remove
elm.className = elm.className.replace(name, “”);
}
}

dataset.js(IE8没有dataset属性)
delete elm.dataset[key];

elm.dataset[key] = dataset[key];
改为：
_updateDataset(elm, ‘remove’, key)

_updateDataset(elm, ‘set’, key, dataset[key])

//兼容IE8
function _updateDataset(elm, type, key, val) {
if (elm.dataset) {
if (‘remove’ == type) {
delete elm.dataset[key];
} else {
elm.dataset[key] = val;
}
} else {
var name;
name = ‘data-‘ + key;
if (‘remove’ == type) {
elm.removeAttribute(name);
} else {
elm.setAttribute(name, val);
}
}
}

eventlistener.js(这里比较奇怪的就是绑定在handler函数上的vnode属性在IE8上无法访问，所以我在这里采用的是将vnode主动传递进去，通过闭包保存)
var listener = vnode.listener = oldVnode.listener || createListener();
改为：
var listener = vnode.listener = oldVnode.listener || createListener(vnode);
function createListener() { //兼容IE8，访问不到handler.vnode,得传进来
return function handler(event) {
handleEvent(event, handler.vnode);
}
}

改为：

function createListener(vnode) { //兼容IE8，访问不到handler.vnode,得传进来
return function handler(event) {
if (handler.vnode) {
handleEvent(event, handler.vnode);
} else {
handleEvent(event, vnode);
}
}
}