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

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

基本工具

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

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 三個屬性并且拿到三個函數(shù)的第一個參數(shù)呢，不排除有人能做到，但是可能會耗費(fèi)不少時間吧。

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

開工

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

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

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

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

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

當(dāng)然我們在調(diào)用的時候要注意一些事項(xiàng)，比如 對象可能從外部引入

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;
  }
 }
 }
};

也可能先定義，在以對象屬性簡寫的形式引入。

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

總結(jié)

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

反思

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

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

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

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

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

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

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

最新評論