前言：搜很多的讲事件循环机制的都是宏观从js主线程，微任务，宏任务切入，大概好像听明白了，也能应付一些promise，setTimeout，setInterval等一些的输出顺序判断，但真的精确到页面渲染的某一帧，某一个具体动画渲染去讲，似乎就云里雾里，本文主要参考Jake Archibald 的演讲和各个技术博客结合自己的理解讲述。 我的开发环境：mac+vscode+node（v15.14.0） JavaScript是单线程的语言 JavaScript之所以设计为单线程语言，主要是因为它作为浏览器脚本语言，主要…
前言：在之前的实习生活中，使用了不少公司内部的谷歌插件提升工作效率，回忆与组内老大哥的交流中，询问了个人插件开发的难度如何，其表示基础牢固的话，插件开发与前端的基础技术栈是没有冲突的，可以扩展下自己的技术宽度，于是在毕业前夕的闲余生活，抱着学习的心态，记录下自己学习的过程。 我的开发环境：mac+vscode+node（v15.14.0） 仓库地址：https://github.com/hyh-op/googlePlugin 配置manifest.json manifest.json 清单文件是插件的核心，它定义了…
动画与 Canvas 图形 毋庸置疑，是 HTML5 最受欢迎的新特性。这个元素会占据一块页面区域，让 JavaScript可以动态在上面绘制图片。自身提供了一些 API，但并非所有浏览器都支持这些API，其中包括支持基础绘图能力的 2D 上下文和被称为 WebGL 的 3D 上下文。支持的浏览器的最新版本现在都支持 2D 上下文和 WebGL。 使用 requestAnimationFrame 早期定时动画 以前，在 JavaScript 中创建动画基本上就是使用 setInterval()来控制动画的执行。虽然…
DOM2 和 DOM3 实际上，DOM2和 DOM3 是按照模块化的思路来制定标准的，每个模块之间有一定关联，但分别针对某个 DOM 子集。这些模式如下所示。 DOM Core：在 DOM1 核心部分的基础上，为节点增加方法和属性。 DOM Views：定义基于样式信息的不同视图。 DOM Events：定义通过事件实现 DOM 文档交互。 DOM Style：定义以编程方式访问和修改 CSS 样式的接口。 DOM Traversal and Range：新增遍历 DOM 文档及选择文档内容的接口。 DOM HTM…
前言：22年12月份结束了实习，在等毕业证的这段时间里，自己也是就感兴趣的地方原理进行了一番学习，实操，之前很多的项目里，要么就是原来配置好的，照葫芦画瓢添加路由，要么就是脚手架集成的，自己想从0-1实现一下基本的路由配置，基于技术与时俱进的原则，这里就 react router v6 探索，后续与 react router v5 版本的差别再好好思考一番。 我的开发环境：mac+vscode+node（v16.20.1） 仓库地址：https://github.com/hyh-op/react-router 基本…
DOM DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。 节点层级 <html> <head> <title>Sample Page</title> </head> <body> <p>Hello World!</p> </body> </html> 对应的层级结构： document 节点表示每个文档的根节点。在这里，根节点的唯一子节点是元素，我们称之为文档元素…
BOM window 对象 BOM 的核心是 window 对象，表示浏览器的实例。 window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。 Global 作用域 window 对象被复用为 ECMAScript 的 Global 对象。 如果使用 let 或 const 替代 var，则不会把变量添加给全局对象： let age = 29; const sayAge = () => alert(this.age); …
函数 箭头函数 如果只有一个参数，那也可以不用括号。只有没有参数，或者多个参数的情况下，才需要使用括号 箭头函数也可以不用大括号，但这样会改变函数的行为。使用大括号就说明包含“函数体”，可以在一个函数中包含多条语句，跟常规的函数一样。如果不使用大括号，那么箭头后面就只能有一行代码，比如一个赋值操作，或者一个表达式。而且，省略大括号会隐式返回这行代码的值： // 以下两种写法都有效，而且返回相应的值 let double = (x) => { return 2 * x; }; let triple = (x) …
对象、类与面向对象编程 理解对象 属性的类型 ECMA-262 使用一些内部特性来描述属性的特征。这些特性是由为 JavaScript 实现引擎的规范定义的。因此，开发者不能在 JavaScript 中直接访问这些特性。为了将某个特性标识为内部特性，规范会用两个中括号把特性的名称括起来，比如[[Enumerable]]。属性分两种：数据属性和访问器属性。 数据属性 数据属性有 4个特性描述它们的行为。 [[Configurable]]：表示属性是否可以通过 delete 删除并重新定义，是否可以修改它的特性，以及是…
前言：在想学习一些权威的小而美的源码前，组长给我推荐了clean-code-javascript的文章，对整体的代码规范有所体会了解，之后再去看一些源码，可能会有一些不一样的感悟，于是，空闲之余，我认真看完并提取了中间感悟较深的部分，记录于此。 仓库地址：https://github.com/ryanmcdermott/clean-code-javascript Variables（变量） 见明知意 我们读的代码将比我们写的还要多。我们编写的代码必须具有可读性和可搜索性，这一点很重要。如果不指定对理解程序有意义的变…