我眼中的前端世界

接觸而且正式入坑前端也有近兩年了，談談我我的對於前端開發的一種理解吧，全爲我的體驗之談。

偏向設計

所謂偏向設計，即是前端開發的最終目的即是將腦子裏的 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

AMD 和 CMD 的區別有哪些？

CSS 中模塊化的實踐就是 sass、less、stylus（表示只用過 sass）就很少解釋了。

組件化

那什麼又是前端組件化呢？積木都玩過吧或者都據說過吧?，前端組件就相似於那一個個幾何形狀的椎啊柱啊，每個組件之間都是相互獨立的個體，擁有一套完整的視覺效果和一些功能，具體到每一個組件它都就近維護這本身的一套資源。表明框架 Vue、React。

最後

第一次在社區發帖，對於個人理解有誤或不足的地方歡迎補充拍磚 ?

原文連接：http://minds.hxtao.xyz/front-...