摘要:总共写了四篇文章都是自己的一些拙见,仅供参考,请多多指教,我这边也会持续修正加更新介绍一下基本用法介绍一下渲染原理介绍一下的算法和对值的认识介绍一下对于兼容的修改这篇主要是记录一下针对做了哪些修改增加用来兼容某些功能函数,例如等将每个文件单
总共写了四篇文章(都是自己的一些拙见,仅供参考,请多多指教,我这边也会持续修正加更新)
介绍一下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);
}
}
}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/100370.html
摘要:闲聊在学的过程中,虚拟应该是听的最多的概念之一,得知其是借鉴进行开发,故习之。以我的观点来看,多个相同元素渲染时,则需要为每个元素添加值。 闲聊:在学vue的过程中,虚拟dom应该是听的最多的概念之一,得知其是借鉴snabbdom.js进行开发,故习之。由于我工作处于IE8的环境,对ES6,TS这些知识的练习也只是浅尝辄止,而snabbdom.js从v.0.5.4这个版本后开始使用TS...
摘要:毫无疑问的是算法的复杂度与效率是决定能够带来性能提升效果的关键因素。速度略有损失,但可读性大大提高。因此目前的主流算法趋向一致,在主要思路上,与的方式基本相同。在里面实现了的算法与支持。是唯一添加的方法所以只发生在中。 VirtualDOM是react在组件化开发场景下,针对DOM重排重绘性能瓶颈作出的重要优化方案,而他最具价值的核心功能是如何识别并保存新旧节点数据结构之间差异的方法,...
摘要:总共写了四篇文章都是自己的一些拙见,仅供参考,请多多指教,我这边也会持续修正加更新介绍一下基本用法介绍一下渲染原理介绍一下的算法和对值的认识介绍一下对于兼容的修改这篇主要是说一下的算法在上一篇中我总结过对比渲染的流程大体分为通过来判断两个是 总共写了四篇文章(都是自己的一些拙见,仅供参考,请多多指教,我这边也会持续修正加更新) 介绍一下snabbdom基本用法 介绍一下snabbdo...
摘要:如果新旧的和都相同,说明两个相似,我们就可以保留旧的节点,再具体去比较其差异性,在旧的上进行打补丁否则直接替换节点。 总共写了四篇文章(都是自己的一些拙见,仅供参考,请多多指教,我这边也会持续修正加更新) 介绍一下snabbdom基本用法 介绍一下snabbdom渲染原理 介绍一下snabddom的diff算法和对key值的认识 介绍一下对于兼容IE8的修改 这篇我将以自己的思路去...
摘要:这个大概是的钩子吧在每一次插入操作的时候都将节点这类型方法可以看出来是在调用对应的方法因为开始的时候就导入进来了插入节点操作的时候都需要加入子节点有子元素也就是的时候递归调用循环子节点生成对应着一些操作之后都要触发钩子函数。 snabbdom 本文的snabbdom源码分析采用的是0.54版本(即未用ts重写前的最后一版) 前期了解 snabbdom被用作vue的虚拟dom。本文的一个...
阅读 2300·2021-11-15 11:36
阅读 1496·2021-10-14 09:42
阅读 4351·2021-09-30 09:52
阅读 1857·2021-09-24 10:24
阅读 1052·2021-09-02 09:56
阅读 2837·2019-08-30 13:11
阅读 3131·2019-08-30 13:06
阅读 1015·2019-08-30 12:56
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要