前端公共模块的创建和使用

在项目中，我们常常会用到一些可复用的全局变量，如ip，时间，或者工具函数，如果在使用的时候去定义，创建，获取，会使得代码变得冗余。
所以，一个好的开发者应该首先一个好的共用模块。下面只是简介一下。

首先，我们定义一个专用的模块，用来组织和管理这些全局变量，并在需要的页面进行引入。
一般我们会在src下创建一个common目录，来存放共用模块的脚本。然后在common目录下新建一个common.js用于定义共用的方法。

common.js示例如下：

//定义一个全局变量url
const url = "http://www.zhongmingyuan.com";
//定义一个工具方法，用于获取当前时间
const now = Date.now || function(){
	return new Date().getTime();
}
const isArray = Array.isArray || function(obj){
	return obj instanceof Array;
}
export default {
	websiteUrl,
	now,
	isArray
}

方法一：模块引入
如果我们在接下来在index.vue中引入该模块(我这里是vue项目，使用其他前端框架的项目也一样的道理)

<script>
	import common form '../common/common.js';	//引入模块，并声明模块名
	export default {
		data(){
			return {};
		},
		onLoad(){
			console.log("now:"+common.now());	//这里使用模块函数
		}
	}
</script>

方法二：挂在Vue.prototype上
将一些使用频率较高的常量或者方法，直接扩展到vue.prototype上，每个vue对象都会“继承”下来。

实例如下：

//在main.js中挂载属性/方法
Vue.prototype.websiteUrl = "http://uniapp.dcloud.io";
Vue.prototype.now = Date.now || function(){
	return new Date().getTime();
}
Vue.prototype.isArray = Array.isArray || function(obj){
	return obj instanceof Array;
}

然后在pages/index/index.vue中调用

<script>
	export default {
		data(){
			return {};
		},
		onLoad(){
			console.log("now:"+common.now());	//这里使用模块函数
		}
	}
</script>