如何降低前端開發的複雜度

來自專欄 前端學堂

優秀的程序員總是能優雅的組織自己的代碼，清晰的編寫思路，合理的組織結構劃分，從小的功能組件，到大的模塊結構，都能通過合理的巧妙的搭配，不僅能化複雜為簡單，更能提升代碼運行效率，提高代碼的可維護性。我們作為前端開發，都應該具有這樣的能力。

那麼如何才能降低業務開發的複雜度呢？

細分組件

都說模塊化開發，其實在AMD，CMD這些思想規範之前就已經有模塊化開發的規範了，雖然JavaScript標準從es1-es4 然後隔了n年才有了es5，在那N年基本都是『函數式開發』，一切皆函數。之前還沒有模塊化載入的思想，畢竟也不需要，富客戶端還是flash的天下，基本都是簡單的網頁嵌套一些後端的代碼邏輯，然後通過後端渲染引擎渲染或者解釋器解釋產出html頁面，什麼ASP，PHP，JSP等等。

然而之前的模塊化稱不上是模塊，為什麼呢？因為沒有模塊載入器，主要是通過JS載入順序來控制載入的，依賴的JS文件放在前面。模塊主要是按照文件來劃分，每個文件是個獨立的功能模塊，在自定義的命名空間下掛在需要暴露出來的函數，其他函數可以調用。當然也有一些打包工具，可以根據事先定義好的文件列表，把多個文件打包成一個bundle。

而現在，且不說你是喜歡自己編寫或者用現有的模塊載入器，或者直接用像Angular，React，Vue等現成的腳手架做開發，當然自帶的就有了模塊載入，配合Webpack、Rollup等打包工具，可以完美構建你想要的項目加購。

所以呢，建議還是要按照功能和業務結構劃分你的組件，這樣呢一方面可以將功能解耦，一方面方便實現各自的業務邏輯，滿足keep it simple的原則，模塊自製。組件細分的得當，就不會出現一大堆函數代碼，來回修改各種狀態，一堆變數，一個函數寫幾十行那樣。

建議：ES6 module + 函數式編程 + webpack/rollup ，絕對可以滿足你的需要，關於業務如何拆分，拆分的維度，後面介紹。

關於MVVM前端框架，這裡有個編寫vm的教程，github：chalecao/virtualdom

獨立狀態維護

狀態是什麼？狀態是數據。

程序是什麼？程序是數據+代碼。

所以可見數據的重要性，如何維護好一份數據至關重要。那麼前面我們說了細分組件，數據呢？ 數據是跟著組件的，那麼數據自然也是需要做劃分了。這裡面說的是獨立狀態維護。假設一個組件的代碼是這樣的。

/** 約定規範 **/// 狀態const state={}//行為const actions={ init:()=>{ //組織聲明周期 }}//視圖const view=()=>( <div></div>)

這樣很清晰的將程序代碼劃分成了狀態、邏輯和視圖。邏輯操作狀態，視圖更新展示狀態。

為什麼說要獨立狀態維護呢？也是為了降低耦合、提升組件復用。組件的狀態應該只是包含組件需要的數據，而不應該包含其他多餘的數據，按照軟體設計單一職責的原則，組件的職責應該也是單一的，就是負責這個組件的增刪改的功能。

需要說明的是組件的開發應該也是需要遵守數據驅動化的開發模式，避免直接操作DOM，即使是從DOM上拿數據，有同學喜歡這麼干哈，把數據通過data-x屬性掛在節點上，然後通過節點獲取數據，這樣操作是不好的，首先這種操作有副作用，而且容易引發bug，而且也可能有安全風險。

細心的同學可能要問，那麼組件通信怎麼辦呢？組件之間的交互可以通過註冊函數hook的形式進行。當前你也可以做一個事件註冊和分發的功能，不過一般一個SPA頁面不需要做的這麼複雜，如果真的是很複雜的頁面，還是建議做成做個頁面。沒必要做成一個大大的SPA。

函數式編程

關於fp函數式編程，這裡有個函數式編程教程，github地址：chalecao/fp

這裡並不是來討論函數式編程和OOP編程的好壞，你可以二者都用，也可以用其中一種，並沒有限制，看個人喜好。

我個人呢之前經常都是class 還有extends混入高級的this。後來漸漸轉向了fp函數式編程，完完全全可以避免使用new，避免使用this，而且結合上面 獨立狀態維護 中的結構劃分，結合ES6的模塊劃分，可以很優雅的實現我所有需要實現的業務邏輯功能。

優雅的打包

一入node深似海，如何用的更好，用的更六六六，就靠自己積累了。這裡推薦個結合區塊鏈熱點做的關於nodejs的教程，github地址：chalecao/blockchain-in-nodejs

正如第一部分所提到的細分組件，組件的劃分和依賴管理，都少不了npm，然後結合webpack或者rollup的打包優勢，可以做到開發更輕量的應用。