深入理解滚动 scroll - 前端 - 掘金
前面的话 前面两篇博文分别介绍过偏移大小、客户区大小。本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分 scro...
你真知道元素有多宽？ - 前端 - 掘金
Web端对于宽度有各种定义，比如innerWidth，outerWidth，clientWidth，offsetWidth。不同语境下有不同的含义，PC端与移动端的表现也有不同，还可能与缩放水平、滚动条、viewport设置等因素相关。经过一番试验与探索，得到...
(译) 只有 20 行的 JavaScript 模板引擎 - 阅读 - 掘金
原文链接：JavaScript template engine in just 20 lines 前言 我仍旧在为我的JS预处理器AbsurdJS进行开发工作。它原本是一个CSS预处理器，但之后它扩展成为了CSS/HTML预处理器，很快它将支持JS到CSS/H...
《JavaScript 闯关记》之 DOM（上） - 掘金
DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API。DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。 节点层次 DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类...
《JavaScript 闯关记》之 DOM（下） - 掘金
Element 类型 除了 Document 类型之外，Element 类型就要算是 Web 编程中最常用的类型了。Element 类型用于表现 XML 或 HTML 元素，提供了对元素标签名、子节点及特性的访问。Element 节点具有以下特征： node...
原生 JS 与 jQuery 操作 DOM 对比 - 前端 - 掘金
一、创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $(&#...
DOM 事件深入浅出（一） - 前端 - 掘金
在项目开发时，我们时常需要考虑用户在使用产品时产生的各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。本文就将带大家深入浅出地了解DOM事件的那些属性和方法。 首先在...
Virtual DOM 详解 - 前端 - 掘金
Virtual DOM (VDOM aka VNode) is magical ✨ but is also complex and hard to understand😱. React, Preact and similar JS libraries use...
HTML5 DOM 元素类名相关操作 API classList 简介 - 前端 - 掘金
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=3483 一、其实事情的发展就像切水果 如果我们把元素的类名操作比作“切水果”游...
掌握 DOM 操作 - 前端 - 掘金
原文DOM操作并没有你想象的那么难。 初步介绍许多web开发者认为DOM真的很难（或者很慢），你需要很多框架来驯服它。然后他们花了很多时间来学习框架，一两年过去之后，另一个框架变得流行，你需要从头开始学习一切。这样重复几次，JavaScript疲劳就出现了。...
从零开始一步一步写一个简单的 Virtual DOM 实现 - 阅读 - 掘金
原文地址 Github 系列文章地址 在阅读此文之前，你要明确两个概念。这篇文章不会长篇大论地跟你介绍React中的源代码实现或者其他一些类似的Virtual DOM的实现。它们过于复杂了，其实一个Virtual DOM的实现只要不超过50行代码即可。好了，...
为什么说 DOM 操作很慢 - 前端 - 掘金
一直都听说DOM很慢，要尽量少的去操作DOM，于是就想进一步去探究下为什么大家都会这样说，在网上学习了一些资料，这边整理出来。 首先，DOM对象本身也是一个js对象，所以严格来说，并不是操作这个对象慢，而是说操作了这个对象后，会触发一些浏览器行为，比如布局（...
React 中一个没人能解释清楚的问题——为什么要使用 Virtual DOM - 前端 - 掘金
有一天，我的朋友向我提了一个有关React的问题： 组件化， 单向数据绑定，这些我都懂了。但是React为什么要用Virtual DOM呢？ 我的回答非常套路，“因为直接操作DOM比较低效，比较慢。”。 “但是现在的js引擎总是搞个大新闻，说自己的性能比之...
构建一个使用 Virtual-DOM 的前端模版引擎 - 前端 - 掘金
作者：戴嘉华 转载请注明出处并保留原文链接（ #14 ）和作者信息。 目录 1. 前言 2. 问题的提出 3. 模板引擎和 Virtual-DOM 结合 —— Virtual-Template 4. Virtual-Template 的实现 4.1...
javascript 常用 DOM 操作整理 - 前端 - 掘金
1.抽取了DOM操作中常用的部分2.DOM属性和方法的对象归属可能并不完全准确3.某些兼容性和特点做了标识(绝大部分的兼容性是ie8~9上下) 节点类型 节点类型 节点值 标签节点(Element) 1 属性节点(Attr) 2 文本节点...
vue 早期源码学习系列之五：批处理更新 DOM - 前端 - 掘金
前言 在上一篇 #87 中，我们最后谈到，有一个问题还没有解决，我们来看看是什么问题。如下图所示。 我们可以看到，在函数test中，前后两次更改了user.name的值，对应的DOM元素的更新也执行了两次。（注意，这里的DOM元素更新指的是内存中DOM元...
从零开始一步一步写一个简单的 Virtual DOM 实现 2 :Props&Event 处理 - 前端 - 掘金
第一篇地址 第二部分原文：write-your-virtual-dom-2-props-events 完整的示例代码地址 首先我们要回顾下前文讲的一个有些偏差的小点，假设我们在JSX中只写一个最简单的Div: <div></div>...
事件冒泡、事件捕获和事件代理 - 前端 - 掘金
前言事件流有事件捕获和事件冒泡两种方式，利用事件流的这个特点我们可以设置事件代理。事件代理可以减少事件处理器的数量，提高 JS 脚本的性能。 在学习高程的时候，就有这方面的详细介绍，不过最近又看到一篇文章，对事件捕获和事件冒泡做了很详细的解释，也值得一看，所以...
一起理解 Virtual DOM - 前端 - 掘金
前言 React 好像已经火了很久很久，以致于我们对于 Virtual DOM 这个词都已经很熟悉了，网上也有非常多的介绍 React、Virtual DOM 的文章。但是直到前不久我专门花时间去学习 Virtual DOM，才让我对 Virtual DOM ...
DOM 事件深入浅出（二） - 前端 - 掘金
在DOM事件深入浅出（一）中，我主要给大家讲解了不同DOM级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。本文将继续介绍DOM事件中的知识点，主要侧重于DOM事件中Event对象的属性和方法。 那么什么是DOM事件中Event对象呢？事件对象（...
深入研究 Virtual DOM - 前端 - 掘金
对Virtual DOM这个名词并不陌生，但是有什么深入的理解谈不上。看到medium上rajaraodv写的 The Inner Workings Of Virtual DOM这篇文章，比较深入的介绍了Virtual DOM的各个方面，在此翻译一下。...
网友评论