在ES6模块中导入和导出
- 以最简单的例子举例
//shoppingCart.js
//导出模块
console.log('导出模块');//script.js
//导出模块
import './shoppingCart.js';
console.log('导入模块');
- 所以要导入其他模块必须指定类型
<script type="Modules" defer src="script.js"></script>
注：这个输出说明了，导入模块会在所有执行代码之前；
- 现在我们在shoppingCart中添加一些代码
const shoppingCart = 10;
const cart = [];const addToCart = function (product, quantity) {cart.push({ product, quantity });console.log(`${quantity} ${product} 被添加到购物车中`);
};- 注意上面的函数只能在本域使用，如果想要其他模块使用的话，需要加上export参数
export const addToCart = function (product, quantity) {cart.push({ product, quantity });console.log(`${quantity} ${product} 被添加到购物车中`);
};- 之后，我们就可以在script.js中去引入并调用这个函数
import { addToCart } from './shoppingCart.js';
console.log('导入模块');addToCart('面包', 5);
- 我们也可以将我们所需要的变量进行导出
const totalPrice = 237;
const totalQuantity = 23;export { totalPrice, totalQuantity };
import { addToCart, totalPrice, totalQuantity } from './shoppingCart.js';
console.log('导入模块');addToCart('面包', 5);console.log(totalPrice, totalQuantity);
- 我们可以在导入或者导出的时候更改变量名字
//导出模块
console.log('导出模块');const shoppingCart = 10;
const cart = [];export const addToCart = function (product, quantity) {cart.push({ product, quantity });console.log(`${quantity}元的 ${product} 被添加到购物车中`);
};const totalPrice = 237;
const totalQuantity = 23;export { totalPrice, totalQuantity as qt };
import { addToCart, totalPrice as Price, qt } from './shoppingCart.js';
console.log('导入模块');addToCart('面包', 5);console.log(Price, qt);
- 也可以导入模块中所有命名导出的内容
import * as ShoppingCart from './shoppingCart.js';
ShoppingCart.addToCart('面包', 5);
console.log(ShoppingCart.totalPrice);
- 可以使用默认导出
export default function (product, quantity) {cart.push({ product, quantity });console.log(`${quantity} ${product}添加至购物车中`);
}
import add from './shoppingCart.js';
add('披萨', 2);
- 在看一下下面的代码
//ShoppingCart.js
export const cart = [];
//script.js
import add, { cart } from './shoppingCart.js';
add('披萨', 2);
add('苹果', 2);
add('香蕉', 2);
console.log(cart);
这个例子也验证了一点，导入导出并不是创建副本的形式，他们是有实时联系的；所以这里查询的并不是原始的空数组；
