ES6中我们可以定义模块,就是可以根据应用的需求,把它们分割成不同的小的部分,这些就是我们说的模块。在每个模块里可以导出它需要让其它模块使用的东西,在其它模块里面可以导入这些模块导出的东西,然后就可以在这些模块使用导入的功能了
一、 常规语法
- 模块导出。导出的可以是变量,也可以函数、类等。
//model.js
let fruit = "柠檬";
let dessert = "蛋糕";
const dinner = (fruit,dessert) => {
console.log('今天的晚餐是'+fruit+'和'+dessert);
};
export {fruit,dessert,dinner}
- 模块导入。
//法一:
import {fruit,dessert,dinner} from "./modules/model.js"
console.log(fruit,dessert);
dinner(fruit,dessert);
//法二:
import * as chef from "./modules/model.js"
console.log(chef.fruit,chef.dessert);
model.dinner(chef.fruit,chef.dessert);
二、 重命名模块导入导出
- 模块导出。
//model.js
let fruit = "柠檬";
let dessert = "蛋糕";
const dinner = (fruit,dessert) => {
console.log('今天的晚餐是'+fruit+'和'+dessert);
};
export {fruit,dessert,dinner as supper}
//在导出时将函数dinner重命名为supper
- 模块导入。
import {fruit,dessert,supper as newsupper} from "./modules/model.js"
//在导入时将函数supper重命名为newsupper
console.log(fruit,dessert);
newsupper(fruit,dessert);
三、 模块默认导出
我们可以设置一下模块可以默认导出的东西。每个模块都可以有一个默认要导出的东西。比如我想让模块里的 dinner 这个函数成为这个模块默认要导出的东西。
- 模块导出。
//model.js
//法一:
export default function dinner(fruit,dessert){
console.log('今天的晚餐是'+fruit+'和'+dessert);
}
//法二:
const dinner = (fruit,dessert) => {
console.log('今天的晚餐是'+fruit+'和'+dessert);
};
export default dinner
//法三:
const dinner = (fruit,dessert) => {
console.log('今天的晚餐是'+fruit+'和'+dessert);
};
export { dinner as default}
- 模块导入。
import model from "./modules/model.js"
model('柠檬','蛋糕');
最差劲的不是输的人,而是一开端就不想赢的人。
网友评论