資訊專欄INFORMATION COLUMN
摘要：代碼復(fù)用總是程序員喜聞樂(lè)見(jiàn)的，前端組件化的最終目的就是復(fù)用，今天我們就將深入探討如何實(shí)現(xiàn)組件的復(fù)用。
“懶”是第一生產(chǎn)力。
代碼復(fù)用總是程序員喜聞樂(lè)見(jiàn)的，前端組件化的最終目的就是復(fù)用，今天我們就將深入探討如何實(shí)現(xiàn)UI組件的復(fù)用。
通常我們所說(shuō)的組件往往是包含業(yè)務(wù)邏輯的前端組件，而這類組件實(shí)際上很難實(shí)現(xiàn)廣義上的復(fù)用，頂多能在同一條業(yè)務(wù)線上復(fù)用一下，但UI組件就不一樣了，沒(méi)有了業(yè)務(wù)的約束，只在UI層面上實(shí)現(xiàn)復(fù)用，那想象空間就很大了，所以這里我們只討論UI組件。
首先界定一下，UI組件就是一個(gè)web界面的前端代碼片段，雖然說(shuō)不包含業(yè)務(wù)，但基本的JS效果是可以有的，比如表單驗(yàn)證、輪播圖效果、選項(xiàng)卡效果等等，也就是說(shuō)UI組件可以包括htmlcssjs。我們復(fù)用的目的并不是簡(jiǎn)單的復(fù)制粘貼，而是希望可以實(shí)現(xiàn)一定程度上的自定義，比如界面內(nèi)容可以調(diào)整、顯示樣式可以調(diào)整，甚至JS效果也可以加以設(shè)置，這樣才算真正有實(shí)用價(jià)值的組件復(fù)用。
那么我們就來(lái)構(gòu)思一下如何達(dá)到以上目的。首先最核心的就是組件自定義功能，自定義意味著一個(gè)組件的htmlcssjs代碼都可以被修改，并且編輯過(guò)程要所見(jiàn)即所得。這個(gè)功能我們可以借助模板引擎實(shí)現(xiàn)，思路是，將組件代碼全部用模板語(yǔ)法來(lái)寫(xiě)，然后抽出來(lái)一份配置數(shù)據(jù)，模板引擎用這份數(shù)據(jù)解析模板，就得到了最終瀏覽器可以運(yùn)行的代碼。修改配置的過(guò)程也就是編輯配置數(shù)據(jù)的過(guò)程，編輯后實(shí)時(shí)調(diào)用模板引擎，重新解析得到新的代碼，再將代碼實(shí)時(shí)更新到瀏覽器中，就實(shí)現(xiàn)了編輯過(guò)程所見(jiàn)即所得。
拆解一下，這個(gè)功能大致需要實(shí)現(xiàn)以下幾個(gè)部分：組件代碼的獲取、配置數(shù)據(jù)的可視化、模板引擎的調(diào)用、配置文件編輯、組件演示、組件html/css/js代碼復(fù)制。
再延伸一下，組件代碼的自動(dòng)獲取想必要依賴一定的組織規(guī)律，那么就要先約定好組件的管理方式。比如約定組件由一個(gè)文件夾組成，內(nèi)部包含temp.html/style.css/script.js三個(gè)模板文件，再加上一個(gè)config.json配置數(shù)據(jù)文件。組件應(yīng)該有一個(gè)總的存放文件夾作為組件庫(kù)，為了能獲取到組件的信息，組件庫(kù)還需要一個(gè)目錄文件，提供所有組件的列表以及每一個(gè)組件的信息，這樣就可以通過(guò)這個(gè)目錄獲取到組件的模板、配置以及任何我們需要的信息了。
基于以上分析已經(jīng)可以著手開(kāi)發(fā)一個(gè)UI組件管理工具了，能夠?qū)崿F(xiàn)組件管理、預(yù)覽、編輯、代碼復(fù)制功能。
如果止步于此，那這個(gè)工具的實(shí)用價(jià)值不是很大。圍繞前端代碼復(fù)用，還可以進(jìn)一步擴(kuò)展功能，比如是否可以從設(shè)計(jì)環(huán)節(jié)就開(kāi)始參與到前端組件管理呢？由設(shè)計(jì)師發(fā)布并維護(hù)公司內(nèi)部UI組件庫(kù)，在項(xiàng)目設(shè)計(jì)階段，就可以從組件庫(kù)中挑選基礎(chǔ)組件加以調(diào)整，并將結(jié)果交付給前端，前端只需要將設(shè)計(jì)師的組件還原，就可以得到能直接用于項(xiàng)目的前端代碼了。
回顧一下，這里面需要組件庫(kù)實(shí)現(xiàn)的功能是，將組件的編輯結(jié)果生成一個(gè)特殊代碼，這個(gè)代碼用來(lái)在管理工具內(nèi)還原組件的編輯現(xiàn)場(chǎng)，從而實(shí)現(xiàn)設(shè)計(jì)過(guò)程到前端開(kāi)發(fā)的交接。這個(gè)功能的實(shí)現(xiàn)原理是將組件原始配置與所修改配置做合并，得到組件的修改后配置，再用于組件的渲染和展示，就可以還原設(shè)計(jì)現(xiàn)場(chǎng)了。
到這里我們需要的功能就基本完整了，目前這個(gè)工具已經(jīng)開(kāi)發(fā)完成，并在以上功能的基礎(chǔ)上，又增加了用戶管理和使用統(tǒng)計(jì)，有助于更好的優(yōu)化組件庫(kù)建設(shè)。
源碼：Github
預(yù)覽：http://refined-x.com/WidgetsPlayground/
如果項(xiàng)目對(duì)你有幫助，請(qǐng)去Github盡情的star不要客氣。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83647.html
摘要：從協(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ì)疑...
摘要：介紹微信風(fēng)格的，與客戶端體驗(yàn)一致，這個(gè)自己去微信上看吧，略。微信調(diào)試一件套，網(wǎng)頁(yè)授權(quán)模擬集成代理遠(yuǎn)程調(diào)試。這些在微信開(kāi)發(fā)者中心有介紹，略。年微信開(kāi)發(fā)經(jīng)驗(yàn)的人，終于又成為了零年開(kāi)發(fā)經(jīng)驗(yàn)的人，重新走上了踩坑之路。 showImg(https://segmentfault.com/img/bVtEd1);活動(dòng)地址：http://fequan.com/2016/ 注意：英文不好，小記也帶有自己...
摘要：為什么會(huì)出現(xiàn)前端工程化這個(gè)概念當(dāng)前端業(yè)務(wù)日益復(fù)雜化和多元化，就會(huì)出現(xiàn)許多問(wèn)題。這時(shí)候就出現(xiàn)了前端工程化的概念，從軟件工程的角度來(lái)解決問(wèn)題。 為什么會(huì)出現(xiàn)前端工程化這個(gè)概念？當(dāng)前端業(yè)務(wù)日益復(fù)雜化和多元化，就會(huì)出現(xiàn)許多問(wèn)題。比如說(shuō)：如何提高開(kāi)發(fā)效率？如何保證項(xiàng)目的可維護(hù)性？如何提高項(xiàng)目的開(kāi)發(fā)質(zhì)量？多人合作，架構(gòu)分層，模塊設(shè)計(jì)，解耦，抽象，復(fù)用，mock，聯(lián)調(diào)，部署等等。。這時(shí)候就出現(xiàn)了前端...
閱讀 1273·2023-04-25 23:22
閱讀 1673·2023-04-25 20:04
閱讀 2648·2021-11-22 15:24
閱讀 2807·2021-11-11 16:54
閱讀 1888·2019-08-30 14:03
閱讀 1486·2019-08-29 16:35
閱讀 1706·2019-08-26 10:29
閱讀 2663·2019-08-23 18:01
