4. 模块化

一、模块化简介

1、背景

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

var star = '王力宏'

创建b.js

var star = 5

创建demo.html

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


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
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种导入方式


<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>Documenttitle>
  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


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

3、测试

运行html文件测试

你可能感兴趣的:(JavaScript,javascript)