Web前端 -- 模块化编程

2022-05-23 17:02:43 阅读：192 来源： 互联网

标签：Web return name -- 模块化 cry 导出 dog cat

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,return,name,--,模块化,cry,导出,dog,cat
来源： https://www.cnblogs.com/shaozelong/p/16301843.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Web前端 -- 模块化编程

Web前端 -- 模块化编程

ES5

ES6