架构
[TOC]

cli工具?

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

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

使用npm link
1
npm link //组件文件夹:全局引用, 会在 node_modules中生成 npm-link-module的快捷方式,被链接到全局
2
npm link npm-link-module //项目文件夹:后面是全局引用文件夹
Copied!

设计模式

js设计模式有哪些?

1)设计模式的原则:
  • 单一职责原则
    • 一个程序只做好一件事
    • 如果功能过于复杂就拆分开,每个部分保持独立
  • 开放/封装原则
    • 对扩展开放,对修改封闭
    • 增加新需求时,扩展新代码,而非修改已有代码
  • 依赖倒转原则
    • 面向接口编程,依赖于抽象而不依赖于具体
    • 使用方只关注接口而不关注具体类的实现
  • 接口隔离原则
2)常用的设计模式:
  1. 1.
    工厂模式
  2. 2.
    观察者模式(发布订阅模式)
  3. 3.
    代理模式
  4. 4.
    构造函数模式
  5. 5.
    建造者模式

什么是观察者模式?

通常也被称为 发布-订阅者模式 或者 消息机制,它定义了对象间的一种一对多的今依赖关系;
只要当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新,解决一个对象状态改变给其他对象通知的问题;
使用案例:
  • 对DOM的事件绑定就是一个非常典型的 发布-订阅者模式
  • vue的双向数据绑定()
1
$('body').on('click',function(){
2
3
alert(1);
4
5
})
Copied!

微前端?

把大的应用,拆登录成更小,更易于管理的小应用,每个应用单独开发,部署,技术栈互不影响。
通过nginx反向代理的方式来进行路由分发;
优点:
  • 升级旧系统:使用新的技术栈

持续集成,持续交付,持续部署?

持续集成:个人研发的部分向软件部分交付,以便尽早发现个人开发的问题; //feature分支
持续部署:代码尽快向可运行的开发/测试交付,以便尽早没试 ; //dev分支
持续交付:研发尽快向客户交付,以便尽早发现生产环境存在的问题;//release分支
把大的模块拆成小的模块,快速交付的速度和频率,早发现问题早解决;

前端基建的工作内容?

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