本文主要是介绍js模块(module)和导入,导出(import,export),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
什么是模块(module)
一个模块(module)就是一个文件。一个脚本就是一个模块。就这么简单。
模块可以相互加载,并可以使用特殊的指令 export
和 import
来交换功能,从另一个模块调用一个模块的函数或者变量,常量...,即可以引入并调用其他模块的方法,也可以导出自身的方法给其他模块使用,
import和export 关键字
export
关键字标记了可以从当前模块外部访问的变量和函数。import
关键字允许从其他模块导入功能。
// a.js:
export function a(){console.log("a");
}// index.html:<script type="module">
import {a} from "./a.js"a();
</script>
在这样index文件就通过导入使用了a文件的a()方法,这里的 "./a.js" 是a文件所在的相对路径
模块脚本 总是 被延迟的
- 下载外部模块脚本
<script type="module" src="...">
不会阻塞 HTML 的处理,它们会与其他资源并行加载。 - 模块脚本会等到 HTML 文档完全准备就绪(即使它们很小并且比 HTML 加载速度更快),然后才会运行。
- 保持脚本的相对顺序:在文档中排在前面的脚本先执行。
<script type="module">alert(typeof button); // object:脚本可以“看见”下面的 button// 因为模块是被延迟的(deferred,所以模块脚本会在整个页面加载完成后才运行
</script>相较于下面这个常规脚本:<script>alert(typeof button); // button 为 undefined,脚本看不到下面的元素// 常规脚本会立即运行,常规脚本的运行是在在处理页面的其余部分之前进行的
</script><button id="button">Button</button>
<scprit>的async属性 可以让module直接执行而不用等待html文档就绪
<script async type="module"></script>
对于模块的使用,大部分时候是在框架的构建工具中,比如,webpack工具。
import 和 export
export可以和要导出的部分分开写
// 导出数组
let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];// 导出类
class User {constructor(name) {this.name = name;}
}// 导出 const 声明的变量
const YEAR = 2024;export {YEAR,User,months} ;
as和default
使用as可以通过指定的名称使用导入的模块,或者导出模块
// say.js
function sayHi(user) {alert(`Hello, ${user}!`);
}function sayBye(user) {alert(`Bye, ${user}!`);
}export {sayHi as Hi, sayBye as Bye};-------------------------------// main.js
import {Hi as hi, Bye as bye} from './say.js';hi('John'); // Hello, John!
bye('John'); // Bye, John!
default只能与export一起使用,表示默认导出,一个文件只能有一个默认导出
命名的导出 | 默认的导出 |
---|---|
export class User {...} | export default class User {...} |
import {User} from ... | import User from ... |
有default的导出模块,引用时不能带括号,同时引用的名称可以自定义,(比如上面的默认导出可以写成 import one from ... 这样one就表示User类)
没有default的导出模块,引用时必须带括号,引用的名称不可以自定义
import()
表达式
import(module)
表达式加载模块并返回一个 promise,该 promise resolve 为一个包含其所有导出的模块对象,我们可以在代码中的任意位置调用这个表达式。
尽管 import()
看起来像一个函数调用,但它只是一种特殊语法,只是恰好使用了括号,它不是一个函数。
// index.html
<script>async function load() {let say = await import('./say.js');say.hi(); // Hellolet bye = say.default;bye();// bye}
</script>
<button onclick="load()">Click me</button>// say.js
export function hi() {alert(`Hello`);
}
export default function bye() {alert("bye");
}
在HTML中使用import() 不需要使用module类型script标签,可以通过default属性访问到默认导出。
这篇关于js模块(module)和导入,导出(import,export)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!