snabbdom.js(四)

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

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

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

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

2. 将每个文件单独用对象封装供其他文件使用

   举例：
   导出
   //a.js
      aModule={};
      
      (function(aModule){
           aModule.init=function(){}
      })(aModule)
   
   导入
      <script type="text/javascript" src="a.js"></script>
      var init=aModule.init;

3. 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, "");
        }
    }

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

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