按部就班VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不一样的文件中

在咱们开发代码的时候，通常都喜欢进行必定程度的重构，以达到简化代码、关注点分离、提升代码可读性等等方面的考虑，本篇随笔介绍在VUE+Element 前端应用开发过程当中，实现简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不一样的文件中作法。

一、main.js处理逻辑

咱们知道Vue的前端应用，main.js函数里面承载的逻辑内容不少，每每涉及到一些经常使用过滤器函数、全局界面函数、组件注册等常规的处理过程，在咱们应用越来愈大，引入的控件愈来愈多的时候，每每须要不少代码来实现这些功能，可是单个文件代码行数到达必定程度的时候，可读性就下降了，并且可维护性就复杂了，因而咱们每每须要对代码进行重构处理，本篇介绍的处理就是实现关注点分离，把不一样的逻辑抽离到不一样的文件里面，这样大大减小了main.js的代码行数，并提升main.js的可维护性。

main.js处理逻辑的内容大概能够分为几个重要的部分，以下图所示，同时这个也是咱们分离逻辑代码的思路。

 

二、全局函数挂载

使用vue 时，有时须要设置公共的函数，便于在全部组件中调用或者在组件的生命周期中均可调用，这便须要自定义全局函数。

在main.js中写入函数

Vue.prototype.getToken = function (){
  ...
}

那么，在全部组件里均可调用函数

this.getToken();

里面咱们把常规常常用到的一些JS处理函数，以及一些界面信息处理函数，经过全局挂载的方式，使得它们在任何模块页面均可以使用。

咱们把这些处理放在一个单独的文件，如prototype.js里面，以下所示。

 而后在main.js函数里面，使用以下代码加入便可。

// 导入一些全局函数
import prototype from './prototype'
Vue.use(prototype)

这样咱们就能够在任何页面、模块里面使用咱们全局的函数了。

或者

 

三、全局过滤器挂载

和全局函数作法相似，也能够用相同的方法挂载全局过滤器，过滤器处理通常用于对界面部分的内容进行格式化或者转义的操做。

咱们能够自定义一些经常使用的过滤器放在filter/index.js文件里面，以下所示。

里面放置一些常见的js函数处理，以下所示。

export function uppercaseFirst(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

而后咱们在main.js里面引入这个全局过滤器便可。

// 导入自定义全局过滤器
import * as filters from './filters'
// 注册全局过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

除了一些本身自定义过滤器外，建议可使用一些第三方的经常使用过滤器，以下所示

// 导入第三方常见过滤器，介绍参考https://github.com/freearhey/vue2-filters
import Vue2Filters from 'vue2-filters'
Vue.use(Vue2Filters)

这个里面的过滤器不少比较常见，介绍参考https://github.com/freearhey/vue2-filters

 引入后，直接在界面中使用便可，以下使用代码。

 或者

 是否是以为很方便。

 

四、常见组件注册

组件的注册，分为全局main.js函数中注册，和页面组件中注册，通常咱们能够把常见的组件放置到全局中注册，这样避免每一个页面都重复填写注册组件的代码，省却不少功夫。

例如，咱们能够建立一个plugin.js的文件，用来分离全局注册注册的处理过程，在其中引入咱们经常使用的一些组件，并进行注册处理。

有了这些文件的定义处理，咱们在main.js里面，进行简单的导入使用便可。

// 导入常见的组件，进行注册
import common from './components/Common/plugin'
Vue.use(common)

最后这些就是实现了咱们常规的几个过程的处理，包括抽取过滤器、全局界面函数、组件注册等处理逻辑到不一样的文件中，并简化全局挂载的操做。

截取几个VUE+Element 前端应用系统模块的界面参考下。