前端技术负责人必修课《如何构建前端标准》
2020-04-11 本文已影响0人
爱吃香菜的憨憨
怎么做架构设计
什么是程序
程序 = 模块 + 消息交流
架构师是做什么的
- 规范——有效的规范团队工作形式
- 模块——划分出低耦合的模块，并高效的设计模块间的沟通
宏观架构图
image
如何分析业务架构
- 从需求出发划分模块
- 根据需求——模块做的事情不能多不能少
在线编辑器
需求：能编辑，调整字体颜色和大小，回退前进
拆分需求：
1.初始化dom,初始化样式
2.方法控制颜色和大小
3.状态记录和管理
整理思路：
初始化模块（解析用户配置，初始化dom）=》 字体控制模块（颜色，大小调节）=》 状态模块（记录状态，操作状态）
// 初始化模块
function init(config) {
this.defaultConfig = {};
}
init.prototype.initConfig = () => {
// 产出最终配置
}
init.prototype.initDom = (finalConfig) => {
// 生成dom
// 绑定事件
fontDom.onclick = () => {
this.styler.sizeChange(size);
}
backDom.onclick = () => {
this.stater.back();
}
}
// 字体控制模块
function styleControl() {
}
styleControl.prototype.colorChange = () => {
}
styleControl.prototype.sizeChange = () => {
}
// 状态模块
function stateControl() {
this.stateArr = [];
this.nowin = 0;
}
stateControl.prototype.push = () => {
this.stateArr.push(state);
}
stateControl.prototype.go = () => {
if (this.nowin < this.stateArr.length - 1) ++this.nowin;
return this.stateArr[this.nowin];
}
stateControl.prototype.back = () => {
}
架构模板
image
流程：项目立项评审->ui评审（确定项目主题设计）->产出主题色，配色方案，字体搭配，字体色，大体结构等
-> 前端设计通用css
比如：
.color-theme-back {
background-color: black;
}
.color-theme-font {
color: green;
}
......
如何定义公司的前端标准
团队前端标准包含哪些？
- 代码风格标准——eslint
- 性能标准——自动化的性能测试
- 工作流程标准——标准的工具链流程
- 文档规范->人工监督->建立一整套自动化规范
性能标准
image
如何查看网页的各种性能指标
除了浏览器调试工具自带的performance，我们也可以在控制台输入window.performance,拿到我们需要的各种性能指标
在测试阶段，页面嵌入一小段性能测试代码，回传后台接口，在后台看到可视化数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>性能指标</title>
</head>
<body>
<div id="mydiv" class="div1"></div>
<div class="div1 img1"></div>
<div class="div1 img2"></div>
<div class="div1 img3"></div>
<div class="div1 img4"></div>
<script>
var _performance = window.performance;
function getmb(size) {
return `${Math.floor(size / 1024 / 1024, 4)}mb`;
}
function getsec(time) {
return `${time / 1000}s`;
}
console.log(`内存占用${getmb(_performance.memory.usedJSHeapSize)}`);
// http协议建立在tcp上，tcp从服务器输送内容到b/s
console.log(`tcp链接时间${getsec(_performance.timing.connectEnd - _performance.timing.connectStart)}`);
console.log(`响应时间${getsec(_performance.timing.responseEnd - _performance.timing.responseStart)}`);
console.log(`dom渲染耗时${getsec(_performance.timing.domComplete - _performance.timing.domLoading)}`);
</script>
</body>
</html>
image
工作流程标准
image
完整的工具链：一个自己的脚手架->项目内置-构建-测试-自动化提交
晋升要点
程序员的角色升级
image
路漫漫其修远兮
土壤与生态
image.png
