snabbdom.js(四)

wuyangchun 发布于2019-08-23 14:16 / 2257人阅读

摘要：总共写了四篇文章都是自己的一些拙见，仅供参考，请多多指教，我这边也会持续修正加更新介绍一下基本用法介绍一下渲染原理介绍一下的算法和对值的认识介绍一下对于兼容的修改这篇主要是记录一下针对做了哪些修改增加用来兼容某些功能函数，例如等将每个文件单

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

介绍一下snabbdom基本用法

介绍一下snabbdom渲染原理

介绍一下snabddom的diff算法和对key值的认识

介绍一下对于兼容IE8的修改

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

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

将每个文件多带带用对象封装供其他文件使用

举例：
导出
//a.js
   aModule={};
   
   (function(aModule){
        aModule.init=function(){}
   })(aModule)

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

GPU云服务器云服务器五四青年五四青年中间四位贵州四频道第四部分

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100370.html

Snabbdom.js（一）

摘要：闲聊在学的过程中，虚拟应该是听的最多的概念之一，得知其是借鉴进行开发，故习之。以我的观点来看，多个相同元素渲染时，则需要为每个元素添加值。闲聊：在学vue的过程中，虚拟dom应该是听的最多的概念之一，得知其是借鉴snabbdom.js进行开发，故习之。由于我工作处于IE8的环境，对ES6，TS这些知识的练习也只是浅尝辄止，而snabbdom.js从v.0.5.4这个版本后开始使用TS...

mating 2019-08-23 14:15 评论0 收藏0
React && VUE Virtual Dom的Diff算法统一之路 snabbd

摘要：毫无疑问的是算法的复杂度与效率是决定能够带来性能提升效果的关键因素。速度略有损失，但可读性大大提高。因此目前的主流算法趋向一致，在主要思路上，与的方式基本相同。在里面实现了的算法与支持。是唯一添加的方法所以只发生在中。 VirtualDOM是react在组件化开发场景下，针对DOM重排重绘性能瓶颈作出的重要优化方案，而他最具价值的核心功能是如何识别并保存新旧节点数据结构之间差异的方法，...

shixinzhang 2019-08-23 16:13 评论0 收藏0
Snabbdom.js(三)

摘要：总共写了四篇文章都是自己的一些拙见，仅供参考，请多多指教，我这边也会持续修正加更新介绍一下基本用法介绍一下渲染原理介绍一下的算法和对值的认识介绍一下对于兼容的修改这篇主要是说一下的算法在上一篇中我总结过对比渲染的流程大体分为通过来判断两个是总共写了四篇文章（都是自己的一些拙见，仅供参考，请多多指教，我这边也会持续修正加更新）介绍一下snabbdom基本用法介绍一下snabbdo...

dantezhao 2019-08-23 14:16 评论0 收藏0
snabbdom.js（二）

摘要：如果新旧的和都相同，说明两个相似，我们就可以保留旧的节点，再具体去比较其差异性，在旧的上进行打补丁否则直接替换节点。总共写了四篇文章（都是自己的一些拙见，仅供参考，请多多指教，我这边也会持续修正加更新）介绍一下snabbdom基本用法介绍一下snabbdom渲染原理介绍一下snabddom的diff算法和对key值的认识介绍一下对于兼容IE8的修改这篇我将以自己的思路去...

浠ラ箍 2019-08-23 14:15 评论0 收藏0
snabbdom源码粗读

摘要：这个大概是的钩子吧在每一次插入操作的时候都将节点这类型方法可以看出来是在调用对应的方法因为开始的时候就导入进来了插入节点操作的时候都需要加入子节点有子元素也就是的时候递归调用循环子节点生成对应着一些操作之后都要触发钩子函数。 snabbdom 本文的snabbdom源码分析采用的是0.54版本（即未用ts重写前的最后一版）前期了解 snabbdom被用作vue的虚拟dom。本文的一个...

svtter 2019-08-22 17:19 评论0 收藏0