前端模块化:匿名闭包、CommonJS、ES6模块化

2023-10-26

ES5时,用匿名函数实现的模块化

通过将代码放在闭包当中,使得命名不会冲突,每一个js文件都成为独立的模块。需要复用代码时,将闭包中的结构返回到全局作用域即可,通过模块名.方法/属性的方法使用

// a.js
;
var moduleA = (function(){
	var flag = true
	function sum(a, b) {
		return a + b
	}
	return {
		flag,
		sum
	}
})()

CommonJS中的模块化

// 导出
// 文件a.js
function sum(a, b) {
	return a + b
}
var flag = true
module.exports = {
	sum,
	flag
}
// 导入
// 文件b.js
var {sum, flag} = require('a.js')

ES6中的模块化

// 文件a.js
// 导出
// 方式一
var name = 'wang'
var age = 18
function say() {
	console.log('hello')
}
export {name, age, say}
// 文件a.js
// 导出
// 方式二
export var name = 'wang'
export var age = 18
export function say() {
	console.log('hello')
}

// 方式一、二作用相同
// 文件a.js
// 导出
// 方式三
export default function say() {
	console.log('hello')
}
// 这种导出方式,只能默认导出一个
// 情况一、二下的导入
import {name, age, say} from './a.js'
// 情况三下的导入
import fun from './a.js'
// 因为是默认导出且只有一个,因此fun必定是函数say,不必再解构
// 通用情况的导入
import * as a from './a.js'
// 将所有的导出,打包到a中
// 使用时,通过a去访问
a.say();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端模块化:匿名闭包、CommonJS、ES6模块化 的相关文章

