Javascript 模块化简介

ES6 (ES 模块, 异步导入，用于浏览器端)

ESM 代表 ES 模块。这是 Javascript 提出的实现一个标准模块系统的方案。
示例：

js
export，const utils =，{add: function(a, b) {console. log(a + b)}
}
//，main. js文件
import { utils } from ，"./utils"
utils. add(1, 2)

它兼具两方面的优点：具有 CJS 的简单语法和 AMD 的异步
得益于 ES6 的静态模块结构，可以进行 Tree Shaking
ESM 允许像 Rollup 这样的打包器，删除不必要的代码，减少代码包可以获得更快的加载

CJS (CommonJS:同步导入模块)

示例：

// importing
const doSomething = require('./doSomething.js');
// exporting
module.exports = function doSomething(n) {
// do something
}

Node 就是使用 CJS 模块的

CJS 是同步导入模块

你可以从 node_modules 中引入一个库或者从本地目录引入一个文件。如 const myLocalModule = require(’./some/local/file.js’) 或者 var React = require(‘react’); ，都可以起作用,当 CJS 导入时，它会给你一个导入对象的副本.
CJS 不能在浏览器中工作。它必须经过转换和打包

AMD (asynchronously：异步模块定义)

示例：

//utils.js
define([],，function()，{return : {add: function(a, b) {console.log(a + b)}};
});
// main.js ，文件
require( ['./utils'],，function(utils) {utils.add(1, 2)
});

CMD（Common Module Definition：就近依赖）

示例：

//，AMD
require(['./utils','a','b'],，function(utils) {console. log(1)//还没有用到 utils ab:等模块， 但是AMD，已经初始化 了所有模块console. Log(2)utils. add(1, 2)
});//CMD
define ( function( require, exports, module){console. log(1)if(false){var : utils = require(' ./utils')://需要时再 ，require,执行就不会加载utils. add(1, 2)
})

UMD（Universal Module Definition：通用模块定义）

示例：

// utils.js文件同上
(function(root, factory) ，{
if : (typeof define === ' function' && define . amd) {/ /AMDdefine(['utils'],，factory);
} else if (typeof exports === 'object') { / /CommonJSvar utils = require( 'utils' );module. exports = factory(utils);
}else，{root. result = factory( root.utils);，}}(this,，function(utils) {utils. add(1,， 2)
}))

CommonJS 与 ES6 的区别

1.CommonJS模块输出的是一一个值的拷贝，ES6 模块输出的是值的引用

示例：

js
// utils.js，文件
var.count=0
function add(a, ，b) {console. log(a + b)count++
}
module. exports，= {add, count}// main.js :文件
var，utils = require('./utils')
utils.add(1, 2)
console. Log (utils.count) //.0

2. CommonJS模块是运行时加载，ES6 模块是编译时输出接口。

因为CommonJS加载的是一一个对象(即module.export属性) ，该对象只有在脚本运行完才会生成。
而ES6模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

Javascript 模块化简介相关推荐

javascript模块化简介
所有原创并不精彩,所有精彩并非原创历史 JavaScript 随着时间的推移所负责的责任越来越重从最开始的添加表单验证功能之类的脚本到angular 应用开发框架,随着js任务越来越重就急需模块化的 ...
javascript 模块化（一）——SeaJS
在公司写代码的时候,开头都是下面两种写法的,这是什么意思啊?不明白是什么鬼,只能照葫芦画瓢,人家怎么写我也怎么写吧,后来的后来,原来这样写是原因的.最近有个表单提交的项目,刚好有机会可以研究下,记录下 ...
JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules
随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化. 这篇文章还是希望能给大家一 ...
javascript模块化、模块加载器初探
最常见网站的javascript架构可能是这样的: 一个底层框架文件,如jQuery 一个网站业务框架文件,包含整站公用业务模块类(如弹框.ajax封装等) 多个业务文件,包含每个具体页面有关系的业务 ...
(转)Javascript模块化编程（一）：模块的写法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
Javascript模块化编程（一）：模块的写法
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
Javascript模块化编程：AMD规范
一.模块的规范先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写 ...
javascript模块化之CommonJS、AMD、CMD、UMD、ES6
javascript模块化之CommonJS.AMD.CMD.UMD.ES6 一.总结一句话总结: CommonJS是同步加载模块,用在服务端:AMD是异步加载模块,用于浏览器端 1.为什么服务器端 ...
JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...