新年更高目標 | 帶你瞭解前端負責人的工作內容

linmu發表於2020-02-05
前端

什麼是程式

程式 = 資料結構 + 演算法

程式 = 模組 + 訊息交流

架構師是做什麼的

  • 規範：有效的規範團隊工作方式
  • 架構：劃分出低耦合的模組，並高效的設計模組間的溝通

巨集觀架構

業務架構 ——> 框架 ——> 程式語言 ——> 應用（如瀏覽器） ——> 作業系統

前端負責人需考慮使用什麼框架，在網易內部，當要立項一個新的專案時，會進行開會立項，確定一個更適合專案的框架。

程式語言、應用和作業系統這些就不需挑選了。

如何分析業務架構

  • 從需求出發劃分，可劃分為不同的模組
  • 需求做的事情不能多不能少

以電腦為例：

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() // 將頁面載入資訊反饋給後端
複製程式碼

程式設計師的角色升級

搬磚 —— 更好的程式碼，良好的程式設計思維 ——> 工程師 —— 軟體工程，底層知識，對於土壤的熟悉 ——> 架構師

大部分前端人缺乏的

  • 程式設計思想：看原始碼
  • 計算機和軟體工程知識
  • 專案經驗

針對欠缺，奧利給！

相關文章