1. 概述
js生长早期暴露了其缺点：缺少模块，厥后提出了commonJS范例来范例其模块的范例。作为JavaScript新手，发明关于其JavaScript的模块机制，不是很明白。我查阅了一些材料整理了JavaScript CommonJS的道理和机制。
2. JavaScript
2.1 无后端的项目
这类项目不能运用CommonJS的模块范例，这是我早先所犯的毛病。在没有es6被大多数浏览器支撑的时刻，js文件充溢着var和function，由此引来了定名争执和污染，使得JavaScript代码很庞杂。es6的class观点涌现有用范例了JavaScript的模块化范例。因为这类项目只能经由过程script标签引入，我们在这里讲一下script标签的相干学问。
每当浏览器剖析到<script>标签（不管内嵌照样外链）时，浏览器会优先下载、剖析并实行该标签中的javaScript代码，而壅塞了厥后一切页面内容的下载和衬着。依据上述对<script>标签特征的形貌，我们晓得，在该示例中，当浏览器剖析到<script>标签时，浏览器会住手剖析厥后的内容，而优先下载剧本文件，并实行个中的代码，这意味着，厥后的test.css款式文件和<body>标签都没法被加载，因为<body>标签没法被加载，那末页面天然就没法衬着了。因而传统做法是
假定point.js文件：
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}则在index.js中引入point.js，这须要在index.html中body的尾部
<script src="point.js"></script>
<script src="index.js"></script>如许就能够够在index.js运用point类了。
总结下来：
js类库必须在header中引入，保证对以后script引入的js文件的支撑，毕竟script标签的实行递次是递次实行，script标签引入递次和现实引入递次雷同。
自定义的script标签引入的js文件，要放在body的尾部，保证DOM元素衬着完毕。
每一个js文件只管是es6 class对象，防止作用域和定名域的争执。
2.2 后端 服务器 NodeJS
模块援用的实例以下：require要领
const math = require("math");模块的定义：
上下文供应了exports对象用于导出当前模块要领和变量，而且它是唯一的导出出口。在模块中，还存在一个module对象，他代表模块本身，exports是module对象的属性。导出体式格局：
// math.js
exports.add = function () { };
module.exports.add = function () { }; 2.3 后端 es6的module
ES6模块不是对象，而是经由过程export敕令显式指定输出的代码，输入时也采纳静态敕令的情势。
因为ES6模块是编译时加载，使得静态剖析成为可能。有了它，就能够进一步拓宽JavaScript的语法，比方引入宏（macro）和范例磨练（type system）这些只能靠静态剖析完成的功用。
除了静态加载带来的种种优点，ES6模块另有以下优点：
不再须要UMD模块花样了，将来服务器和浏览器都邑支撑ES6模块花样。现在，经由过程种种东西库，实在已做到了这一点。
将来浏览器的新API就能够用模块花样供应，不再必要做成全局变量或许navigator对象的属性。
不再须要对象作为定名空间（比方Math对象），将来这些功用能够经由过程模块供应。
浏览器运用ES6模块的语法以下：
导出对象和变量：
variables.js
var firstName = 'XXX';
var lastName = 'YYY';
export {firstName, lastName};Point.js
// 导出类对象
export default class Point extends circle {
}引入module
import Point from "Point";加载机制详见：es6 module
援用材料：
高静：js的并行加载与递次实行
