CommonJS

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

require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;

优点:

  • 服务器端模块便于重用
  • NPM 中已经有将近20万个可以使用模块包
  • 简单并容易使用

缺点:

  • 同步的模块加载方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的
  • 不能非阻塞的并行加载多个模块

实现:

  • 服务器端的 Node.js
  • Browserify,浏览器端的 CommonJS 实现,可以使用 NPM 的模块,但是编译打包后的文件体积可能很大

AMD

Asynchronous Module Definition 规范其实只有一个主要接口 define(id?, dependencies?, factory),它要在声明模块的时候指定所有的依赖 dependencies,并且还要当做形参传到 factory 中,对于依赖的模块提前执行,依赖前置。

define("module", ["dep1", "dep2"], function(d1, d2) {
return someExportedValue;
});
require(["module", "../file"], function(module, file) { /* ... */ });

优点:

  • 适合在浏览器环境中异步加载模块
  • 可以并行加载多个模块

缺点:

  • 提高了开发成本,代码的阅读和书写比较困难,模块定义方式的语义不顺畅
  • 不符合通用的模块化思维方式,是一种妥协的实现

实现:

CMD

Common Module Definition 规范和 AMD 很相似,尽量保持简单,并与 CommonJS 和 Node.js 的 Modules 规范保持了很大的兼容性。

define(function(require, exports, module) {
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ...
})

优点:

  • 依赖就近,延迟执行
  • 可以很容易在 Node.js 中运行

缺点:

  • 依赖 SPM 打包,模块的加载逻辑偏重

实现:

Commonjs、AMD、CMD的更多相关文章

  1. 模块机制 之commonJs、node模块 、AMD、CMD

    在其他高级语言中,都有模块中这个概念,比如java的类文件,PHP有include何require机制,JS一开始就没有模块这个概念,起初,js通过<script>标签引入代码的方式显得杂 ...

  2. 再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6

    Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. Javascript社区做了很多努力,在现有的运行环境中,实现” ...

  3. JavaScript模块化思想之CommonJS、AMD、CMD、UMD

    前一篇文章了解了什么是模块,这一篇就简单介绍一下如何定义并加载一个模块. 我所了解的三种模块加载方式分别是CommonJS.AMD和CMD 网上关于这三种模块加载方式讲解的文章很多,我就简单的做个介绍 ...

  4. CommonJS、AMD、CMD、NodeJs、RequireJS到底有什么联系?

    JS中的模块规范(CommonJS,AMD,CMD),如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范,本文包括这三个规范的来源及对应的产物的原理. 一.C ...

  5. CommonJS与AMD、CMD

    随着JS模块化编程的发展,处理模块之间的依赖关系变得至关重要,随后诞生了CommonJS.AMD与CMD规范,但es6的import/export能代替他们,但因为本人所使用的webpack也支持前三 ...

  6. CommonJS、AMD与CMD

    自从有了模块,我们可以更方便地使用别人的代码,想要什么功能,就加载什么模块.但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套! 于是下面三个模块 ...

  7. 对于模块加载:ES6、CommonJS、AMD、CMD的区别

    运行和编译的概念 编译包括编译和链接两步. 编译,把源代码翻译成机器能识别的代码或者某个中间状态的语言. 比如java只有JVM识别的字节码,C#中只有CLR能识别的MSIL.还简单的作一些比如检查有 ...

  8. javascript模块化之CommonJS、AMD、CMD、UMD、ES6

    javascript模块化之CommonJS.AMD.CMD.UMD.ES6 一.总结 一句话总结: CommonJS是同步加载模块,用在服务端:AMD是异步加载模块,用于浏览器端 1.为什么服务器端 ...

  9. commonJS、AMD和CMD之间的区别

    JS中的模块规范(CommonJS,AMD,CMD),如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧, ...

  10. Common JS、AMD、CMD和UMD的区别

    一.CommonJS 1.CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API.它的终极目标是提供一个类似Python,Ruby和Java标准库.CommonJs 是服务器 ...

随机推荐

  1. Android-WebView与本地HTML (互调)

    此篇博客是基于,上两篇博客,Android-WebView与本地HTML (HTML调用-->Java的方法) , Android-WebView与本地HTML (Java调用--->HT ...

  2. Azure DevOps Server(TFS 2019) 中的SonarQube扫描任务出现错误:AppTest.java can't be indexed twice

    SonarQube错误描述 将一个Maven示例程序导入到Azure DevOps的待库中,执行SonarQube扫描过程时, DevOps Server提示下面的错误信息: [ERROR] Fail ...

  3. UPDATE语句中SET部分列赋值的先后顺序有影响么?

    昨天研发同事问我个问题,UPDATE语句中SET部分列赋值的先后顺序会影响结果么?以前没考虑过这个问题,因为通常我们都会UPDATE时给列赋予一个确定的值,而不是一个依赖于其他列的值. 测试环境: D ...

  4. .net core 与ELK(3)安装Kibana

    1.去产品官网下载https://www.elastic.co/downloads/kibana 对应的tar.gz的压缩包,放到/usr/local/src目录 2.解压 -linux-x86_64 ...

  5. 一场关于 .net core 和 .net framework 编码的案情分析

    案情背景 目前公司做新项目,基本所有新项目都是用.net core来做,旧项目一半还是基于 .net framework下面,一半已经迁移到了core平台.在做新项目的时候,有个功能需要对接到旧项目那 ...

  6. .Net Mvc AutoMapper简单使用

    1.安装automapper nuget包. 2.新建一个AutoMapper配置类并实现一个静态配置方法. 方法一. using AutoMapper; using AutoMapperTest.M ...

  7. cad.net之ACAD和GCAD环境变量获取

    #if AC2006 || AC2007 || AC2008 || AC2009 || AC2010 || AC2011 || AC2012 [System.Security.SuppressUnma ...

  8. Python MySQL - 创建/查询/删除数据库

    #coding=utf-8 import mysql.connector import importlib import sys #连接数据库的信息 mydb = mysql.connector.co ...

  9. [Element-UI] 使用Element-UI的DateTimePicker组件报错:Cannot read property 'getHours' of undefined

    使用Element-UI组件的DateTimePicker,如下: <template> <div class="block"> <span clas ...

  10. java后端导入excel将数据写入数据库

    参考:https://www.cnblogs.com/hanfeihanfei/p/7079210.html @RequestMapping("/importExcel.do") ...