前端开发规范的区别(Commonjs、AMD、CMD、ES6模块化)

commonjs规范 (Node.js):

CommonJS 主要运行于服务器端,该规范指出,一个单独的文件就是一个模块,其内部定义的变量是属于这个模块的,不会对外暴露,也就是说不会污染全局变量。 Node.js为主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module、exports、require、global。

CommonJS的核心思想就是通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports 或者 module.exports 来导出需要暴露的接口

  • 优点:CommonJS规范在服务器端率先完成了JavaScript的模块化,解决了依赖、全局变量污染的问题,这也是js运行在服务器端的必要条件。

  • 缺点:由于 CommonJS 是同步加载模块的,在服务器端,文件都是保存在硬盘上,所以同步加载没有问题,但是对于浏览器端,需要将文件从服务器端请求过来,那么同步加载就不适用了,所以,CommonJS是不适用于浏览器端的。

AMD 规范(require.js):

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

模块功能主要的几个命令:define、require、return和define.amd。define是全局函数,用来定义模块,define(id?, dependencies?, factory)。require命令用于输入其他模块提供的功能,return命令用于规范模块的对外接口,define.amd属性是一个对象,此属性的存在来表明函数遵循AMD规范。

  • 优点:适合在浏览器环境中异步加载模块。可以并行加载多个模块。
  • 缺点:提高了开发成本,并且不能按需加载,而是必须提前加载所有的依赖。

CMD 规范(sea.js):

CMD通过按需加载的方式,而不是必须在模块开始就加载所有的依赖。
CMD推崇依赖就近、延迟执行。

  • 优点:同样实现了浏览器端的模块化加载。可以按需加载,依赖就近。
  • 缺点:依赖SPM打包,模块的加载逻辑偏重。

ES6模块化:

ES modules(ESM)是 JavaScript 官方的标准化模块系统。

在ES6中,我们可以使用 import 关键字引入模块,通过 export 关键字导出模块,但是由于ES6目前无法在浏览器中执行,所以,我们只能通过babel将不被支持的import编译为当前受到广泛支持的 require。

总结:

  1. AMD/CMD/CommonJs 是js模块化开发的规范,对应的实现是require.js/sea.js/Node.js
  2. CommonJs 主要针对服务端,AMD/CMD/ES Module主要针对浏览器端(服务端一般采用同步加载的方式,浏览器端需要异步加载)
  3. AMD/CMD区别,虽然都是并行加载js文件,但还是有所区别,AMD是预加载,在并行加载js文件同时,还会解析执行该模块(因为还需要执行,所以在加载某个模块前,这个模块的依赖模块需要先加载完成);而CMD是懒加载,虽然会一开始就并行加载js文件,但是不会执行,而是在需要的时候才执行。
  4. CommonJs和ES Module的区别:
  • CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
  • CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
  • CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。

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

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

相关文章

Spring 数据校验:Validation

文章目录 Spring Validation概述实验一:通过Validator接口实现实验二:Bean Validation注解实现实验三:基于方法实现校验实验四:实现自定义校验 Spring Validation概述 在开发中,我们经常遇到参数校验的需求&#xff0…

migration 与navicat

Migration和Navicat是两个不同类型的产品,各自在特定场景下有各自的优势。 Migration主要针对的是数据的迁移或复制,从一个数据库迁移到另一个数据库,或者从一个环境复制到另一个环境。它主要关注的是数据的迁移和复制过程,不提供…

wrk HTTP打流测试工具

安装 git clone https://gitee.com/mirrors/wrk.git 参数 -c, --connections <N> Connections to keep open,需要模拟的连接数 -d, --duration <T> Duration of test,测试的持续时间 -t, --threads <N> Number of threads to use,需要模拟的线程…

【FPGA零基础学习之旅#15】串口接收模块设计与验证(工业环境)

&#x1f389;欢迎来到FPGA专栏~串口接收模块设计与验证&#xff08;工业环境&#xff09; ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;FPGA学习之旅 文章作者技术和水平有限&#xff0c;如…

【Python学习笔记】对象、方法

1. 对象方法定义 对象通常都拥有属于自己的 方法&#xff08;英文叫 method &#xff09;。 对象的方法其实可以看成是对象所拥有的函数。也就是说 这个方法&#xff0c;是属于这个对象的函数。 调用对象的方法&#xff0c;和调用函数差不多&#xff0c;只要在前面加上 所属…

html5 文字自动省略,html中把多余文字转化为省略号的实现方法方法

单行文本&#xff1a; .box{width: 200px;background-color: aqua;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; }多行文本 1.利用-webkit-line-clamp属性 .box{width: 200px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-l…

Grammarly安装到word里 2023/10/18

时间&#xff1a;2023/10/18 问题有很多种&#xff0c;我提供一个解决方法&#xff0c;下载对的版本&#xff0c;不要下载 for windows系统&#xff08;起码我的是不嵌入在word里的&#xff09;&#xff0c;要下载for Microsoft office。官网目前可能在推for windows,所以直接下…

Angular知识点系列(5)-每天10个小知识

