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