使用vue的过程中，通过定义组件可以很好的复用代码，但是对于js代码的复用还有很多可以思考的地方。

问题： 将常用的一些js 公共方法 提取出来，可以方便的复用。

export与import

最初的思路是将公共方法写在单独的js文件里，通过ES6的export导出，如：
[文件]：import.js

export default function _import (file, viewPath = 'page') {
  if (process.env.NODE_ENV === 'development') {
    return require(`@/${viewPath}/${file}.vue`).default
  } else if (process.env.NODE_ENV === 'production') {
    return () => import(`@/${viewPath}/${file}.vue`)
  }
}

在需要使用的时候，在相应的组件内通过import导入，如：
[文件]：app.vue

import _import from "@/utils/import";

这样就可以在该文件使用公共方法_import了。
当然，也可以在main.js中全局导入，这样就不必在每个组件里面单独导入。
优点： 实现了提取公共方法的需求
缺点： 每个公共方法都需要单独export和import,费时费力，代码臃肿。

使用class

为了少写一点import,代码清晰一点，可以将项目里面的公共方法分个类。然后将同一类别的方法写成一个类(class)的方法。这样就可以直接export这个类的对象了。需要import的对象大大减少，也更加清晰好找。如：
[文件]：regularExpression.js

class regular {
  isMobileNumber (mobile) { // 是否是手机号
    const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    return reg.test(mobile);
  };
  isPassword (password) { // 是否是密码  6-20位，只能由数字，字母，下划线组成
    const reg = /^[\w]{6,20}$/;
    return reg.test(password);
  }
}
// export regular类的对象
export default new regular();

我定义了一个regular类，用来存放项目中所有的正则表达式方法，然后export出去这个类的对象export()。这样只要import这个对象，就可以使用这个类包含的所有方法了。

import regular from './utils/regularExpression.js'

一般选择在main.js中全局导入，因为每个组件可能只需要使用这个对象其中一个或几个方法，每次按需导入不如直接导入到全局。

vue原型

全局导入对象已经解决了提取公共方法的需求，并且使用起来也很方便。
个人习惯，会将这个全局对象封装到vue原型链上：

import regular from './utils/regularExpression.js'

在项目中可以这样使用该方法：

this.$regular.isMobileNumber()

如果只是全局导入，可以这样使用：

regular.isMobileNumber()

区别在于，全局对象只有一个实例，而放在原型链中，每个组件都是一个new Vue()，是vue原型的不同的实例。将在以后详细研究。

遇到的错误

[文件]：regularExpression.js

class regular {
  static isMobileNumber (mobile) { // 是否是手机号
    const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    return reg.test(mobile);
  };
  static isPassword (password) { // 是否是密码  6-20位，只能由数字，字母，下划线组成
    const reg = /^[\w]{6,20}$/;
    return reg.test(password);
  }
}
// export regular类的对象
export default new regular();

最初将放在正则表达式类中的方法声明为static，导致了再组件中使用this.$regular.isMobileNumber()发现$regular对象中并没有该方法。因为static声明的属性和方法不会被继承。

在JavaScript中使用static属性要非常小心：因为在底层，extends仍然使用原型继承。 这意味着static对象和数组在所有子类之间是共享的。