在我前面的有一篇文章里有说过怎么引入外部的 JS 文件,详情见 VUE 爬坑之旅– 如何对公共JS,CSS进行统一管理,全局调用 。这里所说的外部 JS 文件指的是用 ES6 之前的老语法编写的各种 JS 代码,这种 JS 文件可以用我上面那篇文章里面的方法引入,使用方法跟以前一样。
但是现在是新的时代,还是用以前的老东西未免有点过时了,而且很多以前的那种 JS 文件其实都是要依赖 JQuery 的,而 vue 是不提倡再使用 JQuery 的,而且在 vue 项目中引入 JQuery 还有些麻烦(我有尝试过,没搞定,(┬_┬)),这样的话不就尴尬了吗。
那么我如果要在 vue 项目中用 ES6 语法改造以前的老代码,或者针对本项目编写一个可以全局使用的工具类要怎么做呢?
我们可以使用 ES6 中 Module 的语法来编写或改造我们的 JS,首先送上阮一峰老师的教程 Module 的语法 认真看完上面的内容也就明白要怎么做了,同时也明白了用 vue-cli 生成的项目里面那么多的 import ,export 都是做什么用的了。(我当时做项目的时候没有看到这份教程,就只是懵懵懂懂的照葫芦画瓢做的,,,)
下面还是贴一下实际的代码吧,光文字描述是不够的,还是代码最直白,同时也能减少一些新人朋友的摸索时间(我自己当时就是满满摸索过来的,是深有体会的,,,)
一,在 src 目录下新建一个 utils 文件夹
如上图所示,Utils 文件夹是存放我们工具类文件的地方,里面可能会有多个文件,比如说我箭头所指的 myUtils 文件,这个文件里面就是我们马上要编写的工具类了。
二,编写工具类
在实际项目开发中,经常有一些工具方法需要全局调用,这时就需要把这些方法提取出一个工具类,然后将这个类全局引用,就可以到处使用了,减少了重复劳动(懒才是第一生产力,,,)
如上面教程中所说,Module 有多种写法,这里我们采用最简单方便的(其实还是懒,,,)
export default class myUtils {
/**
* 判断字符串是否为空
* @param str
* @returns {boolean}
*/
static isNull(str) {
return str == null || str.length === 0 || str === '';
}
/**
*
* @desc 判断是否为身份证号
* @param {String|Number} str
* @return {Boolean}
*/
static isIdCard(str) {
return /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(str)
}
/**
*
* @desc 判断是否为手机号
* @param {String|Number} str
* @return {Boolean}
*/
static isPhoneNum(str) {
return /^(0|86|17951)?(1[3-9][0-9])[0-9]{8}$/.test(str)
}
}
上面定义了一个 myUtils 类,类里有三个方法,(关于 class 和 static ,有不知道的可以去看阮老师的 ES6 教程,这里就不啰嗦了)现在我们只需要将这个类全局引用就可以了。
三,全局引用
要想全局引用,我们需要在入口文件上做文章,vue 的入口文件是 main.js,在 main.js 中,先 import 引入 myUtils ,再将它挂载到 vue 对象的原型上,这样就可以达到全局引入的目的
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
//先 import 引入
import myUtils from './utils/myUtils'
Vue.config.productionTip = false;
//将 myUtils 挂载到 vue 的原型上
Vue.prototype.myUtils = myUtils;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: {App},
template: '<App/>'
});
四,组件中使用
在组件中可以直接通过 this.myUtils.XXX 来调用相应的方法了
if (this.myUtils.isNull(this.mobile)) {
this.toast("请输入手机号码");
return
}
总结
其实只要看懂了阮老师的教程,后面的就很简单了,关键是要认真的看完并理解。然后就是要大胆的拥抱变化,ES6 的相比于以前的老语法来说还是要好很多的,解决了以前的一些痛点,比如说分模块引入,回调地狱,this 指向不明等问题,要赶紧学起来,虽然说 ES6 已经出来很久了,,,