介绍
- githubPages
- netlify：绑定域名自动映射 app.netlify.com
觉得不错就点个 star 🦷
开发
- React TypeScript
调试
Storybook是一个辅助UI控件开发的工具。通过story创建独立的控件，让每个控件开发都有一个独立的开发调试环境。
- Storybook
- 编写 stories
- 添加 react-doc-gen ==> 可以根据注释生成文档页面
- 添加和使用 addon ==> 丰富文档的一些功能
- 生成静态页面 ==> 可以部署在服务器上
测试
- 组件测试
- React Testing Library
- Jest
- 行为模拟
- 基础断言
- mock 实现
部署
- 代码提交：husky 做一些提交的规范校验
- travis CI/CD 持续继承
组件库的开发流程
CI/CD
传统组件库的开发
每次修改代码都需要手动将静态文件上传服务器部署耗时耗力
可以使用 CI/CD
CI: 持续集成
- 频繁将代码集成到主干（master） 好处：快速发现错误，每完成一点更新就更新到 master，快速发现错误然后修改
- 防止分支大幅偏离主干，如果不是持续继承，主干又在大幅更新，导致以后的代码集成比较困难。 目的就是 产品快速迭代，保证代码质量 核心措施，继承到 master 之前需进行 自动化测试，都通过才去 merge 到 master
CD：持续交付、持续部署
- 频繁将软件的新版本，交付给质量团队或用户
- 代码通过评审，自动部署到生产环境
github 支持的持续部署工具【开源免费】 travis-ci.com
设计模式
发布订阅模式
举一个例子，你在微博上关注了A，同时其他很多人也关注了A，那么当A发布动态的时候，微博就会为你们推送这条动态。A就是发布者，你是订阅者，微博就是调度中心，你和A是没有直接的消息往来的，全是通过微博来协调的（你的关注，A的发布动态）。
发布订阅模式：订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Topic），当发布者（Publisher）发布该事件（Publish topic）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。
function eventUtil() {
let eventList = {};
this.eventList = eventList;
this.on = function (key, fn) {
if (!this.eventList[key]) {
this.eventList[key] = []
}
this.eventList[key].push(fn)
}
this.emit = function (key, ...args) {
fns = this.eventList[key];
if (!fns || fns.length === 0) return false;
for (let i = 0; i < fns.length; i++) {
const fn = fns[i];
fn.apply(this, args)
}
}
this.remove = function (key, fn) {
fns = this.eventList[key];
if (!fns) return false;
if (!fn) {
fns.length = 0;
} else {
for (let index = 0; index < fns.length; index++) {
if (fn === fns[index]) {
fns.splice(index, 1)
}
}
}
}
}
const eventKey = new eventUtil()
eventKey.on('custom', f1 = function (name) {
console.log(name)
})
eventKey.emit('custom', 'hi')
eventKey.remove('custom', f1)
eventKey.emit('custom', 'hi')
