面向?qū)ο笠暯窍碌那岸斯こ腆w系
關(guān)注「前端向后」微信公眾號，你將收獲一系列「用心原創(chuàng)」的高質(zhì)量技術(shù)文章，主題包括但不限于前端、Node.js以及服務(wù)端技術(shù)
寫在前面
從面向過程的角度來看前端工程，就是各個過程，以及過程之間的銜接：
（面向過程視角下的）前端工程 = 過程 + 過程間的銜接
其中，過程旨在解決效率問題，而過程間銜接關(guān)注更多的是體驗問題，前端工作流相關(guān)的所有工程設(shè)施都可以按這個標(biāo)準(zhǔn)來劃分，要么是過程，要么是銜接
反過來從問題角度看，體驗問題能夠通過銜接來緩解，比如打通上下游工具/平臺、寫個批處理工具、搭個管理平臺，效率問題則必須通過更優(yōu)、更快的過程來解決，比如協(xié)作模式升級、構(gòu)建速度優(yōu)化
但面向過程的劃分也存在一些問題，例如：
一些相似的過程橫跨多個生產(chǎn)環(huán)節(jié)：打包工具跨開發(fā)、構(gòu)建階段，調(diào)試套件跨開發(fā)、測試階段，迭代管理跨全流程
過程之間需要大量的銜接：一些工具需要配合使用，如腳手架與公共庫、編輯器與構(gòu)建工具、調(diào)試套件
過程邊界不清晰，缺少層次結(jié)構(gòu)：很容易產(chǎn)生一大堆拉拉扯扯的零散工具/平臺，如性能日志導(dǎo)出工具、性能分析診斷工具、性能監(jiān)控平臺、性能數(shù)據(jù)可視化平臺
既然如此，不妨換個視角觀察，從面向?qū)ο蟮慕嵌葋砜?/p>
一.前端工程中的 OO 概念
對象
對象，是對前端應(yīng)用生產(chǎn)活動中各個實體的抽象，其中一些對象是主體（比如充當(dāng)不同角色的人），另一些是客體（比如工具、平臺等各種具體事物）
對象之間通過一系列交互行為來完成前端應(yīng)用的開發(fā)和交付：
產(chǎn)品經(jīng)理：從現(xiàn)實生活中的問題發(fā)現(xiàn)用戶需求，并將用戶需求轉(zhuǎn)化成產(chǎn)品需求
設(shè)計師：根據(jù)產(chǎn)品需求設(shè)計 UI 效果和交互操作流程，以設(shè)計稿的形式輸出
后端工程師：根據(jù)產(chǎn)品需求設(shè)計數(shù)據(jù)模型，實現(xiàn)數(shù)據(jù)讀寫，約定前后端數(shù)據(jù)協(xié)議
前端工程師：根據(jù)產(chǎn)品需求還原設(shè)計稿，并根據(jù)前后端數(shù)據(jù)協(xié)議實現(xiàn)交互功能，產(chǎn)出前端應(yīng)用程序
測試工程師：對前端應(yīng)用程序進(jìn)行充分測試，保證產(chǎn)品需求得到了一致滿足
運維工程師：將質(zhì)量可靠的前端應(yīng)用程序部署到生產(chǎn)環(huán)境
運營專員：將已上線的前端應(yīng)用程序推廣給用戶
與面向過程的視角不同，這里更關(guān)心的是對象和對象間的交互行為，以前端開發(fā)工作為例：
面向過程視角：現(xiàn)在處于開發(fā)階段，我要通過模塊拆分、編碼、調(diào)試等步驟來完成開發(fā)任務(wù)，接著項目進(jìn)入下一階段
面向?qū)ο笠暯牵何沂乔岸斯こ處煟倚枰a(chǎn)品經(jīng)理、設(shè)計師、后端工程師提供的產(chǎn)品需求、設(shè)計稿和數(shù)據(jù)協(xié)議，產(chǎn)出前端應(yīng)用程序給到測試工程師
也就是說：
（面向?qū)ο笠暯窍碌模┣岸斯こ?= 對象 + 對象間的關(guān)系及交互
其中，對象的數(shù)量關(guān)系到體驗，對象數(shù)量越多，主體需要關(guān)注的東西越多，體驗越差，對象依賴關(guān)系的復(fù)雜度決定了效率，對象關(guān)系越復(fù)雜，交互越多越繁瑣，效率越低
接口
接口，是在前端應(yīng)用生產(chǎn)過程中的一些抽象產(chǎn)物，不直接體現(xiàn)在最終交付物中，例如：
協(xié)議/約定
規(guī)范
這些抽象產(chǎn)物定義了對象間通信的消息格式，讓人與人、工具與工具、工具與人都能夠緊密協(xié)作
抽象類
抽象類，也是前端應(yīng)用生產(chǎn)過程中的一些抽象產(chǎn)物，定義了不同對象之間的關(guān)聯(lián)和交互方式，例如：
研發(fā)模式
技術(shù)方案
流程標(biāo)準(zhǔn)
工具鏈
與接口不同，這些“抽象類”能夠約束多個對象之間的聯(lián)動關(guān)系，而接口要約束的是兩個對象之間的一次交互行為
二.面向?qū)ο蟮那岸斯こ淘O(shè)計
審視前端生產(chǎn)活動
先將視角爬升到白云之上足夠高的地方，再看前端生產(chǎn)活動：
現(xiàn)實問題（用戶需求） -> 前端生產(chǎn)活動 -> （解決方案）前端應(yīng)用程序
P.S.前端生產(chǎn)活動，指的是前端項目從需求到發(fā)布上線的整個生命周期
即，通過前端應(yīng)用程序解決現(xiàn)實問題，中間的生產(chǎn)活動就是前端工程所關(guān)注的領(lǐng)域
如果把前端工程看作一個系統(tǒng)，其運作原理大致是這樣：
一些人，通過一些交互，生成一些中間產(chǎn)物，最終交付前端應(yīng)用程序
輸入用戶需求，輸出前端應(yīng)用程序，前端工程一直以來所要解決的問題無非兩個：
效率：減少一些人、減少一些交互、規(guī)范化一些中間產(chǎn)物
體驗：簡化一些交互、減少一些中間產(chǎn)物
P.S.當(dāng)然，質(zhì)量是前提條件，就像CAP 中的 P，實屬沒得選。所以傷及質(zhì)量的效率、體驗提升不在討論范圍內(nèi)
建模前端工程
首先，識別出系統(tǒng)中的所有主體對象：
項目經(jīng)理
產(chǎn)品經(jīng)理
設(shè)計師
前端工程師
后端工程師
測試工程師
運維工程師
運營專員
那么頂層應(yīng)該是前端生產(chǎn)平臺，定義了研發(fā)模式和流程標(biāo)準(zhǔn)，讓這些角色能夠協(xié)同工作：
第二層是 5 大中心，承載前端應(yīng)用程序在生命周期不同階段的生產(chǎn)活動，關(guān)鍵類如下：
項目中心：項目、迭代及其相關(guān)資源類（需求文檔、設(shè)計稿、數(shù)據(jù)協(xié)議）
研發(fā)中心：腳手架、物料池、IDE、構(gòu)建工具、調(diào)試器、測試套件等類
發(fā)布中心：部署服務(wù)類
監(jiān)控中心：應(yīng)用數(shù)據(jù)報表、報警服務(wù)類
運營中心：用戶數(shù)據(jù)報表、配置后臺類
其中，以源碼編輯為中心的研發(fā)工作臺已經(jīng)成為趨勢，前端工作流相關(guān)的工具、平臺與定制化端 IDE/云 IDE提供的開發(fā)環(huán)境充分融合，集中解決過程間銜接的體驗問題
另一方面，傳統(tǒng)的前端研發(fā)模式也正在發(fā)生變革，例如：
工具化/自動化設(shè)計還原：設(shè)計師直接產(chǎn)出可用的前端代碼，而不再輸出設(shè)計稿，減少了反復(fù)確認(rèn)視覺效果的低效交互
基于標(biāo)準(zhǔn)組件的低代碼開發(fā)模式：將中間產(chǎn)物規(guī)范化，脫離全套開發(fā)工具（腳手架、IDE、構(gòu)建工具等）也能產(chǎn)出前端應(yīng)用程序，同樣減少了一些對象間的交互，效率有所提升
整個前端工程系統(tǒng)都是為了更快捷地交付前端應(yīng)用程序，從這個角度來看，研發(fā)模式上的這些變革也是順理成章的
三.抽象、封裝、繼承與多態(tài)
抽象
抽象的目的是增加靈活性和通用性（抵抗變化），前端工程中有 3 種常見的抽象：
從諸多同類客體對象抽象出通用模型：跨容器框架（如Rax）、跨引擎接口（如React Native JSI）、標(biāo)準(zhǔn)容器
從中間產(chǎn)物抽象出標(biāo)準(zhǔn)協(xié)議：跨端組件、通用 API
從對象交互活動中抽象出規(guī)范流程：研發(fā)模式、技術(shù)方案（如Lottie）
其中，抽象層的作用分為兩種：
把變化的部分圈起來：抽象層以下能夠靈活變化，抽象層之上對這些變化沒有感知
將不變的部分固化：流程固定不變，但流程中的某些環(huán)節(jié)可替換，就像模版方法模式
封裝
封裝的目的是信息隱藏，就像一個柜臺窗口，隔開了后廚與前廳，用來區(qū)分實現(xiàn)者和使用者
在前端工程中按關(guān)注點 的是平臺維護(hù)者和用戶，例如：
IDE：是對前端開發(fā)相關(guān)的整套工具環(huán)境的封裝，包括腳手架、編輯器、調(diào)試器、依賴管理工具、構(gòu)建工具等在內(nèi)
構(gòu)建工具：是對本地開發(fā)、測試/正式部署等環(huán)節(jié)所需的資源處理步驟的封裝，包括源碼編譯、資源優(yōu)化、源碼/產(chǎn)物靜態(tài)檢查等步驟
發(fā)布服務(wù)：是對正式、測試環(huán)境下的部署、灰度發(fā)布、回滾等功能的封裝，讓測試工程師、產(chǎn)品經(jīng)理無需專業(yè)的運維知識也能完成前端應(yīng)用的部署和發(fā)布
封裝能夠有效減少頂層對象數(shù)量，將內(nèi)部的依賴隱藏起來，主體對象需要關(guān)注的對象更少，不必了解內(nèi)部具體交互細(xì)節(jié)也能輕松完成一些復(fù)雜工作
繼承
繼承的目的是復(fù)用現(xiàn)有對象的屬性或行為，前端工程中常見的復(fù)用形式有：
工具包：將相對完整的工程能力打包成 CLI/GUI 工具或 IDE 插件包，可集成到其它工程體系中
SDK：將工程能力中可復(fù)用的部分抽離出來，允許在此基礎(chǔ)上二次開發(fā)和擴(kuò)展
其中，IDE 插件包是一種相對新的復(fù)用形式，比定制 IDE 和 GUI 客戶端的成本更低，也不失為一種好的選擇
多態(tài)
多態(tài)的目的是擴(kuò)展，從前端工程上看，多態(tài)體現(xiàn)在：
面向角色的定制：比如產(chǎn)品經(jīng)理、前端工程師對應(yīng)的系統(tǒng)主頁不同
面向場景的橫向拓展：比如小程序、Web、移動端、PC 中后臺等等，一個流程環(huán)節(jié)在不同場景對應(yīng)各自的實現(xiàn)
因此，不同的角色能夠在一套系統(tǒng)中完成各自的工作，同樣的研發(fā)模式能夠產(chǎn)出不同類型的前端應(yīng)用程序
四.總結(jié)
從面向?qū)ο蟮慕嵌葋砜?，前端工程是對象和對象間的關(guān)系及交互行為：
一些人，通過一些交互，生成一些中間產(chǎn)物，最終交付前端應(yīng)用程序
對象的數(shù)量直接關(guān)系到體驗，對象間依賴關(guān)系的復(fù)雜度決定著效率。因此，要么減少主體對象需要關(guān)注的頂層對象數(shù)量，要么簡化對象間的依賴關(guān)系
參考資料
面向?qū)ο缶幊趟枷胫ㄒ唬└攀?/p>
面向?qū)ο缶幊趟枷胫ǘ┙鉀Q問題的方法
面向?qū)ο缶幊趟枷胫ㄈ┟嫦驅(qū)ο缶幊痰奶攸c
面向?qū)ο缶幊趟枷胫ㄋ模╊惻c對象（實例）的關(guān)系
推薦閱讀