分类: frontend

聊聊组件库中样式文件组织

antdantd 基于 normalize.css 制作了重置样式 base.less。 按 babel-plugin-import 按需加载功能的实现机制,样式文件须放在 style 文件夹下,并以 index 文件形式导出。 色彩模式antd 定义了一套 色彩模式(Color Palettes)。可以发现,antd 中的 colorPalette.less 与 @ant-design/colo

聊聊 antd 网站是怎么制作的

翻看 ant-design 仓库,可以发现以下形式的 markdown 文档,这篇文章旨在于解答这样一个问题:ant design 是怎样把这些文档渲染成页面的。 12345678910111213141516171819202122232425262728293031// ant-design Button 组件 demo// 注释:元数据内容---order: 0title: zh-CN:

swagger

OpenAPI SpecificationOpenAPI 规范(OAS)为 RESTful API 定义了一套标准的、跨语言的接口,以便人类和计算机均无需通过源码、文档或网络流量检测探知和理解服务器提供的能力。OAS 可用于制作文档生成器、代码生成器、测试工具等等。OpenAPI 以 json 对象形式呈现,因此它基本遵循 json schema 规范,可以用 json 或 yaml 格式编写。

自动化部署

参考Jenkins本地搭建遇到的问题 for Mac使用git做服务器端代码的部署Git Hooks、GitLab CI持续集成以及使用Jenkins实现自动化任务持续集成 の 使用 git hook 部署代码前端自动化发布实战总结

前端监控

前端监控前端监控包含 js 错误统计、js 错误诊断、api 统计监控、前后端链路追踪、文件加载失败监控、页面访问速度、慢回话追踪等。 js 错误统计可以借助 try…catch、window.onerror 实现。try…catch 能捕获到错误信息描述、堆栈、行号、列号、具体的出错文件信息等,但是它只能在单一的作用域内捕获错误,不能捕获异步函数的错误,如 setTimeout 函数就需要在其内

前端调试

基本调试可以借助 chrome 控制台实现。 同步刷新browser-syncbrowser-sync 通过 web-socket 将变更内容透出到页面侧,因此无须刷新页面。browser-sync 提供了两个方法:init({ server }) 启动本地静态服务器,init({ proxy }) 启动代理服务器(当本地服务器通过其他方式启动时,browser-sync 选用代理模式启动);re

前端埋点

埋点统计数据用户访问统计用户访问统计包含 PV(Page View)、UV(Unique Visitor)、VV(Visit View)、IP 等。PV 用来统计一天之内页面的被访问次数,机刷也可以造成 PV 数据提升。UV 用来统计一天之内访问页面的用户数量,一般使用 IP 统计(IP 统计并不谨慎,同一个办公区或校园公用一个 IP);使用 cookie + IP 统计(cookie 会被刷新,

umi-hooks、hox

这篇文章仅整理蚂蚁金服的 umi-hooks、hox 的大致实现原理,以说明 react-hooks 的探索空间和实践场景。循着蚂蚁金服体验技术部的足迹,自觉很能开拓眼界和思路。 umi-hooksuseAsyncuseAsync 用于处理异步请求,它支持的功能点包含暂停、撤销、重启、轮询。 在实现上,umi-hooks 首先构造 Timer 类以定时器方式执行指定函数,timer.stop、ti

hybird app

hybird app 介于 native app、web app 之间,性能比 web app 好,比 native app 差,但是适应了更多的移动开发场景。hybird app 具有如下特点:因为受到移动设备CPU、内存、网卡、网络连接等限制,hybird app 可用的系统网络资源有限;hybird app 支持更新的浏览器特性;hybird app 可实现离线应用,即借助浏览器最新的特性或

uform

通常对表单的抽象分为状态管理和视图组件两部分。按我的理解,uform 的三层结构与 redux + redux-react + react 组件或 mobx + mobx-react + react 组件的构成模式相仿。 @uform/core:状态管理层,抽象通用 form 表单、field 字段的状态管理逻辑。 @uform/react:抽象视图层,其一桥接状态管理器和视图组件,其二用于注