關於前端項目設計思考

前端怎樣去設計一個項目

當咱們接到一個項目需求, 單從前端的角度來思考, 咱們須要作哪些事情呢?從哪些方面去考慮和架構一個項目? 這也是考驗是否有獨立完成項目的能力...我大概想到如下幾個方面吧, 先寫個目錄, 之後有時間再進行擴展

1.項目技術預研(大局觀能力考察)

• 項目背景
• 項目體量
• 功能需求收集
• 多端應用(web端:PC,H5, 客戶端: APP, 桌面端: electron)

2.項目分析分解(流程架構圖能力考察)

• 基礎層和業務層的模塊劃分
• 業務按照頁面page進行解耦
• 基礎層按UI組件化,功能(接口)模塊化
• 可分爲數據、模塊、模板、頁面幾種實體

3.項目技術選型(html,css,js應用能力考察)

• 先後端分離模式
  數據接口(若是用 node 寫後端接口, 能夠考慮一我的完成整個項目)

• 應用開發模式

  • 單頁應用 SPA; 頁面解耦,獨立開發
  • 多頁應用 MPA;
  • 服務端渲染應用 SSR;
• 組件化管理: UI組件分解;
• 兼容 && 適配: vw 和 媒體查詢解決
  DPR: 像素比, 物理像素與邏輯像素px(縮放比例)
  分辨率: 1, 2, 3 倍屏

4.項目工具鏈體系(node應用能力考察)

• 項目結構搭建
• 項目規範管理
• 項目編碼設計
• 項目打包構建
• 項目模塊測試
• 項目工程部署
• 項目持續集成
  腳手架搭建,自動化測試,部署,發佈

5.項目性能優化(web體系能力考察)

• 現狀評估和創建指標
  頁面加載性能
  動畫與操做性能
  內存消耗

• 技術方案
  1.靜態資源優化(利用網絡和緩存特性)

  緩存
  請求複用(DNS,HTTP2)
  減小請求數(文件打包壓縮合並等)
  減少文件
  CDN

  2.動態運行時優化

  如何利用語言特性,框架特性,算法機制(空間內存和時間的取捨)
  客戶端代碼運行時優化
  交互優化

• 執行
• 結果評估和監控
  performance API

6.項目功能迭代和維護(工程管理能力考察)

• 版本管理
• 代碼規範
• 文檔記錄

7.項目監控(兜底防錯能力考察)

• 前端埋點
• 異常上報