新年更高目标 | 带你了解前端负责人的工作内容

什么是程序

程序 = 数据结构 + 算法

程序 = 模块 + 消息交流

架构师是做什么的

规范：有效的规范团队工作方式
架构：划分出低耦合的模块，并高效的设计模块间的沟通

宏观架构

业务架构 ——> 框架 ——> 编程语言 ——> 应用（如浏览器） ——> 操作系统

前端负责人需考虑使用什么框架，在网易内部，当要立项一个新的项目时，会进行开会立项，确定一个更适合项目的框架。

编程语言、应用和操作系统这些就不需挑选了。

如何分析业务架构

从需求出发划分，可划分为不同的模块
需求做的事情不能多不能少

以电脑为例：

PC：CPU + 显卡 + 声卡 + 电源系统 + ... （模块）

CPU 只负责计算，计算完之后将计算结果给其他模块（模块做的事情）。

架构模板

具体业务模块

页面1、页面2、页面3、基础组件...
支持模块

底层库、工具模块、页面公用css

建议先实现支持模块，然后再写具体的业务模块，这样虽前期浪费了一些时间，但后期会省去很多事情。

底层库：搭建自己公司内部的组件库

好处：开发迅速、增加健壮性、更具有可更改性

工具模块：当有部分方法需多次使用时，提取出相关的模块

页面公用 css：写一套项目专用的 bootstrap

当网易开发一个新项目时的流程：

立项 ——> 技术架构分析 ——> UI 会议 ——> 开发

定义公司前端规范

团队前端标椎包含哪些

代码风格标准
- eslint
性能标准
- 现状评估：页面加载时间（ window.performance - timing / memory）、动态反应速度、内存
- 优化方案：缓存、减少链接时间、减少体积、减少请求
- 目标确立：雅虎军规
工作流程标准
- 工具链流程：
  1. 初始化项目（ vue-cli ），大厂会写一个项目专用的 vue-cli；
  2. 构建和调试（ webpack ）；
  3. 测试（单元测试，集成测试）；
  4. 提交（ git ）。
- 文档：
  1. 项目配置规范；
  2. 提交审核规范；
  3. 需求管理规范。
文档层次 —— 人工监督 —— 自动化

判断页面加载时间：

// js代码
var _per = window.performance
function getmb(size){
  return Math.floor(size/1024/1024,4)+'mb'
}
function getsec(time){
  return time/1000+'s'
}
console.log('内存占用'+getmb(_per.memory.usedJSHeapSize))
console.log('tcp 链接耗时'+getsec(_per.timing.connectEnd-_per.timing.connectStart))
console.log('响应耗时'+getsec(_per.timing.responseEnd-_per.timing.responseStart))
window.onload=function(){
  console.log('dom渲染耗时'+getsec(_per.timing.domComplete-_per.timing.domLoading))
}
$.ajax() // 将页面加载信息反馈给后端

程序员的角色升级

搬砖 —— 更好的代码，良好的编程思维 ——> 工程师 —— 软件工程，底层知识，对于土壤的熟悉 ——> 架构师

大部分前端人缺乏的

编程思想：看源码
计算机和软件工程知识
项目经验

针对欠缺，奥利给！