開(kāi)發(fā) VueThis$Store 一些技巧

上次答應(yīng)一個(gè)讀者介紹下開(kāi)發(fā)此插件的一些原理和技巧，在此也一并做下總結(jié)了。

基本工具

1 正則表達(dá)式，正則表達(dá)式大家都不陌生，正則表達(dá)式的優(yōu)點(diǎn)就是速度快，對(duì)于一個(gè)代碼補(bǔ)全的插件，用戶肯定希望更快的得到反饋，測(cè)試了 1000 行的 vue 文件匹配全部的 mapXXX() 之類(lèi)的 api 字符串也只是用了 1ms 都不到的時(shí)間，但是缺點(diǎn)也非常明顯，他是上下文無(wú)關(guān)的，比如說(shuō)

mapState({
 a: state => state.test,
});

這樣一段代碼，我們可以使用 vscode 的 api 當(dāng)觸發(fā)了補(bǔ)全后，用 /\bmapState\(([\'\"](.*)[\'\"](?:,\s*)?)?((\[[\s\S]*?\])|(\{[\s\S]*?\}))?\s*\)/g 捕獲到上面這段代碼，但是朋友你還要考慮的是，函數(shù)有三種方法

mapState({
 a: state => state.test,
 b(s) {
 return s.test;
 },
 c: function(s) {
 return s.test;
 },
});

你怎么使用正則表達(dá)式捕獲到 a, b, c 三個(gè)屬性并且拿到三個(gè)函數(shù)的第一個(gè)參數(shù)呢，不排除有人能做到，但是可能會(huì)耗費(fèi)不少時(shí)間吧。

2 Abstract Syntax Tree（以下用簡(jiǎn)寫(xiě) ast），我這里是使用時(shí) babel 的 parser babylon ,ast 和正則表達(dá)式的優(yōu)缺點(diǎn)有點(diǎn)互補(bǔ)的意思，parser 缺點(diǎn)是相對(duì)慢，但是通過(guò) parser 得到的 ast 對(duì)于一代碼的描述更加精確，你可以得到函數(shù)的參數(shù)，等很多信息，這里了就不科普，掘金有很多介紹 ast 的文章，這里強(qiáng)烈推薦這個(gè)網(wǎng)站astexplore，你可以在網(wǎng)站上練習(xí)，做一些很酷的事情。

開(kāi)工

有了這兩種工具，我們就可以開(kāi)始寫(xiě)代碼啦，既然兩種工具的優(yōu)缺點(diǎn)是互補(bǔ)的，我就想能不能將他們結(jié)合起來(lái)使用，最終想到的比較理想的方法就是，使用正則表達(dá)式捕獲 mapXXX 這種工具函數(shù)，找到所有匹配的代碼段以后使用 parser 獲取 ast，在來(lái)分析函數(shù)的參數(shù)，因?yàn)?ast 里信息非常豐富，我們可以獲取到是哪種的函數(shù)，以及函數(shù)的第一個(gè)參數(shù)，這樣用戶使用 . 觸發(fā)補(bǔ)全時(shí)，即使用了 state 的簡(jiǎn)寫(xiě) s，我們?nèi)匀豢梢越o出正確的建議。

但是我們要獲取 store 中所有的定義，就必須找到 store 的入口文件，怎樣找到 store 的入口文件呢？還記得我們平時(shí)是怎么注入 store 的么？

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
 render: h => h(App),
 store,
}).$mount('#app');

我們只要通過(guò)parser的到這段文本的ast，就可以獲取到store的相對(duì)路徑了，獲取到store的相對(duì)路徑了之后就可以獲取到vuex中的實(shí)例中的配置對(duì)象，獲取到配置對(duì)象就一步一步向下獲取到所有，mutations,state,getters,modules,遍歷所有module，其實(shí)每一個(gè)module就是一個(gè)vuex實(shí)例的配置對(duì)象，我們就可以遞歸以上的代碼，獲取所有的store代碼了，上個(gè)流程圖。

當(dāng)然我們?cè)谡{(diào)用的時(shí)候要注意一些事項(xiàng)，比如 對(duì)象可能從外部引入

import Vue from 'vue';
import Vuex from 'vuex';

import state from './state';
Vue.use(Vuex);

export default new Vuex.Store({
 state,
});

可能就以屬性的形式直接定義

export default {
 account: {
 namespaced: true,
 state: {
  number: 31
 },
 getters: {
  testlen: state => state.number.length
 },
 mutations: {
  change(state, { number }) {
  state.number = number;
  }
 }
 }
};

也可能先定義，在以對(duì)象屬性簡(jiǎn)寫(xiě)的形式引入。

const state = {name: 'jack'}
export default {
 state: state
}

總結(jié)

以上只是將我制作這個(gè)插件，用到的工具和思想和大家分享下，也是對(duì)這次開(kāi)發(fā)的總結(jié)吧，具體的實(shí)現(xiàn)請(qǐng)移步這里

反思

開(kāi)源這個(gè)vscode插件以后，取得的用戶數(shù)量還是沒(méi)有達(dá)到自己的理想水平，自己下來(lái)也有反思

• 前端可以選擇的ide有很多，并不是每個(gè)人都用vscode
• 我這個(gè)插件能帶來(lái)的功能有限，可能在一個(gè).vue文件中就用到一兩次vuex中的數(shù)據(jù)，裝這個(gè)插件能帶來(lái)的體驗(yàn)提升有限，并不能和vetur這種涵蓋了所有常用的功能相比。

之前也有掘金用戶想我提建議，可以考慮和vetur合并，但是從目前來(lái)看好像并不是有很多人需要這個(gè)插件，我還是先盡力維護(hù)好這個(gè)項(xiàng)目吧。

一些可能對(duì)你有幫助的網(wǎng)站

vscode插件官方文檔，可以手把手教你做一個(gè)vscode插件：vscode官方文檔

astexplore：你可以在這里自由練習(xí)主流parser的用法：可以看到ast的結(jié)構(gòu) ：astexplore

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論