前端怎樣去設(shè)計一個項目？

距離國慶還有3天，人家都請假回家過節(jié)了，苦逼的鬼哥還要寫文章，今天還要改bug

無論假期何時到，鬼哥還要去報道！今天分享的是一篇個人覺得還非常不錯的文章，文章內(nèi)容大致傳達(dá)的是從接到一個項目需求，到項目完成對于我們需要思路的流程，行吧那就開始把！

當(dāng)我們接到一個項目需求, 單從前端的角度來思考, 我們需要做哪些事情呢? 從哪些方面去考慮和架構(gòu)一個項目? 這也是考驗是否有獨立完成項目的能力...我大概想到以下幾個方面吧

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

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

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

• 基礎(chǔ)層和業(yè)務(wù)層的模塊劃分
• 業(yè)務(wù)按照頁面page進(jìn)行解耦
• 基礎(chǔ)層按UI組件化,功能(接口)模塊化
• 可分為數(shù)據(jù)、模塊、模板、頁面幾種實體

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

• 前后端分離模式
• 數(shù)據(jù)接口(如果用 node 寫后端接口, 可以考慮一個人完成整個項目)
• 應(yīng)用開發(fā)模式
• 單頁應(yīng)用 SPA; 頁面解耦,獨立開發(fā)
• 多頁應(yīng)用 MPA;
• 服務(wù)端渲染應(yīng)用 SSR;
• 組件化管理: UI組件分解;
• 兼容 && 適配: vw 和 媒體查詢解決
• DPR: 像素比, 物理像素與邏輯像素px(縮放比例)
• 分辨率: 1, 2, 3 倍屏

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

• 項目結(jié)構(gòu)搭建
• 項目規(guī)范管理
• 項目編碼設(shè)計
• 項目打包構(gòu)建
• 項目模塊測試
• 項目工程部署
• 項目持續(xù)集成
• 腳手架搭建,自動化測試,部署,發(fā)布

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

• 現(xiàn)狀評估和建立指標(biāo)
• 頁面加載性能
• 動畫與操作性能
• 內(nèi)存消耗
• 技術(shù)方案

1.靜態(tài)資源優(yōu)化(利用網(wǎng)絡(luò)和緩存特性)

• 緩存
• 請求復(fù)用(DNS,HTTP2)
• 減少請求數(shù)(文件打包壓縮合并等)
• 減小文件
• CDN

2.動態(tài)運(yùn)行時優(yōu)化

• 如何利用語言特性,框架特性,算法機(jī)制(空間內(nèi)存和時間的取舍)
• 客戶端代碼運(yùn)行時優(yōu)化
• 交互優(yōu)化
• 執(zhí)行
• 結(jié)果評估和監(jiān)控
• performance API

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

• 版本管理
• 代碼規(guī)范
• 文檔記錄

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

• 前端埋點
• 異常上報!

聽說點贊的小伙伴都找到了漂亮的女朋友,反正鬼哥是點了

• 原文地址:github.com/appleguardu/blog

• 長按↓面二維碼，添加鬼哥微信，進(jìn)群一起學(xué)前端