資訊專欄INFORMATION COLUMN
摘要：我們作為前端開發，都應該具有這樣的能力。那么如何才能降低業務開發的復雜度呢細分組件都說模塊化開發，其實在，這些思想規范之前就已經有模塊化開發的規范了，雖然標準從然后隔了年才有了，在那年基本都是函數式開發，一切皆函數。
優秀的程序員總是能優雅的組織自己的代碼，清晰的編寫思路，合理的組織結構劃分，從小的功能組件，到大的模塊結構，都能通過合理的巧妙的搭配，不僅能化復雜為簡單，更能提升代碼運行效率，提高代碼的可維護性。我們作為前端開發，都應該具有這樣的能力。
那么如何才能降低業務開發的復雜度呢？
細分組件都說模塊化開發，其實在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 ，絕對可以滿足你的需要，關于業務如何拆分，拆分的維度，后面介紹。
獨立狀態維護狀態是什么？狀態是數據。
程序是什么？程序是數據+代碼。
所以可見數據的重要性，如何維護好一份數據至關重要。那么前面我們說了細分組件，數據呢？ 數據是跟著組件的，那么數據自然也是需要做劃分了。這里面說的是獨立狀態維護。假設一個組件的代碼是這樣的。
/** 約定規范 **/
// 狀態
const state={
}
//行為
const actions={
init:()=>{
//組織聲明周期
}
}
//視圖
const view=()=>(
)
這樣很清晰的將程序代碼劃分成了狀態、邏輯和視圖。邏輯操作狀態，視圖更新展示狀態。
為什么說要獨立狀態維護呢？也是為了降低耦合、提升組件復用。組件的狀態應該只是包含組件需要的數據，而不應該包含其他多余的數據，按照軟件設計單一職責的原則，組件的職責應該也是單一的，就是負責這個組件的增刪改的功能。
需要說明的是組件的開發應該也是需要遵守數據驅動化的開發模式，避免直接操作DOM，即使是從DOM上拿數據，有同學喜歡這么干哈，把數據通過data-x屬性掛在節點上，然后通過節點獲取數據，這樣操作是不好的，首先這種操作有副作用，而且容易引發bug，而且也可能有安全風險。
細心的同學可能要問，那么組件通信怎么辦呢？組件之間的交互可以通過注冊函數hook的形式進行。當前你也可以做一個事件注冊和分發的功能，不過一般一個SPA頁面不需要做的這么復雜，如果真的是很復雜的頁面，還是建議做成做個頁面。沒必要做成一個大大的SPA。
函數式編程關于fp函數式編程github地址：https://github.com/chalecao/fp
這里并不是來討論函數式編程和OOP編程的好壞，你可以二者都用，也可以用其中一種，并沒有限制，看個人喜好。
我個人呢之前經常都是class 還有extends混入高級的this。后來漸漸轉向了fp函數式編程，完完全全可以避免使用new，避免使用this，而且結合上面 獨立狀態維護 中的結構劃分，結合ES6的模塊劃分，可以很優雅的實現我所有需要實現的業務邏輯功能。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113201.html
摘要：我們作為前端開發，都應該具有這樣的能力。那么如何才能降低業務開發的復雜度呢細分組件都說模塊化開發，其實在，這些思想規范之前就已經有模塊化開發的規范了，雖然標準從然后隔了年才有了，在那年基本都是函數式開發，一切皆函數。 優秀的程序員總是能優雅的組織自己的代碼，清晰的編寫思路，合理的組織結構劃分，從小的功能組件，到大的模塊結構，都能通過合理的巧妙的搭配，不僅能化復雜為簡單，更能提升代碼運行...
摘要：我們作為前端開發，都應該具有這樣的能力。那么如何才能降低業務開發的復雜度呢細分組件都說模塊化開發，其實在，這些思想規范之前就已經有模塊化開發的規范了，雖然標準從然后隔了年才有了，在那年基本都是函數式開發，一切皆函數。 優秀的程序員總是能優雅的組織自己的代碼，清晰的編寫思路，合理的組織結構劃分，從小的功能組件，到大的模塊結構，都能通過合理的巧妙的搭配，不僅能化復雜為簡單，更能提升代碼運行...
摘要：前端中的計算機領域的通常認為起源于。并對其主要內容作了自己的解讀。搬到另一個地區會導致名氣降低。年度報告，年最受歡迎的編程語言年上最流行的種編程語言及前十最火熱的項目排行榜，分別由及登頂。技術周刊由小組出品，匯聚一周好文章，周刊原文。 showImg(https://segmentfault.com/img/bVWHC4?w=1000&h=710); 本期推薦 反擊爬蟲，前端工程師的腦...
摘要：自動化接入和升級方案通過命令行工具提供一鍵接入升級能力，同時集成到團隊腳手架中，大大降低了工程接入和維護的成本。原始代碼經過解析器的解析，在管道中逐一經過所有規則的檢查，最終檢測出所有不符合規范的代碼，并輸出為報告。 引言 代碼規范是軟件開發領域經久不衰的話題，幾乎所有工程師在開發過程中都會遇到，并或多或少會思考過這一問題。隨著前端應用的大型化和復雜化，越來越多的前端工程師和團隊開始重...
摘要：純前端開發主要是針對靜態頁面。自主權最大，正常是使用進行輔助開發，上線等。大致原因使用是為了和端的保持同步。四總結對于比較正式的項目，前端技術選型策略一定是產品收益最大化，用戶在首位。 對于前端團隊，可以實現企業受益最大化要點。 一、技術選型的策略 1、保證產品質量 （1）功能穩健：網頁不白屏，不錯位，不卡死；操作正常；數據精準。 （2）體驗優秀：加載體驗，交互體驗，視覺體驗，無障礙訪...
閱讀 1166·2021-11-11 16:55
閱讀 3051·2021-08-16 11:00
閱讀 2894·2019-08-30 15:56
閱讀 3434·2019-08-30 11:24
閱讀 3415·2019-08-30 11:05
閱讀 3531·2019-08-29 15:15
閱讀 2614·2019-08-26 13:57
閱讀 2553·2019-08-23 18:17
