接觸并且正式入坑前端也有近兩年了,談談我個人對于前端開發的一種理解吧,全為個人體驗之談。

偏向設計
所謂偏向設計,便是前端開發的最終目的便是將腦子里的 idea 或者設計師提供的設計稿賦予實踐,具體開發中會精確到每一像素,還有文字的排版樣式,以及一些動效等等,其最終成果是面向于普通大眾的。
于后端的交流
前端開發只要不是單純的靜態展示頁面,勢必會涉及到數據的操作,而數據的具體處理過程是交由后臺的同學的來實現的(插一句,相對于前面提到的,我認為后端開發的最終成果是面向專業人士的,比如我們前端的同學),所以在前后端分離大行其道的今天,為了提高開發效率,前后端同學就有必要事先約定數據的交換規則。包括數據的格式(一般 json 比較多還有 xml 之類的);還有 HTTP 行為(GET、POST、PUT、DELETE ...)。
在約定完一些規則之后,為了緩解服務器的壓力前端的同學可以適當地將一些后端邏輯放到瀏覽器上來解決,代表成果就是 MVVM 了。
自身的開發架構
現在的前端開發其需求已不單單滿足于 Web1.0 時代單純的信息發布,上網隨便打開一個頁面里面充斥各種 css 樣式表以及 javascript 腳本,而頁面內容也是更為豐富,功能也更加齊全。很多更儼然就是個單頁面應用(SPA)。
所以 Web1.0 時代的開發手段對于應用級別的開發已是捉襟見肘,為了適應從 WebPage --> WebApp 的轉化,隨之而來的便是前端工程化。
前端工程化
首先很明顯,前端工程化不是一種技術手段而是一種思維方式,它所要解決的問題是:
- 如何提高開發效率也就是解放生產力了
- 如何提升代碼的可維護性(包括代碼規范、文檔整理等等)
- 如何實現性能的優化
于是各種開發工具也就層出不窮,就拿我本人所接觸過且用的比較頻繁的來說吧:
- git 版本控制,多人協作開發
- npm 強大的包管理,以及靈活的 npm scripts
- gulp 自動化構建工具
- webpack 出色的打包能力
- sass/scss 一種 css 預編譯手段
- eslint JS 代碼規范,入門
- postcss CSS 開發中的瑞士軍刀
- ...
對于這些工具我的態度是看需求,自己用著方便即可(學習其實現原理另說,輪子之心不死啊??),畢竟我們的目的是利用工具來簡化流程方便開發管理。
而前端工程化具體到技術實現便是模塊化開發和組件化開發。
模塊化
組件化的核心思想就是:復用且分而治之。
對于 JS 而言,實現就多了:
- CommonJS 最為熟悉的應用便在是 NodeJS 中,不適用瀏覽器環境
- AMD (Asynchronous Module Definition) 彌補 CommonJS 在瀏覽器環境下的尷尬處境,推崇依賴前置,在定義模塊的時候就要聲明其依賴的模塊
- CMD (Common Module Definition) 推崇就近依賴,只有在用到某個模塊的時候再去 require
CSS 中模塊化的實踐就是 sass、less、stylus(表示只用過 sass)就不多解釋了。
組件化
那什么又是前端組件化呢?積木都玩過吧或者都聽說過吧??,前端組件就類似于那一個個幾何形狀的椎啊柱啊,每一個組件之間都是相互獨立的個體,擁有一套完整的視覺效果和一些功能,具體到每個組件它都就近維護這自己的一套資源。代表框架 Vue、React。