HTML5教程

Web前端 -- 模块化编程

本文主要是介绍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)
这篇关于Web前端 -- 模块化编程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!