模块化-CMJESM
CommonJS 重点
AMD
CMD
ES6 模块化 重点
每个模块尽量简洁,不超过50行代码,便于维护和复用,避免全局污染
nodejs直接运行某个js文件,该文件被称之为入口文件;
nodejs 遵循es标准,单由于脱离了浏览器环境,因此:
1、你可以在nodejs中使用es标准的任何语法或api,例如:循环、判断、数组、对象等
2、你不能在nodejs中使用浏览器的web api,例如:dom对象,window对象,document对象等
模块:模块就是一个js文件,它实现了一部分功能,并隐藏自己的内部实现,同时提供了一些接口供其他模块使用
模块有两个核心要素:隐藏和暴露
隐藏的是自己内部的实现
暴露的是希望外部使用的接口
任何一个正常的模块化标准,都应该默认隐藏模块中的所有实现,而通过一些语法或api调用来暴露接口
暴露接口的过程即模块的导出
当通过某种语法或api去使用一个模板时,这个过程叫做模块的导入
CommonJS规范(静态依赖)
commonjs使用exports导出模块,require导入模块
nodejs中导入模块,使用相对路径,并且必须使用./或../开头
CMJ 具体规范如下:
1、如果一个js文件中存在exports或require,该文件是一个模块
2、模块内的所有代码均为隐藏代码,包括全局变量、全局函数,这些全局的内容均不应该对全局变量造成任何污染
3、如果一个模块需要暴露一些API提供给外部使用,需要通过exports导出,exports是一个空的对象,你可以为该对象添加任何需要导出的内容
4、如果一个模块需要导入其他模块,通过require实现,require是一个函数,传入模块的路径即可返回该模块导出的整个内容
nodejs对commonjs的实现:
1、为了保证高效的执行,仅加载必要的模块,nodejs只有执行到require函数时才会加载并执行模块
2、为了隐藏模块中的代码,nodejs执行模块时,会将模块中的所有代码放置到一个函数中执行,以保证不污染全局变量
(function(){//模块中的代码})()
3、为了保证顺利的导出模块内容,nodejs做了一下处理
1)在模块开始执行前,初始化一个值module.exports={}
2)module.exports即模块的导出值
3)为了方便开发者便捷的导出,nodejs在初始化module.exports后,又声明了一个变量exports=module.exports,在exports中加属性,然后进行导出
(function(module){
module.exports = {};
var exports = module.exports;
//模块中的代码
return module.exports;
})()
4)为了避免反复加载同一个模块,nodejs默认开启了模块缓存,如果加载的模块已经被加载过了,则会自动使用之前的导出结果
commonjs是同步的
不能在浏览器运行的原因:
1、远程加载js浪费时间
2、模块代码需要放到函数中执行
要解决这两个问题,出现了AMD和CMD
AMD全称是Asynchronous Module Definition 即异步模块加载机制
require.js实现了AMD规范,在AMD中,导入和导出模块的代码,都必须放置在define函数中
define([依赖的模块列表],function(模块名列表){
//模块内部的代码
return导出的内容
})
CMD全称是COMMON Module Definition 公共模块定义规范
sea.js实现了CMD规范
在cmd中,导入和导出模块的代码,必须放置在define函数中
define((require,exports,module)=>{
//模块内部代码
})
Commonjs依赖延迟声明:
优点:某些时候可以提高效率
缺点:无法在一开始确定模块依赖关系
ES6模块化(ESM)的特点
:(动态依赖、静态依赖)
1、使用依赖 预声明 的方式导入模块
2、灵活的多种导入导出方式
3、规范的路径表示法:所有路径必须以./或../开头
模块的引入,注意:这一部分非模块化
目前,浏览器使用以下方式引入一个ES6模块文件:
<script src= "入口文件" type="module">
ES6的模块导入导出分为两种:
1、基本导入导出
导出:(由于基本导出必须具有名称,所以要求导出内容必须跟上声明表达式或具名符号)
export 基本声明表达式
(export var a =1)
或 export {具名符号}
(var age = 18;
export{age}; )
导入:(由于使用的是预依赖加载,因此导入其他任何模块,都需要写在所有代码之前)
import{导出的符号列表} from "模块路径"
导入细节:
1)导入时,可以通过关键字as对导入的符号进行重新命名
import{b as c} from "模块路径"
2)导入时使用的符号是常量,不可修改
3)可以使用*号导入所有的基本导出,行成一个对象
import * as d from "模块路径"
4)有一些初始化代码,只需要导入,不需要运行,可以直接写代码:
import "模块路径"
2、默认导入导出
每个模块,除了允许有多个基本导出之外,还允许有一个默认导出,由于只有一个,因此无需取名,每个模块不能出现多个默认导出语句
默认导出:
export default 默认导出的数据
或 export{默认导出的数据 as default}
默认导入:
import 接收变量名 from “模块路径”
如果希望同时导入某个模块的默认导出和基本导出,可以使用下面的语法:
import 接收默认导出的变量,{接收基本导出的变量} from “模块路径”
如果使用*号,会将模块的所有默认导出和基本导出聚合到一个对象中,默认导出会作为属性default存在
以上均为静态导入
1、静态导入的代码必须在代码顶端,也不可放在代码块中
2、静态导入的代码绑定的符号是常量,不可更改
动态导入:
import("模块路径")
返回一个promise,完成时的数据为模块对象
ES6模块化细节:
1、尽量导出不可变值
2、可以使用无绑定的导入用于执行一些初始化代码;import "模块路径"
3、可以使用绑定再导出,来重新导出来自另一个模块的内容
export (绑定的标识符) from "模块路径"
模块化-CMJESM相关推荐
- android 提供服务,GitHub - FamliarMan/AndroidServiceProvider: 为模块化提供的一个服务发现库...
AndroidServiceProvider是为了解决模块化过程中各模块服务统一获取的难题而产生的,具体情况请参照这篇文章 Android模块化中的服务发现机制 注意混淆 这里特别强调,所有注册的类都 ...
- C:模块化程序设计 以及数组
模块化: 举例: 继续细化上述模块,猜完一个数字之后,继续再猜: 再细化计算机生成数字: 数据类型前边都加入了一个const,把他声明为整形常量的原因,当你这个参数被声明为const的时候就可以起到保 ...
- Unity Pro builder创建模块化仓库建筑学习教程
Unity内部的专业3D编辑工作室 你会学到: 直接在Unity内部学习3D建模 使用专业构建器的专业方法 为您的游戏创建模块化资产 了解如何为您的三维模型设置纹理 三维资产的模块化布局 专业后期制作 ...
- Blender 和Unreal Engine中的模块化3D建筑技能学习视频教程
Blender 和Unreal Engine中的模块化3D建筑技能学习视频教程 流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕( ...
- Blender模块化建筑环境地形场景制作视频教程 Creating modular environments
Blender模块化建筑环境地形场景制作视频教程 Creating modular environments Blender模块化建筑环境地形场景制作视频教程 Creating modular env ...
- iOS应用模块化的思考及落地方案(二)模块化自动构建工具的使用
1.0 iOS模块化中的问题 前文已经介绍了模块化的流程及一些常见的问题,我们在这里再次总结一下. 在工作中,当我们开始一个新项目的时候,最先考虑的就是模块化工作. 模块化工作的想法是很美好的,可是执 ...
- iOS应用模块化的思考及落地方案(一)模块的划分及模块化工作流程
1.0 什么是模块化 很多关于重构及设计模式的介绍中,经常提到的几个词语是复用及解耦. 模块化之所以被提出,也更多是为了解决这几个问题. 复用可以减少重复造轮子的情况,很容易理解的是,我们经常使用的g ...
- 使用Qt编写模块化插件式应用程序
动态链接库技术使软件工程师们兽血沸腾,它使得应用系统(程序)可以以二进制模块的形式灵活地组建起来.比起源码级别的模块化,二进制级别的模块划分使得各模块更加独立,各模块可以分别编译和链接,模块的升级不会 ...
- 只有你想不到,没有它做不到——可随时变身的模块化机器人
默默单干不如灵活协作 独立单干虽自由灵活,但是和牛逼队友协作完成任务却是一件更美好.高效的事情.这不是只适用于人类社会的定律,在机器人世界里依然如此. 雷锋网消息,近日,著名英国杂志Nature Co ...
最新文章
- 小花梨的三角形(暴力上下扫三角形)
- 骨干云池服务器SATA盘的RAID配置,标准互联 美国CN2云池服务器即将开售,欢迎新老客户选购 - Pesyun.com 公告与通知...
- Multiple classes found for path in the registry of this declarative base. Please use a fully
- 题目1203:IP地址
- python批量给文件命名为001,002,...【亲测有效】
- 5款强大的JVM 性能调优监控工具 !
- y7000 intel nvidia 双显卡安装Ubuntu16.04
- 如何提高阅读源代码的效率 .
- 主机驱动与外设驱动的分离思想
- Docker容器镜像加速器
- linux x200 黑屏,Thinkpad x200黑屏(一长两短) 复原
- 什么是数字孪生?把这篇文章看完你就能秒懂
- GPT格式的磁盘扩容
- BCH编码(15,5)1bit串行,5bit并行
- 为你的梦想和目标去真正付出【时任树熊WIFI CTO时的一次内部分享】
- 苹果 macOS Big Sur 11.5 RC 2(20G71)候选版本发布
- 404 - 找不到文件或目录 问题解决
- linksys 打印软件_如何使用Linksys Smart Wi-Fi设置媒体和文件服务器
- 超线程技术(Hyper—Threading Technology,HTT)
- 修改matlab fig,科学网—fig图片修改技巧 - 张坤的博文
热门文章
- GLUT教程 - glutPostRedisplay函数
- max2104打开时提醒注册插件出错_启动3dmax时出现插件程序集加载错误怎么办?
- python代码举例说明生日悖论
- 计算机博士论文 评阅意见,博士论文评阅意见
- 【conda】conda环境的复制移植的两种方法
- protobuf网络传输协议的优缺点
- 端口渗透—23端口Telnet
- Html5新特性归纳
- 机器学习算法平台alink_阿里正式开源通用算法平台Alink,“双11”将天猫推荐点击率提升4...
- webpack——module、chunk和bundle的区别