什么是shadow DOM？ 将一组隐藏的、独立的DOM结构附加到某个元素上。比如在video元素的shadow DOM上，就隐藏了许多对视频控制的按钮和控制器等。 shadow host：一个常规的DOM节点，shadow DOM 会被附加到这个节点上 shadow tree：shadow DOM ...
分类：
其他好文 时间：
2020-04-20 21:19:48
阅读次数：
85
一、Refs的作用 通过Refs，可以访问到 1. DOM节点。 2. render方法中创建的React元素。（class组件的实例） 二、访问节点或者实例有什么用呢？为什么要使用Refs来访问呢？ 访问节点或者实例的需求场景： 管理焦点，文本选择或媒体播放。 触发强制动画。 集成第三方 DOM ...
分类：
其他好文 时间：
2020-04-17 22:07:02
阅读次数：
80
虚拟DOM 虚拟DOM(下面简化称为Vnode)简而言之 ，就是用js去描述一个dom节点树，而DOM变化的对比，都放在js层来做。 传统的dom节点，是这样的 <div> <p className='text'>写个啥内容啊</p> </div>Vnode是长这样的 { nodeName:'div ...
分类：
其他好文 时间：
2020-04-14 20:40:13
阅读次数：
78
框架类： vue 原理 webpack 原理 css： 盒模型、js 获取对应宽高 // 通过DOM节点的 style 样式获取 // 只能获取行内样式，不能获取内嵌的样式和外链的样式 element.style.width/height; // window.getComputedStyle(el ...
分类：
其他好文 时间：
2020-04-14 12:18:19
阅读次数：
57
模板转换成视图的过程 在底层实现中Vue会将模板编译成渲染函数，当然我们也可以不写模板，直接写渲染函数，以获得更好的控制。 渲染函数：渲染函数是用来生成Virtual DOM的；VNode虚拟节点：vnode可以理解成dom节点的描述对象，它描述了应该怎样去创建真实的DOM节点；patch(patc ...
分类：
其他好文 时间：
2020-04-12 14:37:06
阅读次数：
93
重绘（Repaint)和回流（Reflow） 什么是回流 通过构造render tree，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。 当render tree中的一部分(或全部)因为元素的规模尺寸，布 ...
分类：
其他好文 时间：
2020-04-08 12:29:54
阅读次数：
101
关于JointJs的介绍，有一篇比较好JointJS介绍 第一个类Paperjoint.dia.Paper 属性 el css选择器，Paper将在该Css选择的Container下画SVG图.例如:el='#paper',则在<div id='paper'></div>下面添加SVG DOM节点 ...
分类：
Web程序 时间：
2020-04-07 09:42:41
阅读次数：
89
HTML DOM 导航 通过 HTML DOM，您能够使用节点关系在节点树中导航。 HTML DOM 节点列表 getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。 下面的代码选取文档中的所有 <p> 节点： 实例 var x=document.getElemen ...
分类：
Web程序 时间：
2020-04-05 13:43:02
阅读次数：
78
v-if 是真正的条件渲染，会控制这个 DOM 节点的存在与否。因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show 就简单得多——不管初始条件是什么，元素总是会被渲染 ...
分类：
其他好文 时间：
2020-04-02 15:43:26
阅读次数：
87
在元素渲染章节中，我们了解了一种更新UI界面的方法，通过调用ReactDOM.render()修改我们想要的 元素 在上述代码中我们封装了一个clockCom的class组件，每次组件更新时候render方法都会被调用，但只要在相同的DOM节点中渲染,就 仅有一个ClockCom组件的class实例 ...
分类：
其他好文 时间：
2020-04-02 01:31:52
阅读次数：
91
