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

2018-05-24 12:03:57 zgh0711 阅读数 7587  收藏 更多

分类专栏： Vue Vue 爬坑之旅

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/zgh0711/article/details/80432609

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