详解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 相关文章推荐
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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模板引擎SMARTY
2006/10/09 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
Python Grid使用和布局详解
2018/06/30 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Python使用Pygame绘制时钟
2020/11/29 Python
国外的一些J2EE面试题一
2012/10/13 面试题
绘画设计学生的个人自我评价
2013/09/20 职场文书
计算机专业毕业生的自我评价
2013/11/18 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
高三毕业感言
2015/07/30 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript