下拉框搜索

最近頁面中需要一個(gè)下拉框，并且支持搜索功能（搜索選項(xiàng)文本和拼音），這是一個(gè)挺普通的小功能，代碼如下：htp28資訊網(wǎng)——每日最新資訊28at.com

request.ts 先準(zhǔn)備一些假的下拉框數(shù)據(jù)，并模擬請(qǐng)求：htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

Index.vue 中進(jìn)行請(qǐng)求，并渲染下拉框，配置一些屬性，支持搜索選項(xiàng)文本：htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

可以看到實(shí)現(xiàn)了搜索文本，但是產(chǎn)品說還得支持搜索拼音呢~可以看到當(dāng)前是不支持搜索拼音的。htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

拼音搜索

拼音搜索其實(shí)也不難，用一些庫即可，比如 pinyin-pro。htp28資訊網(wǎng)——每日最新資訊28at.com

pnpm i pinyin-pro

我可以使用 pinyin-pro 這個(gè)庫，在獲取數(shù)據(jù)的時(shí)候?yàn)槊恳豁?xiàng)的文本進(jìn)行拼音翻譯，并放到字段 keywords 中。htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在可以看到每一項(xiàng)都有一個(gè) keywords 字段，里面存了每一項(xiàng)的文本和拼音。htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

接著，在頁面中配置一下 Select 的搜索過濾函數(shù)。htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在就支持了文本搜索和拼音搜索了。htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

多個(gè)下拉框拼音搜索

上面例子是只有一個(gè)，那如果有多個(gè)下拉框呢？比如有兩個(gè)下拉框，我準(zhǔn)備了兩個(gè)下拉框的假數(shù)據(jù)。htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

接著在頁面中展示兩個(gè)下拉框：htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

可以看到兩個(gè)下拉框的拼音數(shù)據(jù)耗時(shí)情況，其實(shí)當(dāng)時(shí)頁面上不止兩個(gè)下拉框，大概有十幾個(gè)下拉框，且數(shù)據(jù)都很巨大，如果每一個(gè)下拉框都要接近200ms的耗時(shí)的話，那用戶體驗(yàn)會(huì)很不好。htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

性能優(yōu)化

根據(jù)觀察，我發(fā)現(xiàn)我這個(gè)頁面的十幾個(gè)下拉框其實(shí)都有很多下拉項(xiàng)是相同的，這意味著，有一些項(xiàng)存在重復(fù)翻譯的問題。htp28資訊網(wǎng)——每日最新資訊28at.com

就比如這個(gè)“放米”，options1翻譯過一遍了，options2還翻譯一遍，這就導(dǎo)致了性能損耗。htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

所以其實(shí)可以使用緩存來進(jìn)行優(yōu)化，思路就是：htp28資訊網(wǎng)——每日最新資訊28at.com

1、準(zhǔn)備一個(gè)對(duì)象，key 是文本，value 是拼音htp28資訊網(wǎng)——每日最新資訊28at.com

2、每次翻譯的時(shí)候htp28資訊網(wǎng)——每日最新資訊28at.com

先檢測對(duì)象里是否能匹配到。htp28資訊網(wǎng)——每日最新資訊28at.com

能匹配到直接用，不能匹配到才調(diào)用 pinyin-pro 進(jìn)行翻譯。htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

這樣的話，能避免文本的重復(fù)翻譯，從而提升性能，由于 options2 有很多跟 options1 相同的項(xiàng)，所以 options2 很多項(xiàng)的翻譯都是直接取緩存的，數(shù)據(jù)處理的速度大大提升！htp28資訊網(wǎng)——每日最新資訊28at.com

圖片htp28資訊網(wǎng)——每日最新資訊28at.com

其實(shí)這種方式也是有局限性的，如果每一個(gè) options 的數(shù)據(jù)重合度都不高的話，那么這種優(yōu)化方式也就沒啥意義了htp28資訊網(wǎng)——每日最新資訊28at.com

所以最好的方式還是叫后端翻譯好拼音，傳給前端。htp28資訊網(wǎng)——每日最新資訊28at.com

類似的場景

其實(shí)不止是上面舉的例子，還有其他項(xiàng)目中類似的場景，需要用到這種優(yōu)化方式，比如：復(fù)雜的翻譯、復(fù)雜的數(shù)據(jù)處理。htp28資訊網(wǎng)——每日最新資訊28at.com

例子終究是例子，重要的是能舉一反三。htp28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-90669-0.htmlVue3 中如何做高性能的拼音搜索，提高用戶體驗(yàn)？

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 來自 Rust 生態(tài)的強(qiáng)烈沖擊？談?wù)?Leptos 在語法設(shè)計(jì)上的精妙之處

下一篇： 分享七個(gè).NET開源、功能強(qiáng)大的快速開發(fā)框架