VUE 爬坑之旅 -- 用 ES6 语法写一个工具类，并全局引用

在我前面的有一篇文章里有说过怎么引入外部的 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 已经出来很久了，，，