Web前端 -- 模組化程式設計

ES5

• module.exports 匯出模組
• 把你需要的資料，寫入到{}即可
• 可以全部匯出，也可以部分匯出（相當於把我們匯出的資料，當做一個物件）
• 如果屬性名和函式/變數/物件...名字相同，可以簡寫
• module.exports={} ，字首可省略，寫成：exports = {}

匯出

let cat = {
    name: "小花",
    age: 2,
    cry(){
        return "喵喵喵";
    }
}

let dog = {
    name: "小黑",
    age: 1,
    cry(){
        return "汪汪汪"
    }
}

let name = "測試文字"

function sum(a,b) {
    return parseInt(a) + parseInt(b);
}



//同下：簡寫
exports = {
    cat,
    dog,
    name,
    sum,
}

//同下：簡寫
// module.exports = {
//     cat,
//     dog,
//     name,
//     sum,
// }

// 同上，原生
// module.exports = {
//     cat:cat,
//     dog:dog,
//     myName:name
// }
 

匯入

//可以匯出全部
const m = require("./exportEs51")
//可以匯出部分
const {sum} =  require("./exportEs51")

//使用
function use(){
    console.log(m.sum(10,20))
    console.log(sum(20,20));
}

ES6

• 常用三種匯出
  • export {名稱/物件/函式/變數/常量}
  • 定義物件/函式/變數/常量時放上字首關鍵字 export
  • export default { 定義物件/函式/變數/常量 }
• 常用兩種匯入
  • import {} from "xx.js" ------使用在前兩種匯入，注意匯入、匯出名稱要一致
  • import 名稱 from "xx.js"--------使用在最後一種匯入，此時匯出為一個自定義包名，可以由程式設計師自行決定

匯出1

let cat = {
    name: "小花",
    age: 2,
    cry(){
        return "喵喵喵";
    }
}

let dog = {
    name: "小黑",
    age: 1,
    cry(){
        return "汪汪汪"
    }
}

export {cat, dog}

匯出2

export let cat = {
    name: "小花",
    age: 2,
    cry(){
        return "喵喵喵";
    }
}

export let dog = {
    name: "小黑",
    age: 1,
    cry(){
        return "汪汪汪"
    }
}
 

匯入1、2

//可以匯出全部
import {cat, dog} from "./exportEs61.js"
//可以匯出部分
import {cat} from "./exportEs61.js"

function use(){
    console.log(cat.cry())
    console.log(dog.cry())
}

匯出3

export default {
    sum(a,b){
      return parseInt(a) + parseInt(b);  
    },
    
    cat:{
        name: "小花",
        age: 2,
        cry(){
            return "喵喵喵";
        }
    },

    dog:{
        name: "小黑",
        age: 1,
        cry(){
            return "汪汪汪"
        }
    }
}

匯入3

//匯入名稱可自定義，避免了重名問題
import m from "./exportEs61.js"

console.log(m.cat)