小編給大家分享一下JavaScript中的模塊、Import和Export有什么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

在互聯(lián)網(wǎng)的洪荒時(shí)代，網(wǎng)站主要用 HTML和 CSS 開發(fā)的。如果將 JavaScript 加載到頁面中，通常是以小片段的形式提供效果和交互，一般會(huì)把所有的 JavaScript 代碼全都寫在一個(gè)文件中，并加載到一個(gè)script 標(biāo)簽中。盡管可以把 JavaScript 拆分為多個(gè)文件，但是所有的變量和函數(shù)仍然會(huì)被添加到全局作用域中。

但是后來 JavaScript 在瀏覽器中發(fā)揮著重要的作用，迫切需要使用第三方代碼來完成常見任務(wù)，并且需要把代碼分解為模塊化的文件，避免污染全局命名空間。

ECMAScript 2015 規(guī)范在 JavaScript 語言中引入了module，也有了 import 和 export 語句。在本文中，我們一起來學(xué)習(xí) JavaScript 模塊，以及怎樣用import 和export 來組織代碼。

模塊化編程

在 JavaScript 中出現(xiàn)模塊的概念之前，當(dāng)我們想要把自己的代碼組織為多個(gè)塊時(shí)，一般會(huì)創(chuàng)建多個(gè)文件，并且將它們鏈接為單獨(dú)的腳本。下面先舉例說明，首先創(chuàng)建一個(gè)index.html 文件和兩個(gè)JavaScript文件“functions.js 和script.js。

index.html 文件用來顯示兩個(gè)數(shù)字的和、差、乘積和商，并鏈接到script 標(biāo)簽中的兩個(gè) JavaScript 文件。打開index.html 并添加以下代碼：

index.html

  
    
    

    
  

  
    
Answers
    
 and 

    
Addition
    


    
Subtraction
    


    
Multiplication
    


    
pision
    


    
    
  

這個(gè)頁面很簡單，就不詳細(xì)說明了。

functions.js 文件中包含將會(huì)在第二個(gè)腳本中用到的數(shù)學(xué)函數(shù)。打開文件并添加以下內(nèi)容：

functions.js

function sum(x, y) {
  return x + y
}

function difference(x, y) {
  return x - y
}

function product(x, y) {
  return x * y
}

function quotient(x, y) {
  return x / y
}

最后，script.js 文件用來確定 x 和 y 的值，以及調(diào)用前面那些函數(shù)并顯示結(jié)果：

script.js

const x = 10
const y = 5

document.getElementById('x').textContent = x
document.getElementById('y').textContent = y

document.getElementById('addition').textContent = sum(x, y)
document.getElementById('subtraction').textContent = difference(x, y)
document.getElementById('multiplication').textContent = product(x, y)
document.getElementById('pision').textContent = quotient(x, y)

保存之后在瀏覽器中打開index.html 可以看到所有結(jié)果：

對于只需要一些小腳本的網(wǎng)站，這不失為一種有效的組織代碼的方法。但是這種方法存在一些問題：

• 污染全局命名空間：你在腳本中創(chuàng)建的所有變量（sum、difference 等）現(xiàn)在都存在于window 對象中。如果你打算在另一個(gè)文件中使用另一個(gè)名為sum 的變量，會(huì)很難知道在腳本的其它位置到底用的是哪一個(gè)值變量，因?yàn)樗鼈冇玫亩际窍嗤?code>window.sum 變量?？梢允棺兞克接械姆椒ㄊ菍⑵浞旁诤瘮?shù)的作用域中。甚至在 DOM 中名為x 的id 可能會(huì)和var x 存在沖突。

