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