详解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获取GridView选择的行内容
Apr 14 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
JavaScript array常用方法代码实例详解
Sep 02 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基础知识:函数基础知识
2006/12/13 PHP
php中的MVC模式运用技巧
2007/05/03 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
php中的依赖注入实例详解
2019/08/14 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
JavaScript 事件参考手册
2008/12/24 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
js实现无缝滚动图
2017/02/22 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
Node.js fs模块原理及常见用途
2020/10/22 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
浅析python继承与多重继承
2018/09/13 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
jupyter notebook清除输出方式
2020/04/10 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
python如何进入交互模式
2020/07/06 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
二年级体育教学反思
2014/01/15 职场文书
学生党支部先进事迹
2014/02/04 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
北京奥运会主题口号
2014/06/13 职场文书
活动总结格式
2014/08/30 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
Go语言基础map用法及示例详解
2021/11/17 Golang
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js
SQL Server中搜索特定的对象
2022/05/25 SQL Server
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis