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