4. 模块化

最新推荐文章于 2024-07-30 20:41:47 发布

AlvinUnity

最新推荐文章于 2024-07-30 20:41:47 发布

阅读量141

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Alvin199765/article/details/115770914

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript模块化的概念，通过实例展示了全局变量污染问题，并详细讲解了CommonJS和ES6的模块化规范。在CommonJS中，使用`require`和`exports`进行模块导入和导出；而在ES6中，使用`export`和`import`实现模块管理。文章还涉及到了默认暴露模块的用法，并提供了封装代码和创建入口文件的方法，最后通过测试确保模块化功能的正确性。

摘要由CSDN通过智能技术生成

一、模块化简介

1、背景

创建04modulepro目录，创建 “no-module” 目录，创建a.js

var star = '王力宏'

创建b.js

var star = 5

创建demo.html

从这个例子可以看出，star的值的不确定性很大，a和b两个脚本文件中的同名变量会互相干扰。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="a.js"></script>
  <script src="b.js"></script>
  <script>
    console.log(star)
  </script>
</body>
</html>

2、模块化解决的问题

模块化主要解决javascript程序全局空间内被污染的问题

3、模块化规范

CommonJS模块化规范（基于ES6语法之前）
- 例如：node.js中的 require 引入模块，exports 导出模块
ES6模块化规范（使用ES6语法）
- export 导出模块
- import 引入模块

二、ES6模块化规范

1、导出模块

创建"module"目录，创建m1.js，有两种导出方式

// 第一种导出方式
// export let star = '王力宏'
// export function sing(title) {
//   console.log(title)
// }

// 第二种导出方式
let star = '王力宏'

function sing(title) {
  console.log(title)
}

export { star, sing}

创建m2.js

export let star = 5

2、导入模块

创建demo.html，有3种导入方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      // 第一种方式
      // import * as m1 from './m1.js'
      // import * as m2 from './m2.js'

      // console.log(m1)
      // console.log(m2)

      // console.log(m1.star)
      // console.log(m2.star)

      // m1.sing('十八般武艺')

      // 第二种导入方式
      // import { star, sing } from './m1.js'
      // import { star as star1 } from './m2.js'
      // console.log(star)
      // sing('依然爱你')

      // console.log(star1)
    </script>
  </body>
</html>

3、测试

运行html文件测试

三、默认暴露模块

1、默认暴露

创建m3.js

//可以导出任意类型，但同时只能有一个export default
// export default 'helen'
// export default 99
//大部分情况是导出对象
export default{
  username: 'helen',
  age: 20,
  coding(){
    console.log('hello world')
  } 
}

2、导入模块

在demo.html中导入模块

      // 第三种导入方式：导入默认的模块 default模块
      console.log(m3)
      console.log(m3.username)
      console.log(m3.age)
      m3.coding()

3、测试

运行html文件测试

四、封装代码

1、创建app.js

可以看做是程序的入口文件

import * as m1 from './m1.js'
import * as m2 from './m2.js'
import m3 from './m3.js'
console.log(m1)
console.log(m2)
console.log(m3)

2、引入入口文件

创建demo-app.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="app.js" type="module"></script>
</body>
</html>