ES6基础入门教程(二十)Module模块化语法

js本身做为编程语言存在一个很大的弊端,就是他完全不支持模块化。现在连css都有一个@import(在一个css中引入另外一个css),js却没有,这点让人十分的蛋疼。
于是在es6中添加了js模块化解决方案:

import和export


这里注意一个地方,你用export和import输出和接收的,都是一个对象,不能直接export name这种写法,应该是export {name}

简单例子:
这是你的主js 主js通过import加载

import {myrequire,addfun,jianfun} from "../js/require1.js"

这是你的次js 次要js通过export把你需要暴露的内容输出出去

const myrequire = 1;
const addfun=(x)=>{
    return x+2;
}
// 第一种export的方式
export {myrequire,addfun};
// 第二种export的方式
export function jianfun(x){
    return x-2;
}

关键字:as 改名


export {
    myrequire,
    addfun as addfunction
};

// 输出的时候,方法名是可以修改的,通过as改。

整体加载


除了通过import {name,name…} from name.js以外,可以一次性加载一个js中的所有对外方法。
只不过加载过来的时候指定一个名字即可:

方法js:

const jia =(x,y)=>{
    return x+y;
}
const jian =(x)=>{
    return x-y;
}
const cheng =(x)=>{
    return x*y;
}
const chu =(x)=>{
    return x/y;
}
export {jia,jian,cheng,chu}

调用js

import * as fangfa from "../js/require1.js"

// 调用通过fangfa.jia
console.log(fangfa.jia(1,1));

不知道你有没有发现。如果你import的内容必须跟export中饭回来的内容一样。
如果我要是不知道名字是啥,那我怎么办。我能不能自己给他定一个名字???

答案是:可以!

const jia =(x,y)=>{
    return x+y;
}
const jian =(x)=>{
    return x-y;
}
const cheng =(x)=>{
    return x*y;
}
const chu =(x)=>{
    return x/y;
}
export default {jia,jian,cheng,chu}

你输出方法的时候,前面加上default就可以了。

import fangfa from "../js/require1.js"

console.log(fangfa.jia(1,1));

或者你残暴一点,直接:

export default function(){
    console.log("123");
}

这样都是可以的。

混合使用的时候:


let a =function(){
    console.log(123);
}
let b =function(){
    console.log(555);
}
let c =function(){
    console.log(789);
}
// 在defalut 上定义多个时候的方式
export default {a,b}
export {c};

注意,读取定义到default上的时候,是不需要加{}号的
如果你需要读取default和非default的时候这么写

import d,{c} from "../js/require1.js"

d.b();
c();

另外需要注意的:
使用时一定要灵活,只要是js都可以互相调,不是非得在vue中,
一个js还可以作为接口转发器:

export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
上面代码中,export和import语句可以结合在一起,写成一行。但需要注意的是,写成一行以后,foo和bar实际上并没有被导入当前模块,只是相当于对外转发了这两个接口,导致当前模块不能直接使用foo和bar。

Copyright © 2023 | 粤ICP备14006518号-4

Proudly powered by WordPress | Theme: Beast Blog by Crimson Themes.