模块化编程

文章目录

  • 模块化编程
    • CommonJS
    • ES6 模块编程

模块化编程

JavaScript的模块化编程主要是为了解决大型代码项目的复杂性问题,让代码更易于维护和调试。

模块化可以将代码分割成多个独立的部分,每个部分都有其特定的功能,可以单独测试和使用。

CommonJS

CommonJS是Node.js采用的模块化规范,它使用require()来加载模块,使用module.exports来输出模块接口。

案例:编写 functions.js , 该文件有函数,变量, 常量, 对象。要求在 use.js , 可以使用到 function.js 中定义的 函数/变量/常量/对象

//function.js
//定义对象,变量,常量, 函数
const sum = function (a, b) {return parseInt(a) + parseInt(b);
}
const sub = function (a, b) {return parseInt(a) - parseInt(b);
}
let name = "lxg";
const PI = 3.14;
const monster = {name: "牛魔王", age: 500, hi() {console.log("hi 你好 牛魔王");}
}
//导出
/*
1. module.exports 导出模块
2. 把你需要导出的数据, 写入到 {}中即可
3. 可以全部导出,也可以部分导出
4. 理解:相当于把我们导出的数据,当做一个对象
5. 如果属性名和函数/变量/对象..名字相同,可以简写
6. 有些前端, 简写 module.exports={} 成 exports={}
*/
exports = {sum, sub, name, PI
}
//use.js
//导入
//1. 在 es5 中, 我们通过 require 就包 对应.js 中的数据/对象,引入
//2. 我们使用的时候,通过 m.属性 就可以使用
//3. 如果我们导入时,不需要所有的,可以导入部分数据
const m = require("./function.js");
const {sub} = require("./function.js");//使用
console.log(m.sub("100","200"));
console.log(m.sum(10,90));
console.log(m.name)
console.log(m.PI);
console.log(sub(19,8));

ES6 模块编程

ES6三种导出模块方式:

  • export {名称/对象/函数/变量/常量}
  • export 定义 =
  • export default {}

导入模块方式:

  • import {} from “xx.js”
  • import 名称 form “xx.js”

1)案例一:使用第一种方式导出模块

const sum = function (a, b) {return parseInt(a) + parseInt(b);
}
const sub = function (a, b) {return parseInt(a) - parseInt(b);
}
let name = "lxg";
const PI = 3.14;
const monster = {name: "牛魔王",age: 500,hi() {console.log("hi 你好 牛魔王");}
}// 第一种方式导出
exports = {sum, sub, name, PI
}
//导入
import { sum, sub, name, PI} from "./function"
//使用
console.log(sub("100", "200"));
console.log(sum(10, 90));
console.log(name)
console.log(PI);

2)案例二:使用第二种方式导出模块

// 直接导出属性
export const sum = function (a, b) {return parseInt(a) + parseInt(b);
}
export let name = "lxg";
//导入
import {sum,  name} from "./function"
//使用
console.log(sub("100", "200"));
console.log(name)

3)案例三:使用第三种方式导出模块

默认导出,将所有属性当成一个对象导出
export default {sum (a, b) {return parseInt(a) + parseInt(b);},sub (a, b) {return parseInt(a) - parseInt(b);},name : "lxg",PI : 3.14,monster : {name: "牛魔王",age: 500,hi() {console.log("hi 你好 牛魔王");}}
}
//导入,m相当于被导出的对象
import m from "./function"
//使用
console.log(m.sub("100", "200"));
console.log(m.name);
console.log(m.monster);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/1062.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

目标检测——输电线路缺陷数据集

引言 亲爱的读者们,您是否在寻找某个特定的数据集,用于研究或项目实践?欢迎您在评论区留言,或者通过公众号私信告诉我,您想要的数据集的类型主题。小编会竭尽全力为您寻找,并在找到后第一时间与您分享。 …

非洲美食多样性而丰富多彩

非洲美食因其地域广阔和民族多样性而丰富多彩,每个国家和地区都有独特的烹饪传统和饮食文化。以下列举一些非洲各地的代表性美食: 肯尼亚: Ugali:一种主要由玉米面制成的团状食物,搭配各种炖煮的蔬菜、豆类和肉类食用。…

档案数字化能为企业带来什么帮助

档案数字化为企业带来以下帮助: 1. 空间节省:数字化档案可以减少实体档案的存储空间需求,不再需要大量的文件柜和文件存储空间,从而帮助企业节约办公场地。 2. 检索便捷:数字化档案可以通过关键词搜索、标签分类等方式…

线性表的链式存储(单循环链表)

文章目录 前言一、循环链表是什么?二、单循环链表三、单循环链表基本操作的实现总结 前言 T_T此专栏用于记录数据结构及算法的(痛苦)学习历程,便于日后复习(这种事情不要啊)。所用教材为《数据结构 C语言版…

js 函数节流和函数防抖及区别详解

文章目录 1. 前言2. 函数节流3. 函数防抖4. 总结 1. 前言 浏览器中总是有一些操作非常耗费性能。所以就有了函数节流和函数防抖来提高浏览器性能。 函数节流:频繁触发一个事件时候,每隔一段时间,函数只会执行一次。 函数防抖:当触…

