详解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 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
JavaScript"模拟事件"的注意要点详解
Feb 13 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 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
我的论坛源代码(六)
2006/10/09 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
php实现websocket实时消息推送
2018/03/30 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
python的常见命令注入威胁
2013/02/18 Python
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python 数据结构之旋转链表
2017/02/25 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
大学专科自荐信
2014/06/17 职场文书
化验员岗位职责
2015/02/14 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
Python 内置函数速查表一览
2021/06/02 Python
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP