4.モジュール化

17576 ワード

JavaScript javascript

一、モジュール化概要
1、背景
04 moduleproディレクトリを作成し、「no-module」ディレクトリを作成し、a.jsを作成します.

var star = '   '

b.jsを作成

var star = 5

demoを作成
この例から、starの値の不確実性が大きく、aとbの2つのスクリプトファイルの同名変数が互いに干渉することが分かる.


<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、モジュール化の規範

Common JSモジュール化規範(ES 6文法に基づく前)

例えば、node.jsにおけるrequire導入モジュール、export導出モジュール

ES 6モジュール化仕様(ES 6文法を使用)

export導出モジュール

import導入モジュール

二、ES 6モジュール化規範
1、モジュールをエクスポート
「module」ディレクトリを作成し、m 1.jsを作成します.二つのエクスポート方法があります.

//        
// export let star = '   '
// export function sing(title) {
     
//   console.log(title)
// }

//        
let star = '   '

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

export {
      star, sing}

m 2.jsを作成します

export let star = 5

2、モジュールの導入
demoを作成するには、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、テスト
ファイルテストを実行
三、デフォルト露出モジュール
1、デフォルト露出
m 3.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、テスト
ファイルテストを実行
四、パッケージコード
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 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、テスト
ファイルテストを実行

JavaScript静的弾道場の誕生日カウントダウン