ES6模块介绍—module的语法import、export简单介绍及用法

ES6模块语法

模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。

export命令

1、输出变量
//a.js文件
export var name = '张帅';
export var age = 18;
export var sex = '男';
var name = '张帅';
var age = 18;
var sex = '男';
var obj = {
	fullName: '张三',
	age:20,
	sex:'男'
}
export {name, age, sex, obj};

推荐使用第二种写法,方便在代码结尾查看所输出变量;

2、输出函数
export function plusHandle (a,b){
	return a+b;
}
//b.js
function plusHandle(a,b){
	return a+b;
}
function minusHandle(a,b){
	return a-b;
}
export{ plusHandle, minusHandle };
3、输出变量重命名
//a.js
var name = '张帅';
function plusHandle(a,b){
	return a+b;
}
export {name as name2, name as fullName, plusHandleas plus};

as关键字可重命名输出变量的名字,name可以用不同的名字输出两次。

4、错误写法

export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系

export 1; //正确写法 export var m=1;

var m =1; //正确写法var m=1; export {m} export {m as n};
export m;

目前,export 命令能够对外输出的就是三种接口:函数(Functions), 类(Classes),var、let、const 声明的变量(Variables)。

5、实时绑定

export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

输出变量foo,值为bar,500 毫秒之后变成baz。取到的值也会实时更新为baz;
这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存,不存在动态更新;

6、export的位置

export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错;import亦然;

//报错语法
function foo() {
  export default 'bar' // SyntaxError
}
foo()

import命令

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。

import后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径

1、加载变量及方法
//main.js
//加载变量
import {name, age, sex} from './a.js';

//加载方法
import {plusHandle, minusHandle} from './b.js';
2、重命名变量名
import {name as name2} from './a.js';
3、读取变量只读,不可更改

import命令输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里面,改写接口。

//报错
import {name} from './a.js'
name = '王军';// Syntax Error : 'name ' is read-only;
//引入变量为对象,则不会报错,这种写法很难查错,建议输入变量仅保持只读
import {obj} from './a.js';
obj.name = '李四';
4、提升效果

import命令具有提升效果,会提升到整个模块的头部,首先执行;

//正常写法
import {plusHandle} from './b.js';
plusHandle();

//颠倒写法,先使用,后引入
//不会报错,import会被提升到整个模块头部,首先执行
plusHandle();
import {plusHandle} from './b.js';
5、错误写法
// 报错
import { 'f' + 'oo' } from 'my_module';

// 报错
let module = 'my_module';
import { foo } from module;

// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。

6、模块的整体加载
//import {plusHandle, minusHandle} from './b.js';

//整体加载
import * as b from './b.js';
b.plusHandle(3,5);
b.minusHandle(18,2);

export default命令

export输出时,import输入时需要知道输出的变量名或函数名,否则无法加载;
export default可实现快速加载模块,用户自定义输入名称;

1、匿名函数
// export-default.js
export default function() {
  console.log('foo');
}

import可为输出函数任意指定名字,需注意,此时import后面无需使用大括号

// import-default.js
import customName from './export-default';
customName(); // 'foo'
2、命名函数
// export-default.js
export default function foo() {
  console.log('foo');
}

// 或者写成

function foo() {
  console.log('foo');
}

export default foo;
import foo from './export-default';
foo(); // 'foo'

//写法二
import aa from './export-default';
aa(); // 'foo'

本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字;

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';
3、错误写法

正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。

// 正确
export var a = 1;

// 正确
var a = 1;
export default a; //等价于 export {a as default}

// 错误
export default var a = 1;

上面代码中,export default a的含义是将变量a的值赋给变量default。所以,最后一种写法会报错。

同样地,因为export default命令的本质是将后面的值,赋给default变量,所以可以直接将一个值写在export default之后。

// 正确
export default 42;

// 报错
export 42;

常见用法

1、浏览器加载,HTML页面中

浏览器加载 ES6 模块,也使用script标签,但是要加入type="module"属性

//ceshi.js
export const a = 1;
export const b = 2;
export function addHandle(a,b){
	return a+b;
}
//index.html   引入ceshi.js
<script type="module">
	import {a,b,addHandle} from './js/ceshi.js'
	console.log('模块引入变量',a,b);
	console.log('模块引入函数',addHandle(2,5));
</script>
2、非浏览器中

公共页面常见写法

//a.js;  export default写法
let a=1;
let b=2;
let c = function(a,b){
	return a+b;
}
function d(a,b){
	return a-b;
}
export default {
	a,b,c,d
};


//上面写法等价于下面b.js;  export写法
//b.js
export const obj = {
	a: 1,
	b: 2,
	c: function(a,b){
		return a+b;
	}
	d: function(a,b){
		return a-b;
	}
}
//公共页面引入
//如uni中在main.js中引入
import a from '@/common/js/a.js'
Vue.prototype.$a = a//赋值到vue里面

//写法二引入
import {b} from '@/common/js/b.js';
Vue.prototype.$b= b;//赋值到vue里面
//使用方法
console.log(this.$a.a);
console.log(this.$b.c(5,8));

单个页面按需引入常见写法

//b.js
export const obj={
	name:'张三',
	age:18
};
export const a=1;
export const b=2;
export function c(a,b){
	return a+b;
}
export function d(a,b){
	return a-b;
}
//单页面中引入,按需引入
import { c, d } from '@/common/js/b.js';
c(1,5);
3、export和export default混合使用
//ceshi.js
export default{
	a:1,
	b:2,
}
export function getDate(num){
	num = num ? num : 0;
	const currentTime = new Date().getTime() - num * 24 * 60 * 60 * 1000;
	const date = new Date(currentTime);
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();
	month = month > 9 ? month : '0' + month;
	day = day > 9 ? day : '0' + day;
	return `${year}-${month}-${day} 00:00:00`;
}
import mod from '@/common/js/api.js'; //mod可任意命名
import {getDate} from '@/common/js/api.js'; //getDate必须与export导出变量名一致
console.log('mod',mod);//mod {a: 1, b: 2}
console.log('getDate',getDate());//getDate 2023-11-06 00:00:00

注:export default一个文件只能出现一个

CommonJS对比

ES6 模块与 CommonJS 模块完全不同。它们有三个重大差异:

  • CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
  • CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
  • CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。
//CommonJS   a.js
var a=1;
var b = 2;
function sum(a,b){
	return a+b;
}
module.exports={
	a: a,
	b: b,
	sum: sum
}
//其他页面引入使用
var mod = require('@/common/js/a.js');
console.log(mod.a);//1
console.log(sum(2,5));//7

阮一峰文档参考

你可能感兴趣的:(ES6学习目录,es6,javascript,开发语言)