标签: js

babel 处理流程管窥

原理babel 处理三步骤:parse 解析、transform 转换、generate 生成。 解析过程基于 @babel/parser 做词法分析、语法分析。词法分析将源程序解析成令牌流;语法分析将令牌流转换成 AST。 转换过程基于 @babel/traverse 遍历 AST,对节点进行添加、更新及移除等操作。此时插件将介入工作。 生成过程基于 @babel/generator 深度遍历

html5

功能检测功能检测有四种方式: 检测全局对象(如 window、navigator)上是否有某属性,示例:geolocation 功能检测 创建一个元素,检测它是否包含某属性,示例:canvas 功能检测 创建一个元素,检测它是否包含某方法,示例:vedio format 功能检测 创建一个元素,为它设置属性,检测这个属性值是否发生改变,示例:input type 功能检测 DETECTING

事件模块

标准的现代浏览器为事件提供了 addEventListener、removeEventListener 等接口。 addEventListener 将事件监听器注册到 EventTarget 对象上,而 Node 接口继承了 EventTarget。事件监听器的 this 指向触发事件的元素引用。addEventListener 可以通过 capture 选项设置是否在捕获阶段执行(默认在冒泡阶段

节点、属性、样式模块

节点、属性、样式在 DOM 接口或节点操作类库或 MVVM 框架中都是相互独立的模块,模块之间边界清晰,模块与环境之间通过几个主要接口进行通信,没有错综的关联线条。其处理的复杂度在于,模块内部需要对节点类型、属性、样式的多样性以及兼容性问题作出处理。针对多样性的一般处理手法是对共性进行归类(制作不同的编程接口,或制作不同的类以加区别)、对个性进行特殊处理(通过 hooks 留口子以应用 map 映

DOM 随笔

写在篇首浅近地看,面向对象、面向过程对应着两种思维模式,前者描述事物,后者描述变化。类比我们自小接触的数学方程、力学计算,自变量 x 或物体的质量 m 都是不可再分割的单一属性客体,我们原本就亲近面向过程的思维模式。虽然简单地把小车假想成一个质点可以描述它的运动状态,但是想要打造一辆小车,那就不止于表述小车(系统与环境)的外部表现,还要理清小车(系统)的内部特征。面向对象本身趋近于外在事物在我们头

Reflect, Proxy

ReflectES6 提供的 API,集成语言层面的对象操作(操作与 Proxy 一一对应,且为函数形式)。 Reflect.get(target, name, receiver): 获取属性。 Reflect.set(target, name, value, receiver): 对属性赋值。 Reflect.defineProperty(target, name, desc): 修改属性的描

修饰器

概述修饰器是 es7 中的一个提案,其本质为编译期间执行的一个函数,用于装饰类、方法、属性等,不能用于装饰函数(因为函数存在声明提升)。 使用 decorator(target, property?, desciptor?){} 语句声明修饰器函数,其中,参数 target 为目标函数,property 为属性,desciptor 为属性描述符,后两个参数用于装饰方法或属性的情景下。装饰类,在修饰

typescript文档笔记

基础类型ts 基础类型包含 boolean, number, string, array, tuple 元祖, enum, any 任意类型, void 非任意类型(可赋值为 undefined 或 null,通常用于函数无返回值时), undefined, null, never 永不存在值的类型(通常用于函数报错或陷入死循环时), symbol。 其中,数值类型支持十进制、十六进制、八进制和二

flow使用指南

概述flow 是 facebook 推出的 js 代码类型检查工具。 flow 可借助 babel 编译,添加 babel-preset-flow 即可;babel-preset-react 包含 babel-preset-flow。或者借助安装 flow-bin 启动类型检查,flow-remove-types 移除类型标记。 通过在脚本前添加 // @flow 或 / @flow / 将文件标