資訊專(zhuān)欄INFORMATION COLUMN
摘要：接下來(lái)來(lái)看一下是如何編寫(xiě)一個(gè)組件的，在看源碼之前，首先還是要對(duì)他的組件的大致功能有一個(gè)了解，這樣我們?cè)诳丛创a的時(shí)候才會(huì)知道這一段大概實(shí)現(xiàn)了什么功能。最后我實(shí)現(xiàn)的功能文檔以及最終的一個(gè)樣例
在你實(shí)現(xiàn)一個(gè)組件過(guò)程中，一定要注意一下幾點(diǎn)
將代碼模塊化并且分離。如果你將大量的邏輯或者是代碼都放在鉤子函數(shù)中（比如mounted），那么寫(xiě)出來(lái)的組件代碼將非常丑陋，這樣子寫(xiě)出的代碼也往往難以維護(hù)。
第二就是要注意可擴(kuò)展性。因?yàn)槎ㄖ埔粋€(gè)基礎(chǔ)組件，也許當(dāng)你日后還想對(duì)它的功能進(jìn)行擴(kuò)展的話(huà)，那么一定要注意自己代碼的編寫(xiě)結(jié)構(gòu)。
接下來(lái)來(lái)看一下element ui是如何編寫(xiě)一個(gè)table組件的，在看源碼之前，首先還是要對(duì)他的table組件的大致功能有一個(gè)了解，這樣我們?cè)诳丛创a的時(shí)候才會(huì)知道這一段大概實(shí)現(xiàn)了什么功能。
點(diǎn)開(kāi)table的src目錄下，有這么幾個(gè)文件
dropdown.js
filter-panel.vue（實(shí)現(xiàn)表格勾選的組件）
table-body.js （實(shí)現(xiàn)表格body的組件）
table-column.js （實(shí)現(xiàn)表中中每一列的組件）
table-footer.js （定義表格尾部的組件，會(huì)有一些合計(jì)的功能）
table-header.js（定義表格thead的文件）
table-layout.js （定義表格布局的文件）
table-store.js（定義事件的方法集中在這里）
table.vue（最終將上述組件整合后的一個(gè)最終table組件）
util.js（定義了一些工具函數(shù)）
對(duì)于這個(gè)結(jié)構(gòu)也就是像一開(kāi)始提到的那樣，將代碼盡量拆分，這樣組織下來(lái)結(jié)構(gòu)清晰。分析的時(shí)候我將舉例每一種情況的代表，類(lèi)似的照著實(shí)現(xiàn)就可以了。
首先是事件的實(shí)現(xiàn)
以row-click為例，我們使用這個(gè)事件的方式是@row-click=“dosomething”,那組件內(nèi)部如何觸發(fā)這個(gè)事件呢，最簡(jiǎn)單的方法就是在每一次tr循環(huán)的時(shí)候都去綁定上一個(gè)@click事件就好，在這個(gè)事件里面去emit（‘row-click’）事件就好，可是這就是會(huì)有一個(gè)問(wèn)題，事件一多，代碼都集中在methods中，會(huì)寫(xiě)出非常長(zhǎng)的代碼，這個(gè)時(shí)候就需要分離，我們新建一個(gè)store.js，用來(lái)管理各種事件。大致實(shí)現(xiàn)如下：
const TableStore = function (table,initialSatate) {
this.table = table
this.states = {}
}
TableStore.prototype.mutations = {
handleRowClick () {
this.table.emit("row-click")
}
}
Table.prototype.commit = function (name,..agrs){
mutations[name].apply(name,args)
}
我們?cè)诒砀駎able創(chuàng)建一開(kāi)始，在data (){}中就會(huì)創(chuàng)建一個(gè)新的tableStore對(duì)象，我們?cè)诿恳恍悬c(diǎn)擊的時(shí)候只用this.store.commit("handleRowClick");基于這個(gè)流程，如果以后還需要繼續(xù)添加事件，你就可以在mutations里面去定義。
layout.js也是一樣的道理，這里我只是對(duì)表格的高度去進(jìn)行了設(shè)定，對(duì)于一個(gè)vue對(duì)象來(lái)說(shuō)，不能用dom思路去實(shí)現(xiàn)它的高度，我是將vue對(duì)象打印出來(lái)，在一步一步尋找那個(gè)style屬性
TableColumn的實(shí)現(xiàn)
其實(shí)對(duì)于一個(gè)表格來(lái)說(shuō)，他的表頭將會(huì)很重要。在螞蟻金服的那個(gè)antd組件庫(kù)中，他們對(duì)于表頭的定義是這樣的，你需要傳入一個(gè)columns（props），里面將你定義的每一列信息寫(xiě)進(jìn)去，而vue在實(shí)現(xiàn)的過(guò)程中，是將作為
組件children元素,在組件里再去定義每一列的屬性，基于這兩種實(shí)現(xiàn)方式的不同，我覺(jué)得很大程度上是因?yàn)関ue中有一個(gè)標(biāo)簽（也可能是別的原因），但是又有一個(gè)問(wèn)題，就是在table-header/table-body/table-column中，他們都是用的render方法去渲染組件，我在參考他們官方編寫(xiě)的過(guò)程中，用到了jsx語(yǔ)法的模式，不是很理解為什么又采用這種方式去編寫(xiě)組件。
最后我實(shí)現(xiàn)的table功能文檔
以及最終的一個(gè)樣例demo
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82985.html
摘要：本文章從如下圖所示的最基本的入手，分析組件源代碼。本人已經(jīng)對(duì)組件原來(lái)的源碼進(jìn)行削減，源碼點(diǎn)擊這里下載。還有兩個(gè)重要的函數(shù)與。在組件的階段會(huì)調(diào)用更新，從而觸發(fā)重新渲染。例如當(dāng)組件加載后發(fā)送請(qǐng)求，待請(qǐng)求響應(yīng)賦值，重新渲染。 本文章從如下圖所示的最基本的table入手，分析table組件源代碼。本人已經(jīng)對(duì)table組件原來(lái)的源碼進(jìn)行削減，源碼點(diǎn)擊這里下載。本文只對(duì)重要的代碼片段進(jìn)行講解，推薦...
摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類(lèi)文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列...
摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類(lèi)文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列...
摘要：下面一步步拆解上述流程。切換至分支檢測(cè)本地和暫存區(qū)是否還有未提交的文件檢測(cè)本地分支是否有誤檢測(cè)本地分支是否落后遠(yuǎn)程分支發(fā)布發(fā)布檢測(cè)到在分支上沒(méi)有沖突后，立即執(zhí)行。 背景 最近一直在著手做一個(gè)與業(yè)務(wù)強(qiáng)相關(guān)的組件庫(kù)，一直在思考要從哪里下手，怎么來(lái)設(shè)計(jì)這個(gè)組件庫(kù)，因?yàn)闃I(yè)務(wù)上一直在使用ElementUI（以下簡(jiǎn)稱(chēng)Element），于是想?yún)⒖剂艘幌翬lement組件庫(kù)的設(shè)計(jì)，看看Element構(gòu)...
摘要：源碼真的這么可怕嗎從以上的事例中可以看出，其實(shí)并沒(méi)有。對(duì)于源碼的恐懼，讓我們漸漸思維固化，自己告訴自己不要去碰源碼，時(shí)間長(zhǎng)了就遺忘了還有這樣一條路可走。 一個(gè)小需求 事情的起因，是昨天有一個(gè)新的需求被提出。 需求是要實(shí)現(xiàn)，讓我們自己定制的彈出層，具備按下 ESC 也能退出的功能。我把任務(wù)交給了同組的小伙伴S去實(shí)現(xiàn)。（這個(gè)項(xiàng)目用到了vue技術(shù)棧，以及餓了么的UI框架。） 我開(kāi)完會(huì)回來(lái)，發(fā)...
閱讀 1293·2021-09-23 11:51
閱讀 1446·2021-09-04 16:45
閱讀 650·2019-08-30 15:54
閱讀 2099·2019-08-30 15:52
閱讀 1626·2019-08-30 11:17
閱讀 3124·2019-08-29 13:59
閱讀 2046·2019-08-28 18:09
閱讀 403·2019-08-26 12:15
