ES6之Module语法(import/export)

21 篇文章 1 订阅

ES6之前已经出现了js模块加载的方案:

  1. CommonJS, AMD, CMD都是JS模块化的规范。
  2. CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现。
  3. AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模块化的规范。
  4. RequireJS 遵循的是 AMD,SeaJS 遵循的是CMD。

ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS, AMD,
CMD规范,成为浏览器和服务器通用的模块解决方案。

ES6模块主要有两个功能:(export 和 import)

  1. export 用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
  2. import 用于在一个模块中加载另一个含有 export 接口的模块

require和import的区别


export 导出模块

lib.js 文件

// 1.一个个导出
// 导出单个变量
export let i = 12;
export let n = 24;
// 导出函数
export function show() {
    // xxx
}
// 导出class类
export class Person {
    // xxx
}

// 2.导出多个变量
let a = 1;
let b = 2;
let c = 3;
export { a, b, c }
//通过向大括号中添加 a、b、c 变量并且export输出,就可以将对应变量值以 a、b、c 变量标识符形式暴露给其他文件而被读取到

//不能写成 export a 这样的方式,如果这样就相当于 export 1 ,外部文件就获取不到该文件的内部变量 a 的值,
//因为没有对外输出变量接口,只是输出的数字。

import 导入模块

main.js文件

// 1.引入所有成员
import * as items from './lib';   // items为别名
console.log(items.i, items.n); // 12  24
items.show();
new items.Person;


// 2.引入部分指定成员
// 通过import获取 lib.js 文件的内部变量,{}括号内的变量来自于 lib.js 文件export出的变量标识符。
import { a, b } from './lib';
console.log(a, b); // 1,2

export default 默认成员 ( 可以是任何对象 )

前面的例子可以看出,lib.js 使用 import 命令的时候,用户需要知道 lib.js 所暴露出的变量标识符,否则无法加载。
可以使用 export default 命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。

一个 js 模块只能有一个 `export default

lib.js 文件

let num = 99;
let str = 'string';

export default num;  // (num不能加大括号)
//export default str;

//原本直接 export num 外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。

main.js文件

// 引入default成员 
import items from './lib';

console.log(items); // 99
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猫老板的豆

你的鼓励将是我创作的最大动力~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值