学习记录——前端模块化相关规范

1. ES6模块化(大一统的模块化规范)

ES6模块化规范诞生之前,Javascript社区已经尝试并提出了AMDCMDCommonJS等模块化规范。

但是,这些社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:

  • AMDCMD适用于浏览器端的Javascript模块化

  • CommonJS适用于服务器端的Javascript模块化

因此,ES6语法规范中,在语言层面上定义了ES6模块化规范,是浏览器端服务器端通用的模块化开发规范。

ES6模块化规范中定义:

  • 每个js文件都是一个独立的模块
  • 导入模块成员使用import关键字
  • 暴露模块成员使用export关键字

2. ES6模块化的基本语法

2.1 默认导出、默认导入

  • 默认导出语法:export default 默认导出的成员
  • 默认导入语法:import 接收名称 from 模块标识符
// 当前文件模块为 m1.js

// 定义私有成员 a 和 c
let a = 10;
let c = 20;
// 外界访问不到变量 d ,因为它没有被暴露出去
let d = 30;

function show() {
    
    };
// 将本模块中的私有成员暴露出去,供其它模块使用
export default {
    
    
    a,
    c,
    show
};
// 导入模块成员
import m1 from './m1.js'

console.log(m1);
// 打印输出的结果为:
// { a: 10, c: 20, show: [Function: show] }

注意:每个模块中,只允许使用唯一的一次export default,否则会报错!

2.2 按需导出、按需导入

  • 按需导出语法: export let s1 = 10

  • 按需导入语法: import { s1 } from '模块标识符'

// 当前文件模块为 m1.js

// 向外按需导出变量 s1
export let s1 = 'aaa';
// 向外按需导出变量 s2
export let s2 = 'ccc';
// 向外按需导出方法 say
export function say = function() {
    
    };
// 导入模块成员
import {
    
     s1, s2 as ss2, say } from './m1.js';

console.log(s1); // 打印输出 aaa
console.log(ss2); // 打印输出 ccc
console.log(say); // 打印输出 [Function: say]

注意:每个模块中,可以使用多次按需导出

2.3 直接导入并执行模块代码

有时候,我们只想单纯执行某个模块中的代码,并不需要得到模块中向外暴露的成员,此时,可以直接导入并执行模块代码

// 当前文件模块为 m2.js

// 在当前模块中执行一个 for 循环操作
for (let i = 0; i < 3; i++) {
    
    
    console.log(i);
}
// 直接导入并执行模块代码
import './m2.js'

猜你喜欢

转载自blog.csdn.net/Jack_lzx/article/details/110970672