JS模块规范：AMD、UMD、CMD、commonJS、ES6 module

_ang 发布于2019-08-22 11:17 / 1727人阅读

摘要：要想让模块再次运行，必须清除缓存。模块加载会阻塞接下来代码的执行，需要等到模块加载完成才能继续执行同步加载。环境服务器环境应用的模块规范是参照实现的。这等同在每个模块头部，有一行这样的命令。

commonJS

特点：

1、模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
2、模块加载会阻塞接下来代码的执行，需要等到模块加载完成才能继续执行——同步加载。

环境：服务器环境

应用：nodejs的模块规范是参照commonJS实现的。

语法：

1、导入：require("路径")
2、导出：module.exports和exports

注意：module.exports和exports的的区别是exports只是对module.exports的一个引用，相当于Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行var exports = module.exports;这样的命令。

demo

// a.js
// 相当于这里还有一行：var exports = module.exports;代码
exports.a = "Hello world";  // 相当于：module.exports.a = "Hello world";

// b.js
var moduleA = require("./a.js");
console.log(moduleA.a);     // 打印出hello world

AMD

特点：

1、异步加载
2、管理模块之间的依赖性，便于代码的编写和维护。

环境：浏览器环境

应用：requireJS是参照AMD规范实现的

语法：

1、导入：require(["模块名称"], function ("模块变量引用"){// 代码});
3、导出：define(function (){return "值");

demo

// a.js
define(function (){
　　return {
　　　a:"hello world"
　　}
});
// b.js
require(["./a.js"], function (moduleA){
    console.log(moduleA.a); // 打印出：hello world
});

CMD

特点

1、CMD是在AMD基础上改进的一种规范，和AMD不同在于对依赖模块的执行时机处理不同，CMD是就近依赖，而AMD是前置依赖。

环境：浏览器环境

应用：seajs是参照UMD规范实现的，requireJS的最新的几个版本也是部分参照了UMD规范的实现

语法：

1、导入：define(function(require, exports, module) {});
2、导出：define(function (){return "值");

demo

// a.js
define(function (require, exports, module){
　　exports.a = "hello world";
});
// b.js
define(function (require, exports, module){
    var moduleA = require("./a.js");
    console.log(moduleA.a); // 打印出：hello world
});

UMD

特点：

1、兼容AMD和commonJS规范的同时，还兼容全局引用的方式

环境：浏览器或服务器环境

应用：无

语法：

1、无导入导出规范，只有如下的一个常规写法：

常规写法：

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        //AMD
        define(["jquery"], factory);
    } else if (typeof exports === "object") {
        //Node, CommonJS之类的
        module.exports = factory(require("jquery"));
    } else {
        //浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //方法
    function myFunc(){};
    //暴露公共方法
    return myFunc;
}));

ES6 module

特点：

1、按需加载（编译时加载）
2、import和export命令只能在模块的顶层，不能在代码块之中（如：if语句中）,import()语句可以在代码块中实现异步动态按需动态加载

环境：浏览器或服务器环境（以后可能支持）

应用：ES6的最新语法支持规范

语法：

1、导入：import {模块名A，模块名B...} from "模块路径"
2、导出：export和export default
3、import("模块路径").then()方法

注意：export只支持对象形式导出，不支持值的导出，export default命令用于指定模块的默认输出，只支持值导出，但是只能指定一个，本质上它就是输出一个叫做default的变量或方法。

规范：

/*错误的写法*/
// 写法一
export 1;

// 写法二
var m = 1;
export m;

// 写法三
if (x === 2) {
  import MyModual from "./myModual";
}

/*正确的三种写法*/
// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

// 写法四
var n = 1;
export default n;

// 写法五
if (true) {
    import("./myModule.js")
    .then(({export1, export2}) => {
      // ...·
    });
}

// 写法六
Promise.all([
  import("./module1.js"),
  import("./module2.js"),
  import("./module3.js"),
])
.then(([module1, module2, module3]) => {
   ···
});

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92106.html

JS常见模块化规范(CommonJS/AMD/CMD/UMD/ES6 Module)

摘要：常见模块化方案是由社区提出的模块化方案中的一种，遵循了这套方案。是模块化规范中的一种，遵循了这套规范。中的模块化能力由两个命令构成和，命令用于规定模块的对外接口，命令用于输入其他模块提供的功能。为什么需要模块化在ES6出现之前，JS语言本身并没有提供模块化能力，这为开发带来了一些问题，其中最重要的两个问题应当是全局污染和依赖管理混乱。 // file a.js var name =...

walterrwu 2019-08-23 12:32 评论0 收藏0
js中的模块化——commonjs,AMD,CMD,UMD,ES6

摘要：若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。这也是目前很多插件头部的写法，就是用来兼容各种不同模块化的写法。语句输出的值是动态绑定的，绑定其所在的模块。前言历史上，js没有模块化的概念，不能把一个大工程分解成很多小模块。这对于多人开发大型，复杂的项目形成了巨大的障碍，明显降低了开发效率，java，Python有import，甚至连css都有@import,但是令人费...

qpal 2019-08-23 13:49 评论0 收藏0
JS模块化——CommonJS AMD CMD UMD ES6 Module 比较

摘要：即尽早地执行依赖模块。阮一峰输出值的引用模块是动态关联模块中的值，输出的是值得引用。的加载实现阮一峰运行时加载静态编译模块是运行时加载，模块是编译时输出接口。模块化开发优点模块化开发中，通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数，并且可以按需加载。依赖自动加载，按需加载。提高代码复用率，方便进行代码的管理，使得代码管理更加清晰、规范。减少了命名冲...

shadowbook 2019-08-26 13:40 评论0 收藏0
【JS基础】一文看懂前端模块化规范

摘要：参考资料前端模块化详解完整版入门近一万字的语法知识点补充彻底搞清楚中的和和详解前言前端的模块化之路经历了漫长的过程，想详细了解的小伙伴可以看浪里行舟大神写的前端模块化详解(完整版)，这里根据几位大佬们写的文章，将模块化规范部分做了汇总和整理，希望读完的小伙伴能有些收获，也希望觉得有用的小伙伴可以点个赞，笔芯。什么是模块将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)...

HelKyle 2019-08-23 17:09 评论0 收藏0
JS模块化编程

摘要：也就是说，外部模块输出值变了，当前模块的导入值不会发生变化。三规范的出现，使得模块化在环境中得到了施展机会。模块化这种加载称为编译时加载或者静态加载。总结的模块化规范经过了模块模式的演进，利用现在常用的打包工具，非常方便我们编写模块化代码。前言什么是模块化？模块就是实现特定功能的一组方法,而模块化是将模块的代码创造自己的作用域，只向外部暴露公开的方法和变量，而这些方法之间高度解耦...

骞讳护 2019-08-26 13:34 评论0 收藏0