• 依賴管理：必須從上到下依次加載腳本來確?？梢允褂谜_的變量。將腳本分別保存存為不同文件會(huì)產(chǎn)生分離的錯(cuò)覺，但本質(zhì)上與放在頁面中的單個(gè)

  由于受限于 CORS 策略，必須在服務(wù)器環(huán)境中使用模塊，否則會(huì)出現(xiàn)下面的錯(cuò)誤：

  Access to script at 'file:///Users/your_file_path/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

  模塊與常規(guī)腳本不一樣的地方：

  • 模塊不會(huì)向全局（window）作用域添加任何內(nèi)容。

  • 模塊始終處于嚴(yán)格模式。

  • 在同一文件中把同一模塊加載兩次不會(huì)出問題，因?yàn)槟K僅執(zhí)行一次

  • 模塊需要服務(wù)器環(huán)境。

  模塊仍然經(jīng)常與打包程序（如 Webpack）一起配合使用，用來增加對瀏覽器的支持和附加功能，但它們也可以直接用在瀏覽器中。

  接下來探索更多使用import 和export 語法的方式。

  命名導(dǎo)出

  如前所述，使用export 語法允許你分別導(dǎo)入按名稱導(dǎo)出的值。以這個(gè)function.js 的簡化版本為例：

  functions.js

  export function sum() {}
  export function difference() {}

  這樣允許你用花括號按名稱導(dǎo)入sum 和difference：

  script.js

  import {sum, difference} from './functions.js'

  也可以用別名來重命名該函數(shù)。這樣可以避免在同一模塊中產(chǎn)生命名沖突。在這個(gè)例子中，sum 將重命名為add，而difference 將重命名為subtract。

  script.js

  import {
    sum as add,
    difference as subtract
  } from './functions.js'
  
  add(1, 2) // 3

  在這里調(diào)用add() 將產(chǎn)生sum() 函數(shù)的結(jié)果。

  使用* 語法可以將整個(gè)模塊的內(nèi)容導(dǎo)入到一個(gè)對象中。在這種情況下，sum 和difference 將成為mathFunctions 對象上的方法。

  script.js

  import * as mathFunctions from './functions.js'
  
  mathFunctions.sum(1, 2) // 3
  mathFunctions.difference(10, 3) // 7

  原始值、函數(shù)表達(dá)式和定義、異步函數(shù)、類和實(shí)例化的類都可以導(dǎo)出，只要它們有標(biāo)識符就行：

  // 原始值
  export const number = 100
  export const string = 'string'
  export const undef = undefined
  export const empty = null
  export const obj = {name: 'Homer'}
  export const array = ['Bart', 'Lisa', 'Maggie']
  
  // 函數(shù)表達(dá)式
  export const sum = (x, y) => x + y
  
  // 函數(shù)定義
  export function difference(x, y) {
    return x - y
  }
  
  // 匿名函數(shù)
  export async function getBooks() {}
  
  // 類
  export class Book {
    constructor(name, author) {
      this.name = name
      this.author = author
    }
  }
  
  // 實(shí)例化類
  export const book = new Book('Lord of the Rings', 'J. R. R. Tolkein')

  所有這些導(dǎo)出都可以成功被導(dǎo)入。接下來要探討的另一種導(dǎo)出類型稱為默認(rèn)導(dǎo)出。

  默認(rèn)導(dǎo)出

  在前面的例子中我們導(dǎo)出了多個(gè)命名的導(dǎo)出，并分別或作為一個(gè)對象導(dǎo)入了每個(gè)導(dǎo)出，將每個(gè)導(dǎo)出作為對象上的方法。模塊也可以用關(guān)鍵字default 包含默認(rèn)導(dǎo)出。默認(rèn)導(dǎo)出不使用大括號導(dǎo)入，而是直接導(dǎo)入到命名標(biāo)識符中。

  以functions.js 文件為例：

  functions.js

  export default function sum(x, y) {
    return x + y
  }

  在script.js 文件中，可以用以下命令將默認(rèn)函數(shù)導(dǎo)入為sum：

  script.js

  import sum from './functions.js'
  
  sum(1, 2) // 3

  不過這樣做很危險(xiǎn)，因?yàn)樵趯?dǎo)入過程中對默認(rèn)導(dǎo)出的命名沒有做任何限制。在這個(gè)例子中，默認(rèn)函數(shù)被導(dǎo)入為difference，盡管它實(shí)際上是sum 函數(shù)：

  script.js

  import difference from './functions.js'
  
  difference(1, 2) // 3

  所以一般選使用命名導(dǎo)出。與命名導(dǎo)出不同，默認(rèn)導(dǎo)出不需要標(biāo)識符——原始值本身或匿名函數(shù)都可以用作默認(rèn)導(dǎo)出。以下是用作默認(rèn)導(dǎo)出的對象的示例：

  functions.js

  export default {
    name: 'Lord of the Rings',
    author: 'J. R. R. Tolkein',
  }

  可以用以下命令將其作為book 導(dǎo)入：

  functions.js

  import book from './functions.js'

  同樣，下面的例子演示了如何將匿名箭頭函數(shù)導(dǎo)出為默認(rèn)導(dǎo)出：

  functions.js

  export default () => 'This function is anonymous'

  可以這樣導(dǎo)入：

  script.js

  import anonymousFunction from './functions.js'

  命名導(dǎo)出和默認(rèn)導(dǎo)出可以彼此并用，例如在這個(gè)模塊中，導(dǎo)出兩個(gè)命名值和一個(gè)默認(rèn)值：

  functions.js

  export const length = 10
  export const width = 5
  
  export default function perimeter(x, y) {
    return 2 * (x + y)
  }

  可以用以下命令導(dǎo)入這些變量和默認(rèn)函數(shù)：

  script.js

  import calculatePerimeter, {length, width} from './functions.js'
  
  calculatePerimeter(length, width) // 30

  現(xiàn)在默認(rèn)值和命名值都可用于腳本了。

  看完了這篇文章，相信你對“JavaScript中的模塊、Import和Export有什么用”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

  
網(wǎng)站欄目：JavaScript中的模塊、Import和Export有什么用-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/dhjcij.html