snabbdom.js(四)

wuyangchun 發(fā)布于2019-08-23 14:16 / 2279人閱讀

摘要：總共寫了四篇文章都是自己的一些拙見，僅供參考，請多多指教，我這邊也會持續(xù)修正加更新介紹一下基本用法介紹一下渲染原理介紹一下的算法和對值的認(rèn)識介紹一下對于兼容的修改這篇主要是記錄一下針對做了哪些修改增加用來兼容某些功能函數(shù)，例如等將每個文件單

總共寫了四篇文章（都是自己的一些拙見，僅供參考，請多多指教，我這邊也會持續(xù)修正加更新）

介紹一下snabbdom基本用法

介紹一下snabbdom渲染原理

介紹一下snabddom的diff算法和對key值的認(rèn)識

介紹一下對于兼容IE8的修改

這篇主要是記錄一下針對ie8做了哪些修改

增加polyfill.js用來兼容某些功能函數(shù)，例如addeventliostener,forEach等

將每個文件多帶帶用對象封裝供其他文件使用

舉例：
導(dǎo)出
//a.js
   aModule={};
   
   (function(aModule){
        aModule.init=function(){}
   })(aModule)

導(dǎo)入
   
   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函數(shù)上的vnode屬性在IE8上無法訪問，所以我在這里采用的是將vnode主動傳遞進(jìn)去，通過閉包保存)

 var listener = vnode.listener = oldVnode.listener || createListener();

改為：

var listener = vnode.listener = oldVnode.listener || createListener(vnode);

 function createListener() { //兼容IE8，訪問不到handler.vnode,得傳進(jìn)來
     return function handler(event) {
         handleEvent(event, handler.vnode);
     }
 }

 改為：
 
 function createListener(vnode) { //兼容IE8，訪問不到handler.vnode,得傳進(jìn)來
     return function handler(event) {
         if (handler.vnode) {
             handleEvent(event, handler.vnode);
         } else {
             handleEvent(event, vnode);
         }
     }
 }