Linux中文件特殊权限suid、sgid、sticky详解

Linux中文件特殊权限suid、sgid、sticky 作用对象 suid权限作用于文件属主sgid权限作用于属组sticky权限作用于other suid 作用:让普通用户临时拥有该文件的属主的指向权限,suid权限只能应用在二进制可执行文件(命令)表示方法…

【Java笔记】第4章:深入学习循环结构

前言1. 循环的理解2. while循环3. do...while循环4. for循环5. 循环的控制语句6. 循环的嵌套结语 ↓ 上期回顾: 【Java笔记】第3章:深入学习分支结构 个人主页:C_GUIQU 归属专栏:【Java学习】 ↑ 前言 各位小伙伴大家好!上期小编…

idea错误地commit后如何处理

如果你想使用命令行重新初始化 Git 仓库,可以按照以下步骤进行: 删除该项目的.git文件夹 打开命令行终端。 切换到项目所在的目录,使用 cd 命令。 在项目目录下运行以下命令来重新初始化 Git 仓库 git init这将在当前目录下创建一个新的 Git …

Spring 事务实现方式:

Spring 事务实现方式: Spring并不直接支持事务,只有当数据库支持事务的时候,Spring才支持事务,Spring只不过简化了开发人员实现事务的开发步骤 Spring事务的实现方式有两种: 一、基于申明式事务: Service…

ubuntu 16.04.7连不上网的解决方案

首先在编辑选项卡里找到虚拟网络编辑器, 点击更改设置 点击添加网络 点击确定 选择桥接模式,自动后点击应用,最后点击确定即可。

Java——多态

1.多态简介 多态,字面意思来看就是多种形态,即当去执行某个行为,会因为对象的不同而产生不同的效果。在java语言当中就是根据对象的性质不同,对同一个方法进行调用时,得到了不同的执行结果。 在理解多态中必须时刻牢记…

文件夹变白色文件,数据恢复全攻略助你轻松找回!

在日常的电脑使用中,你是否曾遇到过文件夹突然变成了白色文件的情况?这种看似无害的变化,实则可能隐藏着数据丢失的风险。当你发现原本正常的文件夹图标变成了无关联程序的白板图标,且无法正常打开时,内心无疑是焦虑不…

车载诊断系统应用方案选型,ESP8266方案让成本降低了35%,销售数据提升47%

车载诊断系统简称OBD,这个系统随时监控发动机的运行状况和尾气后处理系统的工作状态,一旦发现有可能引起排放超标的情况,会马上发出警示。当系统出现故障时,故障灯(MIL)或检查发动机(Check Engine)警告灯亮,同时OBD系统…

Java调用cmd

Java调用cmd并执行命令 在Java中调用命令提示符(cmd)并执行命令,可以通过使用Runtime类或ProcessBuilder类来实现 代码示例 /*** 在指定目录下执行命令。** param command 要执行的命令* param path 命令执行的路径* return 如果命令成功执…

【JavaWeb】Day50.Mybatis的XML配置文件

XML配置文件规范 使用Mybatis的注解方式,主要是来完成一些简单的增删改查功能。如果需要实现复杂的SQL功能,建议使用XML来配置映射语句,也就是将SQL语句写在XML配置文件中。 在Mybatis中使用XML映射文件方式开发,需要符合一定的规…

C语言之文件操作【万字详解】

目录 一.什么是文件? 二.为什么要使用文件? 三.文件的分类 3.1.程序文件 3.2.数据文件 四.二进制文件和文本文件 五.文件的打开和关闭 (重点) 5.1流和标准流 5.1.1何为流? 5.1.2.标准流 5.2文件指针 5.3文件的打开和关…

【1425】java 外籍人员管理系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

一、源码特点 java 外籍人员管理系统是一套完善的java web信息管理系统 采用serlvetdaobean,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式 开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff…

机器学习波士顿房价

流程 数据获取导入需要的包引入文件,查看内容划分训练集和测试集调用模型查看准确率 数据获取 链接:https://pan.baidu.com/s/1deECYRPQFx8h28BvoZcbWw?pwdft5a 提取码:ft5a --来自百度网盘超级会员V1的分享导入需要的包 import pandas as pd imp…

回归预测 | Matlab实现SA-BP模拟退火算法优化BP神经网络多变量回归预测

回归预测 | Matlab实现SA-BP模拟退火算法优化BP神经网络多变量回归预测 目录 回归预测 | Matlab实现SA-BP模拟退火算法优化BP神经网络多变量回归预测预测效果基本描述程序设计参考资料 预测效果 基本描述 1.Matlab实现SA-BP模拟退火算法优化BP神经网络多变量回归预测&#xff0…

Vue3+Spring Boot3实现跨域通信解决办法

Vue3Spring Boot3实现跨域通信解决办法 1 跨域是什么?2 何为同源呢?3 解决办法3.1 全局配置3.1.1 实现CorsFilter过滤器3.1.2 实现SpringMVC配置类3.1.3 创建CorsFilterFactory工厂类返回CorsFilter对象 3.2 局部跨域3.2.1 注解配置3.2.2 手动设置响应头(局部跨域)…