本文是基于
https://blog.csdn.net/howgod/article/details/87466148
该链接,自己整理巩固记忆的一篇文章,原文解释描写十分的详细贴切易懂。
一、CommonJS
概述:Node应用模块组成,每个文件就是一个模块,服务器端模块加载运行时同步的,浏览器端模块需要提前编译打包处理。
特点:1.所有代码都运行在模块作用域,不污染全局
2.模块可以多次加载,第一次运行后都是缓存,再运行必须清除缓存
3.加载顺序按照其在代码中出现的顺序
语法:暴露 module.exports=value;或exports.xxx=value;
引入 require(xxxx);
加载机制:值拷贝,一旦输出一个值,模块内部的变化就不影响该值。
服务器端实现:1装nodeJS——2.npm init 创建项目结构——3.下载第三方模块——4.定义模块代码——5.在app.js文件中引入——6.通过node运行app.js:node app.js
浏览器端实现:借助Browserify——1.创建项目结构——2.下载browserify:npm install browserify——3.定义模块代码——4.打包处理js——5.页面使用
二、ES6模块化
ES6的设计思想尽量静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS与AMD都只能在运行时确定这些东西。
语法
export 命令用于规定模块的对外接口
import 命令用于输入其他模块提供的功能
export default 为模块指定默认输出,这样important时就可以指定任意名字代替该模块
与CommonJS的差异
1.CommonJS输出是值拷贝,ES6是值引用
2.CommonJS是运行时加载,ES6是编译时输出接口
(所以我自己的项目当中,数据库连接部分(服务器端编程)用的是CommonJS,每次改动需要重新运行相关文件才能更新,而页面部分用的是ES6,修改的时候可以不需要重新运行,就能够自主更新到最新的状态)
三、AMD
定义模块:1.无依赖其他模块 define(function(){return 模块})
2.依赖其他模块 require(['module1','module2',…],function(m1,m2…){return 模块})
引入模块:require(['module1','module2',…],function(m1,m2,…){//使用模块})
使用RequireJS
RequireJS是一个工具库,用于客户端模块管理
1.下载Require.js并引入
2.创建羡慕结构
3.定义模块代码
4.页面引入require.js模块
四、CMD
该规范专门用于浏览器端,异步加载,整合了CommonJS,和AMD规范的特点
基本语法 / 定义暴露模块
1.没有依赖的
define(function(require,exports,module){exports.xxx=value;module.exports=value})
2.有依赖的
define(function(require,exports,module){
//同步
var module2=require('./module2');
//异步
require.async('./module3',function(m3){})
//暴露
exports.xxx=value
})
引入使用模块
define(function(require){
var m1=require('./module1');
var m2=require('./module2');
m1.show();
m2.show();
})
使用流程
1下载sea.js并引入
2.创建项目结构
3.定义sea.js模块代码
4.在index.html中引入
AMD与CMD区别
AMD:是RequireJS在推广过程中对模块定义提出的概念
CMD:是SeaJS在推广过程中对模块定义提出的概念
二者区别
1定位差异:RequireJS想成为浏览器端的模块加载器,同时想成为Rhino/Node端的模块加载器
SeaJS专注于WEB浏览器端
2遵循规范不同:R遵循AMD(异步模块定义),S遵循通用模块定义
3.CMD依赖就近,AMD推崇依赖前置
4.推广理念差异,R尝试让第三方库修改自身来支持R,S则不强求
5.开发调试略有差异,S注重代码开发的调试,有相关的调试插件,R无明显支持
6.插件机制不同,R猜采取的是源码中预留接口的形式,插件类型单一,S采取通用实践机制
总结
CommonJS规范主要用于服务器端编程,加载是同步的,这并不适合浏览器环境,因为同步意味着阻塞加载,因此有了AMD,CMD的解决方案。
AMD规范在浏览器中异步加载模块,AMD规范开发成本高,代码的阅读和书写较困难
CMD与AMD很相似,依赖就近延迟执行,可以很容易在node中运行
ES6完全可以取代CommonJS与AMD规范成为浏览器和服务端通用的模块解决方案。