分类: frontend

前端工程体系

我常常执着于部分(比如昏天暗地地解读一个源码),不能跳出来看看整体。这篇文章旨在于整理我所理解的前端工程体系,方便逐步演进顶层观念并指导后续发展。因为见识的有限和理解的不足,这篇文章本难免缺陷和差缪,还望有识予以理解。 我所理解的前端工程体系大致如上图。左半部分以 antd + umi、fusion + 飞冰为参照加以说明,组件库用于提供基础的通用组件。模板工程通常提供了应用层面的最佳实践,因此

babel 处理流程管窥

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

html5

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

TreeSelect 组件

基于 rc-select 中的 generate(options) 提供下拉框处理逻辑,rc-tree-select 实现了自己的 OptionList、Selector 组件以及 internalProps 处理函数。

事件模块

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

节点、属性、样式模块

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

DOM 随笔

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

前端技术汇总贴

下载立即收藏!这应该是你见过的最全前端下载总结 校验身份证号根据〖中华人民共和国国家标准 GB 11643-1999〗中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成。排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码。 地址码表示编码对象常住户口所在县(市、旗、区)的行政区划代码。 出生日期码表示编码对象出生的年

Select 组件

Select 组件基于 rc-select 组装外观,主要功能包含: 多种展示模式:默认的单选模式、multiple 多选模式、tags 标签模式(支持随意输入值)、combobox 。 搜索功能:通过 props.showSearch、props.onSearch、props.optionFilterProp 配置搜索过滤能力。 选项分组:通过 OptGroup 组件设置选项分组。 扩展菜单:

react 工程中使用 ts

常规React.ReactNode:children 类型。React.CSSProperties:样式类型。React.MouseEvent<HTMLElement, MouseEvent> 等:event 对象类型。React.ChangeEventHandler 等:事件处理器。React.Ref:ref 引用类型,通常需要结合 React.useRef(null)。 使用 Om