# 架构

\[TOC]

### cli工具？

* commander //解析node 参数
* inquirer //交互式命令
* download-git-repo //下载远程代码

参考：

[仿 vue-cli 搭建属于自己的脚手架](https://juejin.cn/post/6844903807919325192#heading-14)

### 前端组件库本地开发调试方案优化，模块化调试技巧？

使用npm link

```
npm link   //组件文件夹：全局引用， 会在 node_modules中生成 npm-link-module的快捷方式，被链接到全局
npm link npm-link-module   //项目文件夹：后面是全局引用文件夹
```

### 设计模式

### js设计模式有哪些？

1）设计模式的原则：

* 单一职责原则
*
  * 一个程序只做好一件事
  * 如果功能过于复杂就拆分开，每个部分保持独立
* 开放/封装原则
*
  * 对扩展开放，对修改封闭
  * 增加新需求时，扩展新代码，而非修改已有代码
* 依赖倒转原则
*
  * 面向接口编程，依赖于抽象而不依赖于具体
  * 使用方只关注接口而不关注具体类的实现
* 接口隔离原则
*
  *

2）常用的设计模式：

1. 工厂模式
2. 观察者模式（发布订阅模式）
3. 代理模式
4. 构造函数模式
5. 建造者模式

参考资料： https://juejin.im/post/6844904032826294286

#### 什么是观察者模式？

通常也被称为 发布-订阅者模式 或者 消息机制，它定义了对象间的一种一对多的今依赖关系；

只要当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新，解决一个对象状态改变给其他对象通知的问题；

使用案例：

* 对DOM的事件绑定就是一个非常典型的 发布-订阅者模式
* vue的双向数据绑定（）

```
$('body').on('click',function(){

 alert(1);

})
```

### 微前端?

把大的应用，拆登录成更小，更易于管理的小应用，每个应用单独开发，部署，技术栈互不影响。

通过nginx反向代理的方式来进行路由分发；

优点：

* 升级旧系统：使用新的技术栈

### 持续集成，持续交付，持续部署？

**持续集成**：个人研发的部分向软件部分交付，以便尽早发现个人开发的问题； //feature分支

**持续部署**：代码尽快向可运行的开发/测试交付，以便尽早没试 ； //dev分支

**持续交付**：研发尽快向客户交付，以便尽早发现生产环境存在的问题；//release分支

把大的模块拆成小的模块，快速交付的速度和频率，早发现问题早解决；

### 前端基建的工作内容？

> 技术选型，方案制定，优化开发流程，部署流程，提高开发效率，性能安全监控，错误预警

提高开发效率（模块化、工程化）

* 搭建私有npm库（verdaccio），基础组件库建议使用单元测试
  * 组件库分类
  * 逻辑类（sdk封装）：埋点组件，util.js，jsBridge.js，微信登录
    * UI类：日历组件，支付弹层
  * 单元测试
* 部署自动化
  * 【自动构建】：监听dev分支提升后，自动构建
  * 【cdn自动上传】：build后的文件自动上传到cdn
  * 【自动通知测试】：构建完成，通过钉钉机器人通知测试
* 日志监控（日志全链路追踪）
  * 阿里云日志：可视化日志，监控错误日志，性能，流量情况
  * 无痕埋点：提高埋点效率
    * 手动埋点：获取更多业务数据
* 定制 cli 脚手架
  * 项目cli：微前端架构方便快速创建项目
  * 组件cli： https://github.com/xiaomuzhu/create-component
* 提交代码规范
  * 分支规范： gitflow
    * 【分支管理】
    * 【分支命名】
  * 代码风格统一：eslint/tslint/prettier代码规范（编辑器插件统一） ,airbnb规范配置
    * 【文件拆分】：每个文件代码不超过400行，必须拆分不包，抽离不同的类
    * 【大图片使用cdn引入】
    * 【禁止出现冗余代码】:未使用的变量
  * commit规范：
* 技术选型
*
  * react, taro,next.js,redis,typescript,hook,nodejs,容器化服务
* 技术设计与方案
  * 云凤碟：做活动页
  * 使用nodeApi做中间跳转实现，App（Scheme协议）与H5的跳转
* API网关
* mock 工具
  * swagger上自动拉取字符结构，生成mock数据
* 文档沉淀
  * 组件文档
  * 技术设计（业务文档）文档
  * 技术分享文档
  * 新人文档

参考资料：

[通过 Swagger 定义自动生成 Mock 数据](https://segmentfault.com/a/1190000020483339)

[不同规模的前端团队如何做基建](https://zhuanlan.zhihu.com/p/110119309)
