阅读 846

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

什么是程序

程序 = 数据结构 + 算法

程序 = 模块 + 消息交流

架构师是做什么的

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

宏观架构

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

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

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

如何分析业务架构

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

以电脑为例:

PC:CPU + 显卡 + 声卡 + 电源系统 + ... (模块)

CPU 只负责计算,计算完之后将计算结果给其他模块(模块做的事情)。

架构模板

  • 具体业务模块

    页面1、页面2、页面3、基础组件...

  • 支持模块

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

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

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

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

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

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

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

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

定义公司前端规范

团队前端标椎包含哪些

  1. 代码风格标准

    • eslint
  2. 性能标准

    • 现状评估:页面加载时间( window.performance - timing / memory)、动态反应速度、内存

    • 优化方案:缓存、减少链接时间、减少体积、减少请求

    • 目标确立:雅虎军规

  3. 工作流程标准

    • 工具链流程:

      1. 初始化项目( vue-cli ),大厂会写一个项目专用的 vue-cli;
      2. 构建和调试( webpack );
      3. 测试(单元测试,集成测试);
      4. 提交( git )。
    • 文档:

      1. 项目配置规范;
      2. 提交审核规范;
      3. 需求管理规范。
  4. 文档层次 —— 人工监督 —— 自动化

判断页面加载时间:

// 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() // 将页面加载信息反馈给后端
复制代码

程序员的角色升级

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

大部分前端人缺乏的

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

针对欠缺,奥利给!

关注下面的标签,发现更多相似文章
评论