DOM
关注
分享
扫一扫
SeriousLose
✎﹏小飞飞 认真你就输了，一直认真你就赢了
展开
-
JS EventListener
addEventListener 添加监听的事件 阻止默认事件preventDefault() 阻止事件冒泡stopPropagation() removeEventListener 移出事件 💡 removeEventListener 需要知道你需要移出的是哪个事件处理函数。匿名函数丢弃了自身函数名，是移出不了。 💡 IE9以下的IE浏览器不支持 addEventListener...原创 2022-06-26 23:39:50 · 588 阅读 · 0 评论 -
Snabbdom（虚拟dom-6-createElm函数）
createElm function createElm(vnode: VNode, insertedVnodeQueue: VNodeQueue): Node { let i: any; let data = vnode.data; if (data !== undefined) { // 执行用户设置的init钩子函数 const init = data.hook?.init; /...原创 2021-08-15 08:37:32 · 169 阅读 · 0 评论 -
Snabbdom（虚拟dom-5-patch函数）
patch(oldVnode,newVnode) 俗称打补丁，把新节点中变化的内容渲染到真实DOM,最后返回新节点作为下一次处理的旧节点 对比新旧VNode是否相同节点（节点的key和sel相同） 如果不是相同节点，删除之前的内容，重新渲染 如果是相同节点，再判断新的VNode是否有text，如果有并且和oldVnode的test不同，直接更新文本内容； ...原创 2021-08-15 08:36:18 · 242 阅读 · 0 评论 -
Snabbdom（虚拟dom-4-init函数）
import { DOMAPI, htmlDomApi } from "./htmldomapi";import * as is from "./is";import { Module } from "./modules/module";import { vnode, VNode } from "./vnode";// 导入依赖的模块// 定义类型type NonUndefined<T> = T extends undefined ? never : T;funct..原创 2021-08-15 08:34:25 · 217 阅读 · 0 评论 -
Snabbdom（虚拟dom-3-vnode函数）
import { AttachData } from "./helpers/attachto";import { Hooks } from "./hooks";import { Attrs } from "./modules/attributes";import { Classes } from "./modules/class";import { Dataset } from "./modules/dataset";import { On } from "./modules/eventlist.原创 2021-08-15 08:33:09 · 152 阅读 · 0 评论 -
Snabbdom（虚拟dom-h函数）
h函数 vue中使用h()函数 new Vue({router,store,render:h=>h(App)}).$mount(“#app”) h()函数最早见于hyperscript,使用JavaScript创建超文本 Snabbdom中的h()函数不是用来创建超文本，而是创建VNode 函数的...原创 2021-08-15 07:02:09 · 299 阅读 · 0 评论 -
Snabbdom（虚拟dom-源码）
Snabbdom源码解析 如何学习？ 宏观了解 带目标看源码 看源码过程要不求甚解 要多进行调试 多参考相关资料 Snabbdom的核心 使用h()函数创建JavaScript对...原创 2021-08-15 07:00:39 · 206 阅读 · 0 评论 -
Snabbdom（虚拟dom）
创建项目 创建项目目录 snabbdom md snabbdom 初始化package.json npm init 或 yarn init 安装打包工具 npm install parcel-bundler --save-dev 或 yarn add...原创 2021-08-14 16:36:28 · 386 阅读 · 0 评论 -
Virtual DOM（虚拟dom-2）
为什么要使用虚拟DOM 手动操作DOM比较麻烦，还需要考虑浏览器兼容性问题，有了jQuery等库简化DOM操作，随着项目的复杂DOM操作复杂提升。 为了简化DOM的复杂操作出现了各种MVVM框架，MVVM框架解决了视图和状态的同步问题； 为了简化视图操作，使用了模板引擎，但是模板引擎没解决跟踪状态变化的问题，于是Virtual DOM出现了。 ...原创 2021-08-12 23:50:25 · 147 阅读 · 0 评论 -
Virtual DOM（虚拟dom-1）
什么是虚拟DOM？ 虚拟DOM是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫虚拟DOM。 DOM 修改流程 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v...原创 2021-08-12 09:01:30 · 181 阅读 · 0 评论 -
Dom-to-image
实现原理 使用svg的一个特性，允许在<foreignobject>标签中包含任意的html内容。 主要是 [XMLSerializer |dom转为svg] dom 转换为XHTML XMLSerializer 对象使你能够把一个 XML 文档或 Node 对象转化或“序列化”为未解析的 XML 标记的一个字符串 ...原创 2021-07-26 15:39:01 · 1512 阅读 · 0 评论 -
SetTimeout（延迟计时器-最小延迟）
setTimeout 是有最小延迟时间? MDN 文档 setTimeout 实际延时比设定值更久的原因：最小延迟时间 在浏览器中，setTimeout()/setInterval() 的每调用一次定时器的最小间隔是 4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度）。 HTML Standard Timers ...原创 2021-05-14 10:00:20 · 1733 阅读 · 0 评论 -
CSS Scrollbar (滚动条)
webkit内核浏览器（Chrome、Edge） 类名 作用 ::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。 ::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。原创 2021-05-12 15:18:13 · 8929 阅读 · 0 评论 -
DOM节点统计
DOM 的体积过大会影响页面性能， 假如你想在用户关闭页面时统计（计算并反馈给服务器） 当前页面中元素节点的数量总和、元素节点的最大嵌套深度以及最大子元素个数， 请用 JS 配合原生 DOM API 实现该需求 （不用考虑陈旧浏览器以及在现代浏览器中的兼容性，可以使用任意浏览器的最新特性；不用考虑 shadow DOM）<html> <head></head> <body> <div> <span>原创 2021-03-23 17:33:33 · 928 阅读 · 0 评论 -
SetInterval（循环计时器）
SetInterval（循环计时器）循环计时器（间隔计时器） setInterval() 参数2个 第1个参数: 函数/字符串 第2个参数: 时间间隔(单位ms) 省略时是10ms,小于10,也是10ms 返回值 当前浏览器给计时器分配的编号 谷歌:1开始 FF:2开始 IE:随机分配一个比较大的数 注意: 1.间隔计时器,原创 2020-12-24 13:35:38 · 2692 阅读 · 0 评论 -
SetTimeout（延迟计时器）
SetTimeout（延迟计时器）延迟计时器 延迟多少时间执行,执行函数的操作,而且只执行一次 setTimeout() 第1个参数: 函数 第2个参数: 延迟时间 单位是ms 清除延时计时器 clearTimeout();最小时间为 4 毫秒，setTimeout是宏任务，需要到下次Loop，才能调用；setTimeout 的返回值是一个数字，这个值为timeoutID// 如果当前任务执行时间过久，会延迟到期定时器任务的执行fu原创 2020-12-24 13:25:38 · 3888 阅读 · 2 评论