Web前端 -- 模块化编程
2022/5/24 1:21:31
本文主要是介绍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前端 -- 模块化编程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)
- 2024-01-12程序员提效 x10 的必备开源“神器”
- 2024-01-11前端可以监控静态资源的时间吗-icode9专业技术文章分享