目錄
- 組件二封不是換一種寫法
- 組件二封應當具備哪些條件
- 我認為的二封應當有哪些作用
- 二封的好處
- 先來一個串列頁demo來看看效果(Vue2)
本文僅僅針對vue系列做探討, 專案傾向于大量增刪改查的后臺管理專案
組件二封不是換一種寫法
大量帖子的組件二封都是用json, 然后將prop/emit/slot通過一種json配置來完成.
不是說這種寫法絕對不好, 畢竟還真有這種場景, 比如動態表單.
但是, 一般理性而論, 失去了IDE的代碼提示, 失去了eslint的規范檢查, 不夠靈活且不方便除錯.
順帶一提, 還有this指向問題.
封裝的意義在于更好的維護, 而不是為了封裝而封裝
組件二封應當具備哪些條件
-
團隊人員穩定
二封組件過多, 相當于每個人都要花時間了解二封的內容, 人員流動大, 二封可能會得不償失
-
團隊有一定的樣式規范
通往羅馬的路不止一條, 規范的作用是只走一條, 比如說我們有如下要求:
- 檢索按鈕應當在檢索條件下另起一行, 并置于右側
- 所有table應當具有斑馬條紋和border
- select下拉組件應當和input組件等寬
- 分頁默認10, 可選10/20/50, 居右, 變數名: pageSize(大小)/pageNum(頁碼)
上述規范僅舉例, 未必合理. 擁有類似這樣的規范, 才是二封的前提
-
團隊有一定的編碼規范
如上述樣式規范, 如果沒有編碼規范, 每個規范實作方式都千奇百怪
那么根據上述, 我們有如下對應的編碼規范
- 檢索條件另起一行功能應當用el-row+"text-align: right"實作, 而不是float實作
- table的斑馬條紋應當用ElTable的stripe和border屬性實作, 禁止自己寫css樣式
- select下拉組件與input等寬, 應當由全域樣式處理, 而非每個select組件上添加樣式
- 分頁可選引數去某個地方讀取配置, 使用float固定居右
-
團隊技術領匯入具有一定能力
多了不說, vue2的話, mixin, 生命周期, 自定義指令, provide/inject, 這些官方指南上介紹的功能都應該熟悉, 還要熟悉vue的官方風格指南
vue3的話, 二封最好ts, 熟悉ts, 異步組件, 單檔案組件, 自定義指令, 熟悉官方風格指南
我覺得這些就夠了, 差一點也沒關系, 二封沒那么難. 全都是在呼叫原有組件的api而已
PS: 并不是說只會這些就夠了
-
公司層面的支持
好的封裝, 不論是二封, 工具類, 規范設計, 對于小公司來說都是很大的開銷, 如果公司沒這個打算, 還是自己搗鼓著玩吧. 就像某boss的言論: "我覺得代碼寫的太好或太差都不行, 別人看不懂, 還不如沒寫". 這種情況下就需要審時度勢了
我認為的二封應當有哪些作用
- 實作團隊中90%以上的功能全部使用二封組件
- 過濾掉原有組件中不推薦使用的prop/methods(expose)/slot
- 樣式處理, 如檢索條件的布局, 串列的布局, 常規表單的布局等等等等
- 自動的格式轉換, 如日期格式應當僅使用字串格式, 以下是幾個組件常見日期格式, 幾乎每次傳給后端都需要自己處理一下, 很是麻煩:
- element-ui: Date/Date[]
- element-plus: Date/number/string/any[]
- antd vue 1.x: moment
- antd vue 2.x: dayjs
- 功能拓展, 列舉一下我見到的一些需求, 有些功能是部分場景有的, 有些則是全部場景都要的, 全部場景都要, 就要盡量禁止開發人員關閉此功能
- table列支持拖拽調整列寬
- table支持自定義列
- 日期選擇器支持快速選擇, 輸入時支持中文冒號
- 數字輸入時, 自動提示大寫, 如"一萬兩千三百四十二"
- 圖片/視頻/檔案預覽功能(這種需求就千奇百怪了)
- 所有彈窗支持可拖拽
- 功能屏蔽, 列舉一下我見過的客戶不要的, 組件默認啟用的功能:
- 數字輸入框, 屏蔽+/-號和控制按鈕
- 彈窗干掉右上角的x號
- 彈窗不允許點擊空白處關閉
- 靈活性, 業務人員只需要關心"有沒有", 而不需要關心樣式
- 如檢索表單, 查詢/重置按鈕位置
- 如表格支持自定義列
- 如彈窗的可拖拽, 亦無需業務人員處理
- 如按鈕封裝, 業務人員無需關心使用什么按鈕圖示, 按鈕里面應當是什么文字
二封的好處
先來一個串列頁demo來看看效果(Vue2)
<template>
<div>
<ly-form :loading="loading" search-form @reset="handleReset" @search="handleSearch">
<ly-input label="客戶姓名" v-model="searchForm.title"/>
<ly-input label="客戶手機號" v-model="searchForm.title"/>
<template #append-buttons>
<ly-btn-create @click="$refs.edit.init()"/>
</template>
</ly-form>
<ly-table :data="https://www.cnblogs.com/liangyun/archive/2023/01/05/tableData" :loading="loading" :paging="paging" @paging="handleSearch">
<ly-table-index/>
<ly-table-column label="客戶姓名" prop="name"/>
<ly-table-column label="客戶類別" dict-code="sys_xxx_type" prop="type" />
<ly-table-column label="客戶消費額" prop="consumption" sortable />
<ly-table-column label="客戶活躍度" prop="loginDays" sortable />
<ly-table-action >
<template #default="{row}">
<ly-action-detail @click="$router.push({name: 'CustomerDetail', query: {id: row.id}})"/>
<ly-action-modify @click="$refs.edit.init(row)"/>
<ly-action-remove @click="handleRemove(row.id)"/>
</template>
</ly-table-action>
</ly-table>
<customer-edit ref="edit" @ok="handleSearch"/>
</div>
</template>
<script>
import LySearchMixin from '@/mixins/ly-search-mixin'
import {customerService} from '@/api/biz/xxx'
import CustomerEdit from '@/views/biz/dataset-manage/component/dataset-edit'
export default {
name: 'CustomerManage',
components: {CustomerEdit},
mixins: [LySearchMixin],
data: () => ({
api: {search: customerService.search, remove: customerService.remove}
})
}
</script>
來讓我們梳理一下這段代碼的封裝內容:
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541303.html
標籤：其他
上一篇：獲取某地模型并用Cesium加載