4.5模块Module
4.5.1概念
ES6 之前,制定了一些模块加载方案,最主要的有 Commonjs 和 AMD 两种。
Commonjs用于服务器,AMD用于浏览器。
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
// Commonjs模块 let { stat, exists, readFile } = require('fs'); // 等同于 let _fs = require('fs'); let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile; //★结果分析:这种加载称为“运行时加载”, //因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”
“编译时加载”或者静态加载
模块功能主要由两个命令构成:export 和 import。
- export命令用于规定模块的对外接口
- import命令用于输入其他模块提供的功能。
4.5.2严格模式
- ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";。
- 严格模式主要有以下限制:
- 变量必须声明后再使用;
- 函数的参数不能有同名属性,否则报错;
- 不能使用with语句;
- 不能对只读属性赋值,否则报错;
- 不能使用前缀0表示八进制数,否则报错;
- 不能删除不可删除的属性,否则报错;
- 不能删除变量delete prop,会报错,只能删除属性delete global[prop];
- eval不会在它的外层作用域引入变量;
- eval和arguments不能被重新赋值;
- arguments不会自动反映函数参数的变化;
- 不能使用arguments.callee;
- 不能使用arguments.caller;
- 禁止this指向全局对象;
- 不能使用fn.caller和fn.arguments获取函数调用的堆栈;
- 增加了保留字(比如protected、static和interface)。
4.5.3export 命令
如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。
对外部输出变量的方式:
//方式一:var export var firstName = 'jack'; export var lastName = 'huang'; //方式二:大括号 var firstName = 'jack'; var lastName = 'huang'; export { firstName,lastName } //方式三:输出函数或类(class) export function addd(x, y) {return x * y;}; //方式四:可以使用as关键字重命名 var firstName = 'jack'; var lastName = 'huang'; export { firstName as f1, lastName as f2}
4.5.4import 命令
其他 JS 文件就可以通过import命令加载这个模块。
注意,import命令具有提升效果,会提升到整个模块的头部,首先执行。
import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(main.js)对外接口的名称相同。
import后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js路径可以省略。
// a.js import {firstName, lastName} from './main.js'; console.log(firstName) import {firstName as newName} from './main.js';
4.5.5export default 命令
其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。
// export-default.js export default function () { console.log('foo'); } // import-default.js import customName from './export-default'; customName(); // 'foo' //★需要注意的是,这时import命令后面,不使用大括号。
-
// 第一组 默认输出 export default function crc32() { // 输出 // ... } import crc32 from 'crc32'; // 输入 // 第二组 正常输出 export function crc32() { // 输出 // ... }; import {crc32} from 'crc32'; // 输入xport-default'; customName(); // 'foo'
4.5.6export 与 import 的复合写法
如果在一个模块之中,先输入后输出同一个模块,import语句可以与export语句写在一起。
export { foo, bar } from 'my_module'; // 等同于 import { foo, bar } from 'my_module'; export { foo, boo};
原文地址:https://www.cnblogs.com/xuzhengguo/p/12088963.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。