VUE 爬坑之旅 -- 用 ES6 语法写一个工具类,并全局引用
在我前面的有一篇文章里有说过怎么引入外部的 JS 文件,详情见 VUE 爬坑之旅– 如何对公共JS,CSS进行统一管理,全局调用 。这里所说的外部 JS 文件指的是用 ES6 之前的老语法编写的各种 JS 代码,这种 JS 文件可以用我上面那篇文章里面的方法引入,使用方法跟以前一样。但是现在是新的时代,还是用以前的老东西未免有点过时了,而且很多以前的那种 JS 文件其实都是要依赖 JQuery..
在我前面的有一篇文章里有说过怎么引入外部的 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 已经出来很久了,,,
更多推荐
所有评论(0)