- 博客(20)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 重学前端 26 # CSSOM
说明每天10分钟，重构你的前端知识体系专栏笔记。一、介绍CSSOM 是 CSS 的对象模型，在 W3C 标准中，它包含两个部分：描述样式表和规则等 CSS 的模型部分（CSSOM），和跟元素视图相关的 View 部分（CSSOM View）。二、CSSOM2.1、创建样式表用 style 标签和 link 标签创建样式表<style title="Hello">a { color:red;}</style><link rel="styles
2019-05-30 21:25:32
457
3
原创 重学前端 25 # CSS的正常流
说明每天10分钟，重构你的前端知识体系专栏笔记。一、正常流的行为正常流的排版行为：依次排列，排不下了换行。1.1、float在正常流基础上，有 float 相关规则，使得一些盒占据了正常流需要的空间，可以把 float 理解为文字环绕。1.2、vertical-align有 vertical-align 相关规则规定了如何在垂直方向对齐盒。基线、文字顶 / 底、行顶 / 底等概念。1.3、margin 折叠1、参考文章：CSS中margin折叠问题记录2、块级格式上下
2019-05-29 20:42:26
354
原创 重学前端 24 # HTML里的链接元素
说明每天10分钟，重构你的前端知识体系专栏笔记。一、介绍链接是 HTML 中的一种机制，它是 HTML 文档和其它文档或者资源的连接关系。链接两种类型：一种是超链接型标签，一种是外部资源链接。二、link 标签2.1、超链接型 link 标签超链接型 link 标签是一种被动型链接。link 标签具有特定的 rel 属性，会成为特定类型的 link 标签。1、canonical 型 link提示页面它的主 URL，在网站中常常有多个 URL 指向同一页面的情况，搜索引擎访问这
2019-05-27 02:39:10
466
原创 重学前端 23 # 狭义的文档对象DOM
说明每天10分钟，重构你的前端知识体系专栏笔记。一、DOM API 介绍文档对象模型：用来描述文档，特指 HTML 文档，同时它又是一个对象模型，使用对象这样的概念来描述 HTML 文档。DOM API 大致包含 4 个部分节点：DOM 树形结构中的节点相关 API。事件：触发和监听事件相关 API。Range：操作文字范围相关 API。遍历：遍历 DOM 需要的 API。HTML 文档是一个由标签嵌套而成的树形结构，因此，DOM 也是使用树形的对象模型来描述一个 HTML
2019-05-23 02:08:00
177
原创 重学前端 22 # 选择器的机制
说明每天10分钟，重构你的前端知识体系专栏笔记。一、引言本文讲一讲选择器的几个机制：选择器的组合、选择器的优先级和伪元素。二、选择器的组合2.1、选择器列表选择器列表：用逗号分隔的复杂选择器序列；复杂选择器则是用空格、大于号、波浪线等符号连接的复合选择器；复合选择器则是连写的简单选择器组合。2.2、优先级第一优先级无连接符号第二优先级空格~+>||第三优先级,2.3、复杂选择器的连接符号空格：表示选中所有符合条件的后代节点。（后
2019-05-21 21:39:12
268
原创 重学前端 21 # 如何选中svg里的a元素？
说明每天10分钟，重构你的前端知识体系专栏笔记。一、引言本文讲一讲css选择器的一些机制。二、选择器的基本意义根据一些特征，选中元素树上的一批元素。选择器的结构分类简单选择器：针对某一特征判断是否选中元素。复合选择器：连续写在一起的简单选择器，针对元素自身特征选择单个元素。复杂选择器：由“（空格）”“ >”“ ~”“ +”“ ||”等符号连接的复合选择器，根据父元素或者前序元素检查单个元素。选择器列表：由逗号分隔的复杂选择器，表示“或”的关系。三、简单选择器3
2019-05-20 01:37:36
1011
原创 重学前端 20 # try里面放return，finally还会执行吗？
说明每天10分钟，重构你的前端知识体系专栏笔记。一、引言本文讲一讲 JavaScript 语句。二、Completion 类型// return 执行了但是没有立即返回，而是先执行了finallyfunction kaimo(){ try{ return 0; } catch(err) { console.log(err) } finally { console.log("a") }}console.log(kaimo()); // a 0
2019-05-19 01:05:09
2064
2
原创 重学前端 19 # JavaScript中的函数
说明每天10分钟，重构你的前端知识体系专栏笔记。一、函数1.1、普通函数用 function 关键字定义的函数。function kaimo(){ // code}1.2、箭头函数用 => 运算符定义的函数。const kaimo = () => { // code}1.3、方法在 class 中定义的函数。class KK { kaimo(){ //code }}1.4、生成器函数用 fun
2019-05-18 03:03:43
315
原创 重学前端 18 # JavaScript的闭包和执行上下文
说明每天10分钟，重构你的前端知识体系专栏笔记。一、函数执行过程相关知识二、闭包（closure）闭包其实只是一个绑定了执行环境的函数，闭包与普通函数的区别是，它携带了执行的环境，就像人在外星中需要自带吸氧的装备一样，这个函数也带有在程序中生存的环境。2.1、古典的闭包环境部分环境标识符列表表达式部分2.2、JavaScript 中闭包环境部分环境：函数的词法环境（执行上下文的一部分）标识符列表：函数中用到的未申明的变量表达式部分：函数体三、执行上
2019-05-17 03:12:45
278
原创 重学前端 17 # Promise里的代码为什么比setTimeout先执行？
说明每天10分钟，重构你的前端知识体系专栏笔记。一、引言一个 JavaScript 引擎会常驻于内存中，它等待着 宿主 把 JavaScript 代码或者函数传递给它执行。1、ES3版本以及之前，JavaScript 本身还没有异步执行代码的能力，宿主环境传递给 JavaScript 引擎，然后按顺序执行，由宿主发起任务。2、ES5之后，JavaScript 引入了 Promise，不需要浏览器的安排，JavaScript 引擎本身也可以发起任务。3、采纳JSC引擎术语，把宿主发起的任务
2019-05-16 02:13:03
355
原创 重学前端 16 # HTML元信息类标签
说明每天10分钟，重构你的前端知识体系专栏笔记。一、什么是元信息类标签元信息，是指描述自身的信息。元信息类标签，就是 HTML 用于描述文档自身的一类标签。二、head 标签作为盛放其它语义类标签的容器使用。2.1、注意1、head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title，并且最多只能包含一个 base。2、如果文档作为 iframe，或者有其他方式指定了文档标题时，可以允许不包含 title 标签。三、title 标签titl
2019-05-15 02:11:40
273
原创 重学前端 15 # 浏览器工作解析（五）
说明每天10分钟，重构你的前端知识体系专栏笔记。一、回顾大致梳理一下前面四篇文章主要讲的内容。把 URL 变成字符流把字符流变成词（token）流把词（token）流构造成 DOM树把不含样式信息的 DOM 树应用 CSS 规则，变成包含样式信息的 DOM 树并且根据样式信息，计算了每个元素的位置和大小。二、概括本文是最后的步骤，就是根据这些样式信息和大小信息，为每个元素在内存中渲染它的图形，并且把它绘制到对应的位置。三、渲染本文中出现的“渲染”一词，统一指的是它在
2019-05-14 02:00:26
172
原创 重学前端 14 # 浏览器工作解析（四）
说明每天10分钟，重构你的前端知识体系专栏笔记。一、概括本文主要聊聊浏览器是怎样确定每一个元素的位置的二、基本概念2.1、排版浏览器把排版的内容（文字、图片、图形、表格等等）确定它们位置的过程，叫作排版。浏览器最基本的排版方案是正常流排版。2.2、盒模型浏览器又可以支持元素和文字的混排（元素被定义为占据长方形的区域），还允许边框、边距和留白，这个就是所谓的盒模型。2.2.1、绝对定位元素绝对定位元素把自身从正常流抽出，直接由 top 和 left 等属性确定自身的位置，
2019-05-13 20:52:15
210
原创 重学前端 13 # 浏览器工作解析（三）
说明每天10分钟，重构你的前端知识体系专栏笔记。一、概括本文主要聊聊浏览器是如何把 CSS 规则应用到节点上，并给这棵朴素的 DOM 树添加上 CSS 属性的。二、CSS构建过程构建 DOM 的过程是：从父到子，从先到后，一个一个节点构造，并且挂载到 DOM 树上的，那么这个过程中，依次拿到上一步构造好的元素，去检查它匹配到了哪些规则，再根据规则的优先级，做覆盖和调整。2.1、选择器空格: 后代，选中它的子节点和所有子节点的后代节点>: 子代，选中它的子节点+：直接后
2019-05-13 01:09:51
178
原创 重学前端 12 # 浏览器工作解析（二）
说明每天10分钟，重构你的前端知识体系专栏笔记。一、概括本文主要聊聊浏览器如何解析请求回来的 HTML 代码以及 DOM 树又是如何构建的。二、解析代码2.1、词（token）是如何被拆分的“词”（指编译原理的术语 token，表示最小的有意义的单元），种类大约只有 标签开始、属性、标签结束、注释、CDATA节点几种。接下拆解下面代码：<p class="a">text text text</p>这段代码依次拆成词（token）：<p“标签
2019-05-12 04:31:26
292
原创 重学前端 11 # 浏览器工作解析（一）
说明每天10分钟，重构你的前端知识体系专栏笔记。一、URL到网页呈现发生了什么？1.1、过程1、浏览器首先使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面2、把请求回来的 HTML 代码经过解析，构建成 DOM 树3、计算 DOM 树上的 CSS 属性4、最后根据 CSS 属性对元素逐个进行渲染，得到内存中的位图5、一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度6、合成之后，再绘制到界面上1.2、流程图winter用访问极客时间网站为例整理了一下流程
2019-05-10 02:09:34
292
原创 重学前端 10 # CSS语法关于带@的规则
说明每天10分钟，重构你的前端知识体系专栏笔记。一、CSS相关标准文档1.0、W3C的网站关于CSS相关的标准链接1.1、CSS语法的最新标准链接1.2、CSS规则CSS 的顶层样式表由两种规则组成的规则列表构成，一种被称为 at-rule，也就是 at 规则，另一种是 qualified rule，也就是普通规则。1.2.0、at-rule由一个 @ 关键字和后续的一个区块组成，如果没有区块，则以分号结束。1.2.1、qualified rule指普通的 CSS 规则，由
2019-05-09 02:27:20
434
2
原创 重学前端 9 # JavaScript中的对象分类
说明每天10分钟，重构你的前端知识体系专栏笔记。一、javaScript对象分类介绍1.0、宿主对象（host Objects）由 JavaScript 宿主环境提供的对象，它们的行为完全由宿主环境决定。1.1、内置对象（Built-in Objects）由 JavaScript 语言提供的对象。1.1.0、固有对象（Intrinsic Objects ）由标准规定，随着 JavaScript 运行时创建而自动创建的对象实例。1.1.1、原生对象（Native Object
2019-05-08 02:55:40
694
2
原创 重学前端 8 # JavaScript中的原型和类
说明每天10分钟，重构你的前端知识体系专栏笔记。一、什么是原型？1.0、定义原型是指一个词语或一个类型意义的所有典型模型或原形象，是一个类型的组典型特征1.1、基于类的编程语言诸如 C++、Java 等流行的编程语言是使用类的方式来描述对象，基于类的编程提倡使用一个关注分类和类之间关系开发模型。1.2、基于原型的编程语言如 JavaScript 编程语言是利用原型来描述对象，基于原型的编程看起来更为提倡程序员去关注一系列对象实例的行为，而后才去关心如何将这些对象，划分到最近的使
2019-05-06 20:53:40
265
原创 重学前端 7 # JavaScript对象：面向对象还是基于对象？
说明每天10分钟，重构你的前端知识体系专栏笔记。1、学习JavaScript面向对象时是否有这样的疑惑？为什么 JavaScript（直到 ES6）有对象的概念，但是却没有像其他的语言那样，有类的概念呢？为什么在 JavaScript 对象里可以自由添加属性，而其他的语言却不能呢？2、什么是面向对象？2.1、JavaScript 对象的特征2.1.1、对象的特征（来自《面向对象分析与设计》一书）对象具有唯一标识性：即使完全相同的两个对象，也并非同一个对象。对象有状态：对象具有状态
2019-05-05 18:05:34
261
流沙：用于 CSDN 博客网站的暗黑和明亮主题切换的 chrome 浏览器插件。
2022-08-15
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
2022-03-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人