第9课前端负责人的工作内容¶

统计信息：字数 5440 阅读11分钟

前端架构师培训：架构设计+前端规范

1、架构设计¶

架构师¶

架构师：规范团队的工作形式；划分出低耦合高内聚的模块，并高效的设计模块间的沟通。模块的耦合度较低，后期的改动维护比较方便。

程序：代码和说明文档，数据结构和算法，模块+消息交流

业务架构：从需求出发划分架构；需求做的事情必须都完成

需求变成模块（模块能实现哪些功能，不能实现哪些功能）不同模块实现什么样的功能？现在这样功能设置，是否支持未来的功能扩展或者功能变化？

架构实例：编译器¶

编辑器：建造者设计模式

编辑器功能：可以编辑（可以设置字体字号）；可以导入文档（初始化文字dom）管理模块；支持undo-redo

function writer(userConfig) {
  this.initer = new initer();
  this.styler = new controlStyle();
  this.stater = new state();
  this.initer.initDom(userConfig);
}

window.writer = writer();

function initer() {
}

initer.prototype.initConfig = function(config) {
}

initer.prototype.initDom = function(userConfig){
  let finalConfig = this.initConfig(userConfig);
  this.colorDom.onclick = function() {
    this.style.color('red');
  }
}

function controlStyle() {
}

controlStyle.prototype.setSize = function() {
}

controlStyle.prototype.setColor = function() {
}

function state() {
  this.stateArr = [];
  this.nowState = 0;
}

state.prototype.add = function() {
}

state.prototype.back = function() {
}

state.prototype.go = function() {
}

通用框架模板：

业务模块：基础界面模块（统一的外观）+ 不同的子页面
支持模块：组件库+工具库+公用CSS
底层组件库（第三方或者自己完成，性能更高，代码更健壮，具有可更改性）
工具模块（utils）工具模块：cookies token 对象操作等工具库（完成操作），可以减少重复的代码，便于修改，可更改性。自己把底层库和工具库写好（写一段时间），后面开发就比较健壮，可更改。
公用CSS：如果公用的UI调整了，直接调整公用的CSS即可，不需要界面中都定义这个颜色，后期调整比较麻烦。
网易的工作流程：立项评审（产品）+选型技术框架+进行UI评审（项目的主体色+辅助色+搭配色，字体风格）+前端公用的CSS）

公用CSS模块：一个类名对应一个属性，直接使用多类名(如果主界面颜色更改后，那么直接修改公用模块即可)

.color-orange {
  color: #2757ae;
}
.color-theme {
  background-color: green;
}
.d-flex {
  display: flex;
}

例子：Jquery 模块说明

底层依赖模块（工具方法，数据缓存，异步队列操作）

中层实现层：通过异步队列实现ajax，通过数据存取操作界面数据

高层API接口：选择器，DOM操作，样式操作，事件交互，AJAX，动画操作

顶层：封装$，实现高层API工具函数的绑定

2、定义公司的前端规范¶

前端规范：

代码风格标准（ESLint）
性能标准
工作流程标准
规范的层级：文档规范-评审人手动验证规范（review）-自动化规范验证（蚂蚁金服组件）

性能标准¶

现状评估：页面加载时间+动态响应速度+内存消耗

优化：增加缓存，减少体积，减少请求，减少链接时间

目标确定：平均加载时间+秒开率+内存测试

性能查看工具¶

1、F12控制台（Performance）：查看内存消耗多少，DOM 渲染时间等。可以查看本地测试的调试情况，不能查看实际上用户的全部情况。

2、可以获取全局的变量，我们在小范围内部测试时，可以收到实时的性能回传，这样在发布的之前可以做性能优化。可以把信息写一个自动化程序，提交到后台作为反馈。

window.performance = 
{
  memory: {
    totalJSHeapSize: 1
    usedJsHeapSize: 1
    jsHeapSizeLimit: 1
  },
  timing: {
    connectStart: 1
    connectEnd: 2
    secureConnectionStart: 3
    requestStart: 4
    responseStart: 5,
    responseEnd: 6,
    domLoading: 7,
    domComplete: 8,
    loadEventStart: 9,
    loadEventEnd: 10,
  }
}

var per = window.performance;
function getmb(size) {
  return Math.floor(size/1024/1024, 4) + 'MB';
}
function getSec(time) {
  return time / 1000 + 's';
}
// 内存占用
getmb(per.memory.usedJSHeapSize)
// tcp 连接耗时:tcp链接耗时反映了服务器的问题：如果耗时很多，说明建立连接很慢。HTTP 协议基于TCP/IP协议。首先TCP/IP协议建立一个管道，然后HTTP在上面传输数据
getsec(per.timing.connectedEnd - per.timing.connectStart)
// 响应耗时:响应耗时，说明数据传输量的多少：解决方法，增加带宽或者减少数据量（资源懒加载）。
getsec(per.timing.responseEnd - per.timing.responseStart)
// dom render 耗时
window.onload = function() {
  getsec(per.timing.domComplete - per.timing.domloading)
}

然后可以把这部分性能数据发送到服务器上面

工作流程标准¶

初始化项目（vue-cli react-create-app）
项目构建和调试（webpack babel）
测试（单元测试，CI CD 等集成测试）
代码管理（git）

文档标准¶

项目配置规范
提交审核规范
需求管理规范

Last update: November 9, 2024

第9课 前端负责人的工作内容¶