分类: frontend

前端工程体系

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

前端技术汇总贴

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

react 工程中使用 ts

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

Select 组件

Select 组件包含如下功能: 多种展示模式:默认的单选模式、multiple 多选模式、tags 标签模式(支持随意输入值)、combobox 。 搜索功能:通过 props.showSearch、props.onSearch、props.optionFilterProp 配置搜索过滤能力。 选项分组:通过 OptGroup 组件设置选项分组。 扩展菜单:通过 props.dropdownR

Upload 组件

Upload 组件构成如下: rc-upload 提供基本的文件上传功能。Upload 组件在 rc-upload 基础上创建外观,实现文件与表单交互,并集成 UploadList 文件列表。 rc-uploadrc-upload 的实现逻辑基于:由隐藏的 input 元素获取上传文件,再通过 ajax 上传 FormData 数据。上传时包含常规的 ajax 功能点以及 input 表单控件的功

react fiber 代码梳理篇

scheduleWork正如 react fiber 搜罗整理篇 已点明的,fiber reconciler 对首次渲染和再次渲染会采用不同的机制。 首次渲染 —— 比如用户侧在浏览器环境调用 ReactDOM.render(rootReactElement, rootDomElement) —— 时,fiber reconciler 首先会通过 createContainer 将根节点 roo

前端模块化机制

前端模块化规范有 AMD、CMD、CommonJS、ES2015 规范: AMD 模块化规范:requirejs 为其主要实现。 CMD 模块化规范:seajs 为其主要实现。 CommonJS 模块化规范:作为CommonJS 规范的一部分,nodejs是其较常见的实现。 ES 2015 模块化规范:作为es 官方规范的一部分。 对于 AMD、CMD,本文尝试解读 requirejs、sea

node 命令行工具

示例简单的命令行工具一般按照以下流程编写: package.json 文件中添加 bin 属性,指定命令的名称,如 “bin”: { “create-app”: “bin/create-app.js” }。 bin/create-app.js 文件中添加 #!/usr/bin/env node,指定这是一个使用 node 执行的命令行工具。 使用 commander.js 编写 bin/crea

图片校验码

纯前端实现纯前端实现图片校验码指的是通过 canvas 绘制随机串的方式。这种方式有极大的弊端:如果随机串在前端生成,那么通过拦截伪造请求仍然能正常调用后台接口;如果随机串由后台发送给前端,那么中间可以被拦截并伪造(当然,可尝试用加密技术进行保护)。因此,这种方式大体适用于学习研究的目的。以下代码段基于 react 验证码组件 整理,其实现也可以参考 在React中随机生成图形验证码。您可以在 c

react fiber hooks钩子篇

前言本文浅述了 react hooks 的执行机制,但在 expirationTime 优先级处理、suspenseConfig 配置、side-effects 执行机制、useContext、useTransition、useResponder 等方面显得力有不逮,并且未采用图文描述的形式。个中错谬,仍需勘正。 react hooks 的使用可参考 React Hooks的体系设计之一 - 分层