在網路的洪荒時代,網站主要用 HTML和 CSS 開發的。如果將 JavaScript 載入到頁面中,通常是以小片段的形式提供效果和交互,一般會把所有的 JavaScript 程式碼全都寫在一個檔案中,並載入到一個 script
標籤中。儘管可以把 JavaScript 拆分為多個文件,但是所有的變數和函數仍然會被加入到全域作用域中。
但後來 JavaScript 在瀏覽器中發揮著重要的作用,迫切需要使用第三方程式碼來完成常見任務,並且需要把程式碼分解為模組化的文件,避免污染全域命名空間。
ECMAScript 2015 規範在 JavaScript 語言中引入了 module,也有了 import 和 export 語句。在本文中,我們一起來學習 JavaScript 模組,以及怎麼用 import
和 export
來組織程式碼。
在JavaScript 中出現模組的概念之前,當我們想要把自己的程式碼組織為多個區塊時,一般會建立多個文件,並將它們連結為單獨的腳本。以下舉例說明,先建立一個index.html
檔案和兩個JavaScript檔案「 functions.js
和script.js
。
index.html
檔案用來顯示兩個數字的和、差、乘積和商,並連結到script
標籤中的兩個JavaScript 檔案。開啟index.html
並加入以下程式碼:
index.html
nbsp;html> <meta> <meta> <title>JavaScript Modules</title> <h1>Answers</h1> <h2> <strong></strong> and <strong></strong> </h2> <h3>Addition</h3> <p></p> <h3>Subtraction</h3> <p></p> <h3>Multiplication</h3> <p></p> <h3>pision</h3> <p></p> <script></script> <script></script>
這個頁面很簡單,就不詳細說明了。
functions.js
檔案中包含將會在第二個腳本中使用到的數學函數。開啟檔案並新增以下內容:
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 的值,以及呼叫前面那些函數並顯示結果:
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
可以看到所有結果:
對於只需要一些小腳本的網站,這不失為一種有效的組織程式碼的方法。但是這種方法存在一些問題:
sum
、 difference
等)現在都存在於window
物件中。如果你打算在另一個檔案中使用另一個名為sum
的變量,會很難知道在腳本的其它位置到底用的是哪一個值變量,因為它們用的都是相同的window.sum
變量。唯一可以使變量私有的方法是將其放在函數的作用域中。甚至在DOM 中名為x
的id
可能會和var x
有衝突。 中相同。
套件的形式共享和重複使用程式碼,也就是可以分發和共享的模組,例如 npm。但由於有許多解決方案,而且都不是 JavaScript 原生的,所以需要依靠 Babel、Webpack 或 Browserify之類的工具才能在瀏覽器中使用。
由於多檔案方法存在許多問題,且解決方案很複雜,所以開發人員對把模組化開發的方法引入 JavaScript 語言非常感興趣。於是 ECMAScript 2015 開始支援 JavaScriptmodule。
module 是一組程式碼,用來提供其他模組所使用的功能,並能使用其他模組的功能。 export 模組提供程式碼,import 模組使用其他程式碼。模組之所以有用,是因為它們允許我們重用程式碼,它們提供了許多可用的穩定、一致的接口,並且不會污染全域命名空間。
模块(有时称为 ES 模块)现在可以在原生 JavaScript 中使用,在本文中,我们一起来探索怎样在代码中使用及实现。
JavaScript 中的模块使用import
和 export
关键字:
import
:用于读取从另一个模块导出的代码。export
:用于向其他模块提供代码。接下来把前面的的 functions.js
文件更新为模块并导出函数。在每个函数的前面添加 export
。
functions.js
export function sum(x, y) { return x + y } export function difference(x, y) { return x - y } export function product(x, y) { return x * y } export function quotient(x, y) { return x / y }
在 script.js
中用 import
从前面的 functions.js
模块中检索代码。
注意:import
必须始终位于文件的顶部,然后再写其他代码,并且还必须包括相对路径(在这个例子里为./
)。
把 script.js
中的代码改成下面的样子:
script.js
import { sum, difference, product, quotient } from './functions.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
中的 script
标签中添加type="module"
。任何使用 import
或 export
的代码都必须使用这个属性:
index.html
<script> </script> <script> </script>
由于受限于 CORS 策略,必须在服务器环境中使用模块,否则会出现下面的错误:
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.
模块与常规脚本不一样的地方:
window
)作用域添加任何内容。模块仍然经常与打包程序(如 Webpack)一起配合使用,用来增加对浏览器的支持和附加功能,但它们也可以直接用在浏览器中。
接下来探索更多使用 import
和 export
语法的方式。
如前所述,使用 export
语法允许你分别导入按名称导出的值。以这个 function.js
的简化版本为例:
functions.js
export function sum() {} export function difference() {}
这样允许你用花括号按名称导入 sum
和 difference
:
script.js
import {sum, difference} from './functions.js'
也可以用别名来重命名该函数。这样可以避免在同一模块中产生命名冲突。在这个例子中,sum
将重命名为 add
,而 difference
将重命名为 subtract
。
script.js
import { sum as add, difference as subtract } from './functions.js' add(1, 2) // 3
在这里调用 add()
将产生 sum()
函数的结果。
使用 *
语法可以将整个模块的内容导入到一个对象中。在这种情况下,sum
和 difference
将成为 mathFunctions
对象上的方法。
script.js
import * as mathFunctions from './functions.js' mathFunctions.sum(1, 2) // 3 mathFunctions.difference(10, 3) // 7
原始值、函数表达式和定义、异步函数、类和实例化的类都可以导出,只要它们有标识符就行:
// 原始值 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'] // 函数表达式 export const sum = (x, y) => x + y // 函数定义 export function difference(x, y) { return x - y } // 匿名函数 export async function getBooks() {} // 类 export class Book { constructor(name, author) { this.name = name this.author = author } } // 实例化类 export const book = new Book('Lord of the Rings', 'J. R. R. Tolkein')
所有这些导出都可以成功被导入。接下来要探讨的另一种导出类型称为默认导出。
在前面的例子中我们导出了多个命名的导出,并分别或作为一个对象导入了每个导出,将每个导出作为对象上的方法。模块也可以用关键字 default
包含默认导出。默认导出不使用大括号导入,而是直接导入到命名标识符中。
以 functions.js
文件为例:
functions.js
export default function sum(x, y) { return x + y }
在 script.js
文件中,可以用以下命令将默认函数导入为 sum
:
script.js
import sum from './functions.js' sum(1, 2) // 3
不过这样做很危险,因为在导入过程中对默认导出的命名没有做任何限制。在这个例子中,默认函数被导入为 difference
,尽管它实际上是 sum
函数:
script.js
import difference from './functions.js' difference(1, 2) // 3
所以一般首选使用命名导出。与命名导出不同,默认导出不需要标识符——原始值本身或匿名函数都可以用作默认导出。以下是用作默认导出的对象的示例:
functions.js
export default { name: 'Lord of the Rings', author: 'J. R. R. Tolkein', }
可以用以下命令将其作为 book
导入:
functions.js
import book from './functions.js'
同样,下面的例子演示了如何将匿名箭头函数导出为默认导出:
functions.js
export default () => 'This function is anonymous'
可以这样导入:
script.js
import anonymousFunction from './functions.js'
命名导出和默认导出可以彼此并用,例如在这个模块中,导出两个命名值和一个默认值:
functions.js
export const length = 10 export const width = 5 export default function perimeter(x, y) { return 2 * (x + y) }
可以用以下命令导入这些变量和默认函数:
script.js
import calculatePerimeter, {length, width} from './functions.js' calculatePerimeter(length, width) // 30
现在默认值和命名值都可用于脚本了。
模块化编程设计允许我们把代码分成单个组件,这有助于代码重用,同时还可以保护全局命名空间。一个模块接口可以在原生 JavaScript 中用关键字 import
和 export
来实现。
原文地址:https://www.taniarascia.com/javascript-modules-import-export/
作者:Tania Rascia
译文地址:https://segmentfault.com/a/1190000038275195
更多编程相关知识,请访问:编程学习!!
以上是詳細了解javascript中的modules、import和export的詳細內容。更多資訊請關注PHP中文網其他相關文章!