架构

[TOC]

cli工具？

• commander //解析node 参数

• inquirer //交互式命令

• download-git-repo //下载远程代码

参考：

仿 vue-cli 搭建属于自己的脚手架

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

使用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 数据

不同规模的前端团队如何做基建