目录 41. Angular的路由守卫42. 处理文件的上传和下载43. Angular的动画系统44. 使用第三方库和选择评估45. 性能优化46. AOT和JIT编译47. 处理响应式布局和适配不同屏幕尺寸48. Angular的国际化&#xff08;i18n&#xff09;49. Angular的PWA开发50. 使用Angular Material或其…

队列的基本操作以及C语言实现

队列的基本操作&#xff1a; 1.Enqueue&#xff1a;将元素插入队列尾部。 2.Dequeue&#xff1a;从队列头部移除元素。 3.Front&#xff1a;获取队列头部元素。 4.IsEmpty&#xff1a;检查队列是否为空。 5.IsFull&#xff1a;检查队列是否已满。 代码实现&#xff1a; #inclu…

python web开发(四): Bootstrap

1.初步了解 别人已经写好的CSS样式&#xff0c;我们可以直接引用 下载 Link-BootStrap 解压&#xff0c;并放入到当前项目中 引用 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</tit…

day2:Node.js 环境准备

day2&#xff1a;Node.js 环境准备 文章目录 day2&#xff1a;Node.js 环境准备安装 Node.js 和 npm验证 Node.js 和 npm使用淘宝 NPM 镜像npm 包管理器的基本使用**NPM 常用命令**小结 准备一台linux服务器 [rootnode3 ~]# cat /etc/redhat-release CentOS Linux release 7.2.…

wps/word 如何让表格的标题和表格名称文本(表1-1 xxx)跨页显示(已解决)

第一步&#xff1a; 打开wps 创建一个跨页的表格表格&#xff0c;如下图 第二步 大家都知道 表格标题跨页 就是1&#xff09;在菜单表格工具 点击重复标题 或者 2&#xff09;表格属性--》行--》在各页顶端以标题行形式出现&#xff0c;详细如下图。 1&#xff09; 第一…

【APP源码】基于Typecho博客程序开发的博客社区资讯APP源码

全新博客社区资讯APP源码 Typecho后端 一款功能全面&#xff0c;用户交互良好&#xff0c;数据本地缓存&#xff0c;集成邮箱验证&#xff0c;在线投稿&#xff0c;&#xff08;内置Mardown编辑器&#xff09;&#xff0c; 快捷评论的的博客资讯APP。同时兼容H5和微信小程序。 …

提升微服务稳定性与性能:深入剖析Netflix Hystrix框架

说到 Netflix Hystrix 框架&#xff0c;一定离不开 com.netflix.hystrix.HystrixCommand&#xff0c;这个类是 Netflix 开源的 Hystrix 框架中的一个关键类&#xff0c;用于实现服务的容错和熔断功能。它主要用于将远程服务调用封装成一个独立的命令对象&#xff0c;以便于进行…

论坛介绍 | COSCon'23 云计算(C)

众多开源爱好者翘首期盼的开源盛会&#xff1a;第八届中国开源年会&#xff08;COSCon23&#xff09;将于10月28-29日在四川成都市高新区菁蓉汇举办。本次大会的主题是&#xff1a;“开源&#xff1a;川流不息、山海相映”&#xff01;各位新老朋友们&#xff0c;欢迎到成都&am…

一些bug总结

今天被几个小问题和bug折磨了一天&#xff0c;来总结一下… 权限问题 用vscode连接服务器&#xff0c;如果是在root用户连接的情况下新建的文件/文件夹&#xff0c;然后切换到别的用户的时候去写的代码 可能会遇到各种问题 解决方案是更改文件或文件夹的所有权。这可以通过使用…

ubuntu 18.04 LTS交叉编译opencv 3.4.16并编译工程[全记录]

一、下载并解压opencv 3.4.16源码 https://opencv.org/releases/ 放到home路径下的Exe文件夹&#xff08;专门放用户安装的软件&#xff09;中&#xff0c;其中build是后期自建的 为了版本控制&#xff0c;保留了3.4.16&#xff0c;并增加了-gcc-arm 二、安装cmake和cmake-g…

微信小程序使用本地存储方法

微信小程序提供了本地存储的方法 wx.setStorageSync() 和 wx.getStorageSync()&#xff0c;可以用 于在用户本地存储数据。 wx.setStorageSync() wx.setStorageSync() 方法用于将数据存储到本地缓存中。该方法是同步的。 wx.setStorageSync(key, data) 参数说明&#xff1a; …

Redis:Feed流之Timeline的实现

当我们关注了用户后&#xff0c;这个用户发了动态&#xff0c;那么我们应该把这些数据推送给用户&#xff0c;这个需求&#xff0c;其实我们又把他叫做Feed流&#xff0c;关注推送也叫做Feed流&#xff0c;直译为投喂。为用户持续的提供“沉浸式”的体验&#xff0c;通过无限下…

5.Vue-在Vue框架中实现Vue的增删改查

题记 在vue框架中实现vue的增删改查&#xff0c;以下是具体操作流程和代码 编写TestView.vue文件 TestView.vue文件如下&#xff1a; <template> <div id"app"> <h1>学生列表</h1> <input type"text" v-model"searchQue…