iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
1
Modern Web

從0開始的網頁生活!30天從網頁新手到網頁入門系列 第 28

Day28-JS模組化!(匯入匯出篇)

本文已搬家到筆者自己的部落格嘍,有興趣的可以點這個連結

前言

昨天講完如何安裝別人寫好的套件,今天就來實作如何 import(匯入) 以及 export(匯出) 別人寫好或自己寫好的套件吧!

import

import 基本上寫法很簡單就只有 import name from 'module' 這樣而已,這邊簡單闡述一下這段文字表達的意思。

  • import

    import 很直觀就是匯入的意思。

  • name

    代表將匯入的套件用一個變數表示,這裡的變數取名基本上建議跟官方文件一樣,這樣才不會出錯。

  • from

    從哪個地方匯入套件。

  • 'module'

    套件路徑,這邊可以分為 node_modules 內的套件以及自己寫好的套件,會在底下說明。


接下來講講 node_modules 內的套件以及自己寫好的套件兩者的差別吧!

  • node_modules內的套件

    import $ from 'jquery'
    

    如果要匯入的是 node_modules 內的套件直接寫套件名稱就好,這樣就會自動到 node_modules 裡面找尋該套件。

  • 自己寫的套件

    import config from './config.js'
    

    如果是自己寫的套件就必須要用相對路徑的方式將檔案匯入進來,畢竟 node_modules 不可能會有自己專案裡面寫的檔案XD

    不過上面的寫法其實可以再更精簡一點,可以把副檔名拿掉,反正要匯入的都是JS檔所以就可以直接移除JS副檔名,像底下這樣。

    import config from './config'
    

export

export 的語法有兩種,一種是 export name 另一種是 export default name 兩者到底差別在哪呢?

其實差別只在於在 import 時,如果是單純的 export name 話,在 import 時就必須要將 name 定義的跟 exportname 一模一樣,所以就要寫成 import { name } from 'module' ,但假如是寫 export default name 的話,在 import 的時候就不用將 name 定義的跟 exportname 一樣,相對會彈性很多,所以筆者建議還是寫成 export default name 比較好喔!

  • export

    export 很直觀就是匯出的意思。

  • default

    default 就是指該檔案匯出的預設值。

  • name

    name就代表要匯出的東西,可能是變數、function等等,只要任何可以被當成變數傳遞的都可以 export ,假如要匯出多筆的話筆者建議用一個 {} 把要匯出的東西都包起來。

    還記得前面提到 ES6 裡面有個語法叫 Object Literals 嗎?這邊就是運用這種寫法把匯出的東西包成一個物件,這樣之後匯入的時候就可以利用物件的操作來使用匯入後的資料。

const foo = () => console.log('Hello')
const foo2 = () => console.log('World')
const foo3 = () => console.log('Hello World')
export default { foo, foo2, foo3 }

export 基本上沒意外都只會用在自己寫好的套件上,筆者相信應該是不會有人會去更改別人寫好的套件然後再自己 export 才對XD

打開網頁錯誤

好不容易知道 import 以及 export 在做什麼後,也依照文章所教的方式把 importexport 寫到了JS檔裡面,結果瀏覽器竟然噴了這個錯誤。

Imgur

這邊筆者就要稍微埋一下伏筆了,因為目前的瀏覽器其實並沒有真的支援 import 以及 export 的寫法,在明天的文章會教大家如何把套件結合在一起,讓瀏覽器可以正常地顯示出這些東西,敬請期待吧XD

總結

今天介紹了如何匯入以及匯出,匯入及匯出的功能基本上是目前在寫網頁必備的觀念,學會匯入與匯出這兩個方法可以讓你在日後維護網頁上更加輕鬆,並且可以很快速的知道要從哪些檔案進行修改,最後如果有任何不懂的地方也歡迎在下面留言給我,我會一一解惑喔!

參考資料


上一篇
Day27-JS模組化!(安裝套件篇)
下一篇
Day29-JS模組化!(套件結合篇)
系列文
從0開始的網頁生活!30天從網頁新手到網頁入門30

尚未有邦友留言

立即登入留言