详解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 相关文章推荐
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
深入理解React高阶组件
Sep 28 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 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调用dll的实例操作动画与代码分享
2012/08/14 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
2016/04/13 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
Python实现单词拼写检查
2015/04/25 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
自荐书格式
2013/12/01 职场文书
校班主任推荐信范文
2013/12/03 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
群众路线对照检查材料
2014/09/22 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书