uni-app学习笔记ES6模块和CommonJs模块规范

客户端JS推荐使用ES6模块规范来写
nodejs的服务器开发大家一般使用CommonJS规范来写

CommonJS模块

//xxx.js
let count=0
function addCount(){
    count++
}
module.exports={count,addCount}

const uniID= require("xxx")

ES6模块

//common/helper.js
const version = "1.0"
function getVersion() {
	return "1.1";
}
export default {
	version,
	getVersion
}

import helper from "../../common/helper.js"
console.log(helper.version);

模块化规范

模块分的规范有如下四种： CommonJS、 ES6…，下面逐一介绍一下。

1、 CommonJS

暴露的本质就是暴露exports对象, 模块输出的是一个值的拷贝, 在运行时加载, 多用在Node.js（ 服务器端）

基本语法： 定义暴露模块: exports
module.exports = value

引入模块: require

				var module = require('模块名') // 引入第三方模块
				var module = require('模块相对路径')

说明

（ 1）、 一个文件就是一个模块， require方法用来加载模块， 该方法读取一个文件并执行， 最后返回文件内部的module.exports对象；

（ 2）、 require是默认读取.js文件的， 所以require(模块名) 可以不写后缀；

（ 3）、 module.exports属性表示当前模块对外输出的接口， 其他文件加载该模块， 实际上就是读取module.exports变量；

2、 ES6

ES6模块输出的是值的引用, 在编译时加载

ES6在语言标准上面实现了模块功能。 设计思想是尽量的静态化， 使得编译时就能确定模块的依赖关系， 以及输入输出变量， CommonJS以及AMD都只能在运行时确定， ES6的模块并不是对象， 而是通过export显示指定输出的代码， 再通过import命令导入。

我们可以使用ES6的模块暴露和引入来实现模块化编程， ES6暴露模块的方式有三种： 分别暴露、 统一暴露（ 前两者也称为常规暴露） 和默认暴露。

（ 1）、 分别暴露

模块一： module1.js

// 分别暴露：也叫多行暴露，每个方法逐一暴露，这种方式在引入时需要用对象来引入

				export function foo() {
					console.log('foo() moudle1');
				}
				export function bar() {
					console.log('bar() moudle1')
				}

（2）、 统一暴露

模块二： module2.js

				function fun1() {
					console.log('fun1() module2')
				}

				function fun2() {
					console.log('fun2() module2')
				}
				// 统一暴露： 暴露的是一个对象，引入时也必须是个对象
				export {
					foo,
					bar
				}

需要注意的是： 以上两种向外暴露方式在主文件引入时必须使用对象的解构赋值引用， 不能使用变量接收的方式来映入（ 注意和默认暴露的区别）

主模块： main.js

				import {
					foo,
					bar
				} from '.js/src/module1.js'
				import {
					fun1,
					fun2
				} from './js/src/module2.js'

（3）、 默认暴露

				export default {
					foo() {
						console.log('默认暴露方式')
					},
					bar() {
						console.log('默认暴露')
					}
				}

默认暴露的方式只允许有一个: export default {}
且在主模块引入时可以使用自定义变量来接收的方式！
// 引入模块3

				import module3 from '.js/src/module3.js'

// 使用模块

				module3.foo()
				module3.bar()

注意： 在使用ES6时， 会出现一些问题， 现在由于并不是所有浏览器都能直接识别ES6模块化的语法， 所有在不能识别ES6语法的浏览器上， 就不能执行ES6代码， 这时就需要用到Babel， 将ES6语法转化为ES5

总结:

1.客户端推荐用ES6模块导入规范 编译时加载,静态对象,输出的是值的引用

①分别暴露

向外暴露方式在主文件引入时必须使用对象的解构赋值引用

			export x;
			export y;

			import {x,y} from "./helper.js";

②统一暴露

向外暴露方式在主文件引入时必须使用对象的解构赋值引用

			export {x,y};

			import {x,y} from "./helper.js";

③默认暴露

主文件引入时必须使用变量接收的方式来引用

			export default {x,y};

			import helper from "./helper.js";
			const {x,y}=helper;

2.node.js服务器推荐用CommonJS规范module.exports={}—require 运行时动态加载,输出的是值的拷贝