JavaScript 学习-47.export 和 import 的使用
前言
JavaScript 的每个.js文件都是独立的，在开发一个项目会有很多的.js文件，有些是公共的方法，可以单独放到一个.js文件中，其它的文件去调用公共方法。
但是，Javascript不是一种模块化编程语言，在es6以前，它是不支持类（class），所以也就没有"模块"（module）了。
export导出模块
在es6以前，还没有提出一套官方的规范,从社区和框架推广程度而言,目前通行的javascript模块规范有两种：CommonJS 和 AMD
ES6标准发布后，module成为标准，标准使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们依然采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。
这里主要介绍ES6 里面的export 和import 使用。
export 语句用于创建 JavaScript 模块以从模块中导出函数、对象或原始值，以便其他程序可以通过该 import 语句使用它们。
导出的模块 取决于您是否声明它们。导出语句不能用于嵌入式脚本。
// 导出单个
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function functionName(){...}
export class ClassName {...}
// 导出列表
export { name1, name2, …, nameN };
// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };
// Default exports
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
// Aggregating modules
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
export导出示例
// export features declared earlier
export { myFunction, myVariable };
// export individual features (can export var, let,
// const, function, class)
export let myVariable = Math.sqrt(2);
export myFunction() { ... };
import 导入
import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件（或模块）的原始值。
import的语法跟require不同，而且import必须放在文件的最开始，且前面不允许有其他逻辑代码，这和其他所有编程语言风格一致。
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
import 示例
import { cube, foo, graph } from 'my-module.js';
graph.options = {
color:'blue',
thickness:'3px'
};
graph.draw();
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
使用示例
目录结构
└─src
└─js
└─ext.js
└─main.js
└─index.html
在ext.js 文件写一些公共方法
export const m = (function(){
return {
hello: function(){
return 'hello ,,,,'
},
world: function(){
return 'world !!!!!!!!'
}
}
})()
在main.js 文件中导入并调用方法
import {m} from './ext.js'
console.log(m.hello())
index.html只需导入main.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./src/js/main.js"></script>
</body>
</html>
打开浏览器会出现Uncaught SyntaxError: Cannot use import statement outside a module
当js文件作为模块导入的时候，需在script标签声明type="module"类型
<script type="module" src="./src/js/main.js"></script>
虽然只导入了一个main.js，加载的时候还是会加载到ext.js 文件
