乐趣区

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);
}
}
}

退出移动版