详解Vue This$Store总结


Posted in Javascript onDecember 17, 2018

开发 VueThis$Store 一些技巧

上次答应一个读者介绍下开发此插件的一些原理和技巧,在此也一并做下总结了。

基本工具

1 正则表达式,正则表达式大家都不陌生,正则表达式的优点就是速度快,对于一个代码补全的插件,用户肯定希望更快的得到反馈,测试了 1000 行的 vue 文件匹配全部的 mapXXX() 之类的 api 字符串也只是用了 1ms 都不到的时间,但是缺点也非常明显,他是上下文无关的,比如说

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

这样一段代码,我们可以使用 vscode 的 api 当触发了补全后,用 /\bmapState\(([\'\"](.*)[\'\"](?:,\s*)?)?((\[[\s\S]*?\])|(\{[\s\S]*?\}))?\s*\)/g 捕获到上面这段代码,但是朋友你还要考虑的是,函数有三种方法

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

你怎么使用正则表达式捕获到 a, b, c 三个属性并且拿到三个函数的第一个参数呢,不排除有人能做到,但是可能会耗费不少时间吧。

2 Abstract Syntax Tree(以下用简写 ast),我这里是使用时 babel 的 parser babylon ,ast 和正则表达式的优缺点有点互补的意思,parser 缺点是相对慢,但是通过 parser 得到的 ast 对于一代码的描述更加精确,你可以得到函数的参数,等很多信息,这里了就不科普,掘金有很多介绍 ast 的文章,这里强烈推荐这个网站astexplore,你可以在网站上练习,做一些很酷的事情。

开工

有了这两种工具,我们就可以开始写代码啦,既然两种工具的优缺点是互补的,我就想能不能将他们结合起来使用,最终想到的比较理想的方法就是,使用正则表达式捕获 mapXXX 这种工具函数,找到所有匹配的代码段以后使用 parser 获取 ast,在来分析函数的参数,因为 ast 里信息非常丰富,我们可以获取到是哪种的函数,以及函数的第一个参数,这样用户使用 . 触发补全时,即使用了 state 的简写 s,我们仍然可以给出正确的建议。

但是我们要获取 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中的实例中的配置对象,获取到配置对象就一步一步向下获取到所有,mutations,state,getters,modules,遍历所有module,其实每一个module就是一个vuex实例的配置对象,我们就可以递归以上的代码,获取所有的store代码了,上个流程图。

详解Vue This$Store总结

当然我们在调用的时候要注意一些事项,比如 对象可能从外部引入

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
}

总结

以上只是将我制作这个插件,用到的工具和思想和大家分享下,也是对这次开发的总结吧,具体的实现请移步这里

反思

开源这个vscode插件以后,取得的用户数量还是没有达到自己的理想水平,自己下来也有反思

  • 前端可以选择的ide有很多,并不是每个人都用vscode
  • 我这个插件能带来的功能有限,可能在一个.vue文件中就用到一两次vuex中的数据,装这个插件能带来的体验提升有限,并不能和vetur这种涵盖了所有常用的功能相比。

之前也有掘金用户想我提建议,可以考虑和vetur合并,但是从目前来看好像并不是有很多人需要这个插件,我还是先尽力维护好这个项目吧。

一些可能对你有帮助的网站

vscode插件官方文档,可以手把手教你做一个vscode插件:vscode官方文档

astexplore:你可以在这里自由练习主流parser的用法:可以看到ast的结构 :astexplore

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
几个高效,简洁的字符处理函数
Apr 12 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
Javascript的闭包详解
Dec 26 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
vue + element-ui的分页问题实现
Dec 17 #Javascript
Vue 中的受控与非受控组件的实现
Dec 17 #Javascript
js实现移动端轮播图
Dec 21 #Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 #Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 #Javascript
Echart折线图手柄触发事件示例详解
Dec 16 #Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 #Javascript
You might like
PHP简洁函数小结
2011/08/12 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
理解javascript正则表达式
2016/03/08 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
python使用锁访问共享变量实例解析
2018/02/08 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
社区维稳工作方案
2014/06/06 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
十佳家长事迹材料
2014/08/26 职场文书
百家讲坛观后感
2015/06/12 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers