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.classListcur ? ‘add’ : ‘remove’; 改为: if (elm.classList) { elm.classListcur ? ‘add’ : ‘remove’; } 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); } } }