ES6(7)、模块

作者: 飞天小猪_pig | 来源:发表于2022-04-13 01:04 被阅读0次

1、使用导出导入模块,必须在script标签写清楚类型 type='module'

HTML:

<body>
   <script type='module' src="main.js"></script>
</body>

2、模块写完,就需要进行导出(export),如module.js:

let name="小明"
let age=18
let module=function(){
  alert(`我是${name},我今年${age}`)
}

export default module   //默认导出module

3、需要用到某个模块,就需要进行导入(import),如main.js:

import module from './module.js'  //导入模块

setTimeout(function(){
   module()
},3000)
一、常见的导入方式(import)
import xxx from "module.js"  //默认导出情况,导入xxx名字随意
import * as xx from "module.js" // *将所有内容导入,并挂载在xx上面
import { name } from "module.js" // 导出是name,导入就可以写name
import {  name as  name2 } from "module.js" // 可以对导入name进行重新命名为name2
import { name , age ,module} from "module.js"  //可以选择全部导入,也可以部分导入
import {  name , age as _age2} from "module.js"  // 可以对导入部分进行重命名
二、常见的导出方式(export)
export default module  //默认导出
export default {name,age,module}  //导出多个变量

注意:由于历史原因ES6之前不能使用模块这个功能,所有我们如果要在浏览器上使用模块功能,可以使用安装parcel这个库进行。

相关文章

  • 代码模块化

    2 ES6模块 ES6模块基于文件,一个文件就是一个模块。ES6模块支持异步模块加载。关键字:import和exp...

  • 前端模块化:ES6,CommonJS

    前端模块化 共有四种规范 ES6 Module CommonJS AMD CMD ES6 Module ES6模块...

  • Module 与 common.js

    common.js 模块与ES6模块 的不同:https://juejin.im/post/5e4cb5e7f26...

  • vue 导入、导出模块的几种方式

    ES6 模块导入、导出 ES6规范 模块导入方式:importES6规范 模块导出方式:export、export...

  • export default和export的使用方式

    ES6 基本 在ES6中,也通过规范的形式,规定了ES6中如何导入和导出模块 导入模块:使用import模块名称f...

  • ES6(7)、模块

    1、使用导出导入模块,必须在script标签写清楚类型 type='module' HTML: 2、模块写完,就需...

  • TypeScript发现与理解

    1. 模块 模块的特性 ES6的模块自动采用严格模式;在ES6模块中,顶层的this的值是undefined,不应...

  • ES6 模块与 CommonJS 模块的差异

    讨论 Node.js 加载 ES6 模块之前,必须了解 ES6 模块与 CommonJS 模块完全不同。impor...

  • export default 和export的使用

    在ES6中也通过规范的形式,规定了如何导入和导出模块 es6中的导入模块 import 模块名称 from 模块标...

  • 未来的模块机制

    概览 ES6实现了新的模块机制。在通过模块系统加载时,ES6会将文件当作独立的模块处理。每个模块都可以导入其它模块...

网友评论

    本文标题:ES6(7)、模块

    本文链接:https://www.haomeiwen.com/subject/hxcnsrtx.html