Web前端 -- 模块化编程

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)