前言

最近發(fā)布了一款支持IOC容器的Vue3框架：Zova。與以往的OOP或者Class方案不同，Zova在界面交互層面仍然采用Setup語(yǔ)法，僅僅在業(yè)務(wù)層面引入IOC容器。IOC容器猶如一把鑰匙，為我們打開(kāi)了業(yè)務(wù)工程化的大門(mén)，允許我們探索更多工程化方面的設(shè)計(jì)和能力。有網(wǎng)友提出一個(gè)非常好的建議：可否提供一些業(yè)務(wù)場(chǎng)景，說(shuō)明有哪些是Class可做而Composable做不了的，這樣才更有說(shuō)服力。

首先說(shuō)明一點(diǎn)，其實(shí)沒(méi)有哪些業(yè)務(wù)需求是這個(gè)能做而那個(gè)不能做的。不同的編程范式帶來(lái)的是不同的代碼風(fēng)格，不同的編程體驗(yàn)，從不同的路徑指向開(kāi)發(fā)效率和代碼可維護(hù)性方面的評(píng)估。因此，最終根據(jù)用戶(hù)自身的偏好和業(yè)務(wù)實(shí)際需求而定。

那么，在這里，我們就針對(duì)這個(gè)話(huà)題如何為路由Query參數(shù)標(biāo)注類(lèi)型為例，看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同。

需求說(shuō)明

這里有一個(gè)頁(yè)面組件User，可以通過(guò)Query傳遞三個(gè)參數(shù)：

Composable：原生

1. 訪(fǎng)問(wèn)頁(yè)面

const router = useRouter();
router.push({
  path: '/test/demo/user',
  query: {
    id: 1,
    name: 'kevin',
    married: false.toString(),
  },
});

從Typescript類(lèi)型的角度來(lái)看，這段代碼有以下兩個(gè)問(wèn)題：

• path：沒(méi)有類(lèi)型約束和智能提示。這會(huì)存在以下三個(gè)隱患：

  記不住：如果路徑較長(zhǎng)，或者單詞較復(fù)雜，就記不住路徑，需要從源文件查找

  寫(xiě)錯(cuò)了：如果不小心寫(xiě)錯(cuò)了，沒(méi)有提示，只有到實(shí)際運(yùn)行時(shí)才會(huì)暴露錯(cuò)誤

  被改了：如果后續(xù)維護(hù)代碼時(shí)，路徑有了變更，那么這里的代碼同樣沒(méi)有提示，只有到實(shí)際運(yùn)行時(shí)才會(huì)暴露錯(cuò)誤

• query：只有有限的類(lèi)型約束，與業(yè)務(wù)類(lèi)型并不一致

  比如不支持Boolean類(lèi)型，必須強(qiáng)制轉(zhuǎn)換為String類(lèi)型

2. 獲取參數(shù)

const route = useRoute();
const id = parseInt(route.query.id ?? 0);
const name = route.query.name ?? '';
const married = route.query.married === 'true' ? true : false;

由于沒(méi)有提供類(lèi)型工具，需要針對(duì)每一個(gè)參數(shù)單獨(dú)處理

Composable：useRouteQuery

1. 訪(fǎng)問(wèn)頁(yè)面

（同上）

2. 獲取參數(shù)

import { useRouteQuery } from '@vueuse/router';
const id = useRouteQuery('id', 0, { transform: Number });
const name = useRouteQuery('name', '');
const married = useRouteQuery('married', 'false', {
  transform: value => {
    return value === 'true' ? true : false;
  },
});

IOC容器

1. 定義類(lèi)型

import { zz } from 'zova';
export const QuerySchema = zz.object({
+  id: zz.number().default(0),
+  name: zz.string().default(''),
+  married: zz.boolean().default(false),
});

• zz是在zod基礎(chǔ)上做的加強(qiáng)版，特別針對(duì)路由參數(shù)做了處理，支持array數(shù)組和json對(duì)象，具體參見(jiàn)：Zova: zod
• 在定義類(lèi)型的同時(shí)可以指定缺省值

2. 訪(fǎng)問(wèn)頁(yè)面

const url = this.$router.resolvePath('/test/demo/user', {
  id: 0,
  name: 'kevin',
  married: false,
});
this.$router.push(url);

• resolvePath的參數(shù)都有類(lèi)型約束和智能提示，并且與業(yè)務(wù)類(lèi)型保持一致

3. 獲取參數(shù)

const id = this.$query.id;
const name = this.$query.name;
const married = this.$query.married;

• 直接通過(guò)this.$query獲取參數(shù)值，有明確的類(lèi)型，并且不需要處理缺省值

總結(jié)

從上面的示例對(duì)比可以看出，采用IOC容器，可以實(shí)現(xiàn)定義與使用的分離，而且定義側(cè)可以通過(guò)工具來(lái)創(chuàng)建腳手架，進(jìn)一步簡(jiǎn)化定義的書(shū)寫(xiě)。由于TS類(lèi)型和缺省值等規(guī)范性代碼都在定義側(cè)完成了，那么在使用側(cè)代碼就更加簡(jiǎn)潔直觀了。不知您的代碼風(fēng)格偏好是什么，是否還有更好的表達(dá)方式，歡迎在評(píng)論區(qū)交流。

參考資料

• VueUse: useRouteQuery
• Zova: 路由Query

到此這篇關(guān)于在Vue3中如何為路由Query參數(shù)標(biāo)注類(lèi)型的文章就介紹到這了,更多相關(guān)Vue3路由Query參數(shù)標(biāo)注類(lèi)型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論