先隨手建立專案
建立專案
接著修改 json 檔,說明引用 module
1 2 3 4 5 6 7 8 9 10 11 12 13
| { "name": "js", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "type": "module" }
|
然後新增一個 tax.js 的檔案
1 2 3
| export default function(price){ return Number(price) * 1.2; }
|
- export 關鍵字 → 代表函式是要匯出給外部檔案引用的內容。( JS 預設是私有,所以必須宣告 )
- default 關鍵字 → 只能用在模組中的一個函式,作為匯入時的預設功能,讓我們能用任意名稱呼叫它。
使用 Js 模組,在這裡新增了一個 index.js 的檔案
1 2 3 4 5 6 7 8 9 10 11 12 13
| import calcTax from './tax.js';
class Product{ constructor(name, price){ this.id = Symbol(); this.name = name; this.price = price; } }
let product = new Product("Hat", 1000); let taxedPrice = calcTax(product.price); console.log(`name : ${product.name}, taxprice : ${taxedPrice}`)
|
最後輸入 ↓,就可以看到答案了。
從模組匯出有名稱的功能
函式作用不變
1 2 3
| export function cal(price){ return Number(price) * 1.2; }
|
我們將 default
關鍵字拿掉後改成自己設定的名字,而後再更改 index.js
的函式……
1 2 3 4 5 6 7 8 9 10 11 12 13
| import { cal } from './tax.js';
class Product{ constructor(name, price){ this.id = Symbol(); this.name = name; this.price = price; } }
let product = new Product("Hat", 1000); let taxedPrice = cal(product.price); console.log(`name : ${product.name}, taxprice : ${taxedPrice}`)
|
這樣也可以有相同的結果喔
不過要注意一個問題
1
| import tax, { cal } from './tax.js';
|
這時候就要注意預設的值~~