随机推荐

  • 排序和复杂度

    常见的排序方式 1 冒泡排序 时间复杂度 最好情况是 O n 最坏情况是 O n2 空间复杂度 开辟一个空间交换顺序O 1 2 快速排序 时间复杂的 最好情况是 O nlogn 最坏情况是 O n2 空间复杂度 最好的情况 每一次base值
  • 结构型模式之外观模式

    复习用 不适合初学 复习用 不适合初学 复习用 不适合初学 定义 Facade Pattern 外部与一个子系统的通信必须通过一个统一的外观对象进行 为子系统中的一组接口提供一个一致的界面 外观模式定义了一个高层接口 这个接口使得这一子系统
  • collate chinese_prc_ci_as null解说

    我们在create table时经常会碰到这样的语句 例如 password nvarchar 10 collate chinese prc ci as null 那它到底是什么意思呢 不妨看看下面 首先 collate是一个子句 可应用于
  • 计算机程序的思维逻辑 (12) - 函数调用的基本原理

    栈 上节我们介绍了函数的基本概念 在最后我们提到了一个系统异常java lang StackOverflowError 栈溢出错误 要理解这个错误 我们需要理解函数调用的实现机制 本节就从概念模型的角度谈谈它的基本原理 我们之前谈过程序执行
  • 小知识·PD充电协议

    目录 PD充电器硬件结构 pd充电协议是什么 pd协议快充什么意思 PD快充协议优势 USB PD快速充电通信原理 PD充电器硬件结构 典型的手机充电器的硬件结构 以基于Dialog方案的高通QC2 0快充协议为例 如图1所示 iW626作
  • dd命令测试linux磁盘io情况,详解三种Linux测试磁盘IO性能的方法总结

    概述 在磁盘测试中我们一般最关心的几个指标分别为 iops 每秒执行的IO次数 bw 带宽 每秒的吞吐量 lat 每次IO操作的延迟 当每次IO操作的block较小时 如512bytes 4k 8k等 测试的主要是iops 当每次IO操作的
  • [C语言]如何使用C语言创建题库,进行高效刷题?

    事情是这样的 鄙人的学校开展了一个校内的知识竞赛 赛事主办方提供给了我们一个题库进行练习 但是是Word版本的 题目量不多 单选题 也就 140多道题目 当然 我们完全可以对着那个枯燥无味的Word文档进行死记硬背 但是 身为一名计算机专业
  • python - 例题分析:工时与工资

    工时在120到180 工资80 工时 工时超过180 超过部分奖励20 工时不足120 扣10 t int input 输入工时 1退出 while t 1 if t gt 120 and t lt 180
  • 3 关于QT中的MainWindow窗口,MenuBar ToolBar QuickTip等方面的知识点

    首先给大家分享一个巨牛巨牛的人工智能教程 是我无意中发现的 教程不仅零基础 通俗易懂 而且非常风趣幽默 还时不时有内涵段子 像看小说一样 哈哈 我正在学习中 觉得太牛了 所以分享给大家 点这里可以跳转到教程 1新建一个空Qt项目 编写12M
  • TP框架中, _initialize函数使用return 语句无法返回相应内容,同时也无法终止脚本继续执行

    tp框架中 initialize函数使用return 语句无法返回相应内容 同时也无法终止脚本继续执行 在 initialize中如果想要返回值 需要 使用echo 如 echo json encode code gt 0 msg gt 请
  • synchronized对于加锁代码块、方法以及全局(static)锁的详细对比

    在网上看了许多关于synchronized的介绍及用法区别 大多大同小异 点到为止 个人推荐一篇博友写的 网址如下 http blog csdn net cs408 article details 48930803 这篇博客是介绍对象锁和类
  • LeetCode--标签:数组31.下一个排列

    LeetCode 31 下一个排列 做题笔记 题目描述 解题思路 代码 java 题目描述 实现获取下一个排列的函数 算法需要将给定数字序列重新排列成字典序中下一个更大的排列 如果不存在下一个更大的排列 则将数字重新排列成最小的排列 即升序
  • 目标检测之YOLO系列

    文章目录 YOLO 整体结构 YOLO的核心思想 实现方法 损失函数 训练 预测 优缺点 YOLO V2 模型结构 改进策略 训练 YOLO9000 YOLOv3 改进点 YOLOv3结构 与其他模型对比结果 YOLO 整体结构 源码 de
  • 系统-等保三级-CentOS Linux 7合规基线检查 shell脚本

    系统 等保三级 CentOS Linux 7合规基线检查 shell脚本 bin bash 基于阿里云最佳实践安全实践的CentOS Linux 7基线标准 系统 等保三级 CentOS Linux 7合规基线检查 修改密码最大有效期为18
  • ceph学习(3)——rbd-mirror双机热备

    一 概述 本文主要关注于rbd mirror的使用以及使用过程中的遇到的问题 二 环境准备 ceph版本 14 2 16 服务器 3台centos7服务器 ceph1 ceph2 ceph3 硬盘 每台服务器1块10GB以上硬盘做osd 分
  • <七>、Hadoop Web项目--HDFS文件管理

    本博客参考 http blog csdn net fansy1990 article details 51356583 一 项目介绍 推荐系统的web项目已经完成 现在在此基础上增加HDFS文件管理功能 便于管理HDFS上的文件数据 本文基
  • 面试题创作0009,请问Linux kernel中的spinlock_t 是如何实现互斥访问同一数据的?

    面试题创作0007 请问Linux kernel中的spinlock t 是如何实现互斥访问同一数据的 在单核多线程 多核多线程 多cpu多线程中 spinlock t实现互斥的机制有区别么 分别是什么呢 进一步列举一些使用spinlock
  • PLC是如何控制伺服电机的?

    在回答这个问题之前 首先要清楚伺服电机的用途 相对于普通的电机来说 伺服电机主要用于精确定位 因此大家通常所说的伺服控制 其实就是对伺服电机的位置控制 其实 伺服电机还用另外两种工作模式 那就是速度控制和转矩控制 不过应用比较少而已 速度控
  • Java通过反射模拟冰蝎免杀功能

    一 Java反射 java反射算是java学习过程中不可绕过的一关 java 反射 反射允许运行中的Java程序获取自身的信息 并且可以操作类或对象的内部属性 反射的核心是JVM在运行时动态加载类或调用方法或访问属性 class 类 我们正
  • 前端模块化:匿名闭包、CommonJS、ES6模块化

    ES5时 用匿名函数实现的模块化 通过将代码放在闭包当中 使得命名不会冲突 每一个js文件都成为独立的模块 需要复用代码时 将闭包中的结构返回到全局作用域即可 通过模块名 方法 属性的方法使用 a js var moduleA functi