資訊專欄INFORMATION COLUMN
摘要：組件化開發(fā)的優(yōu)點?？梢院艽蟪潭鹊慕档拖到y(tǒng)各個功能的耦合性，并且提高了功能內部的聚合性。耦合性的降低，提高了系統(tǒng)的伸展性，降低了開發(fā)的復雜度，提升開發(fā)效率，降低開發(fā)成本。這個是前端組件開發(fā)需要處理的難點。
如今前端技術飛速發(fā)展，基本是基于三大框架開發(fā)的SPA（單頁面應用）。本文主要是總結一下組件化開發(fā)思想重要點。
組件化可以幫助解決前端結構的復用性問題，整個頁面可以由不同的組件組合、嵌套構成。
一個組件有自己的現實形態(tài)和行為，組件的顯示形態(tài)和行為可以由（React中數據狀態(tài)（state）和配置參數（props）Vue中是data和props）共同決定。
數據狀態(tài)和配置參數的改變都會影響到組件的顯示形態(tài)。當數據變化的時候，組件的顯示需要更新。所以組件化模式能提供一種高效的自動化地幫我們更新頁面。降低了代碼的復雜度，帶來更好的可維護性。
那么我們在基于組件開發(fā)的時候就主要考慮分析需求。
拿到一個需求以后，我們要做的第一件事情就是理解需求、分析需求、劃分這個需求由哪些組件構成。
組件的劃分沒有特別明確的標準。劃分組件的目的是為了代碼可復用性、可維護性。只要某個部分有可能復用到別的地方，你都可以把它抽離出來當成一個組件；或者把某一部分抽離出來對代碼的組織和管理會帶來幫助，你也可以毫不猶豫地把它抽離出來。
說到底，前端組件化開發(fā)之后?？梢院艽蟪潭鹊慕档拖到y(tǒng)各個功能的耦合性，并且提高了功能內部的聚合性。這對前端工程化以及降低代碼的維護難度，是有很大幫助的。
耦合性的降低，提高了系統(tǒng)的伸展性，降低了開發(fā)的復雜度，提升開發(fā)效率，降低開發(fā)成本。
組件封裝的好，加班也少了，bug 也少了，就有更多時間喝喝咖啡、撩撩小姐姐、打打吃雞了。:) 美滋滋。
設計組件要遵循一個原則：一個組件只專注做一件事，且把這件事做好。
組件化開發(fā)的難點。
模塊（組件）之間需要共享數據”，和“數據可能被任意修改導致不可預料的結果”之間的矛盾。這個是前端組件開發(fā)需要處理的難點。
基于這個點目前我認為處理最好的工具就是Redux狀態(tài)管理工具。有興趣的同學可以移步Redux中文文檔。http://cn.redux.js.org/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54763.html
摘要：組件化開發(fā)的優(yōu)點?？梢院艽蟪潭鹊慕档拖到y(tǒng)各個功能的耦合性，并且提高了功能內部的聚合性。耦合性的降低，提高了系統(tǒng)的伸展性，降低了開發(fā)的復雜度，提升開發(fā)效率，降低開發(fā)成本。這個是前端組件開發(fā)需要處理的難點。 如今前端技術飛速發(fā)展，基本是基于三大框架開發(fā)的SPA（單頁面應用）。本文主要是總結一下組件化開發(fā)思想重要點。 組件化可以幫助解決前端結構的復用性問題，整個頁面可以由不同的組件組合、嵌...
摘要：從協(xié)作關系上講，很多前端開發(fā)團隊每個成員的職責不是很清晰，有了前端的框架，這個狀況會大有改觀?？蚣艿睦砟钍前亚岸税凑章氊煼謱?，每一層都相對比較獨立，有自己的價值，也有各自發(fā)揮的余地。 簡介: MV框架又是為什么興起的呢？它的出現，伴隨著一些 Web 產品逐漸往應用方向發(fā)展，遇到了在 C/S 領域相同的問題：由于前端功能的增強、代碼的膨脹，導致不得不做前端的架構這個事情了。經常有人質疑...
摘要：比如以為例，一個組件，包括一個文件一個文件圖片組件在中便可如下加載使用導出為對象的模塊化其實，還有另外一種思路，就是將內置中，成為的一部分。 CSS 模塊化 CSS(Cascading Style Sheets)，從誕生之初就決定了它無法編程，甚至連解釋性語言都算不上，只能作為一種簡單的層疊樣式表，對 HTML 元素進行格式化。 但隨著前端的發(fā)展，前端項目已經變得越來越龐大和復雜，社區(qū)...
摘要：比如以為例，一個組件，包括一個文件一個文件圖片組件在中便可如下加載使用導出為對象的模塊化其實，還有另外一種思路，就是將內置中，成為的一部分。 CSS 模塊化 CSS(Cascading Style Sheets)，從誕生之初就決定了它無法編程，甚至連解釋性語言都算不上，只能作為一種簡單的層疊樣式表，對 HTML 元素進行格式化。 但隨著前端的發(fā)展，前端項目已經變得越來越龐大和復雜，社區(qū)...
閱讀 2862·2021-07-30 15:30
閱讀 559·2019-08-30 15:55
閱讀 1625·2019-08-26 17:04
閱讀 637·2019-08-26 11:36
閱讀 2070·2019-08-26 10:58
閱讀 3553·2019-08-23 14:34
閱讀 1561·2019-08-22 18:48
閱讀 2529·2019-08-21 17:51
