JavaScript模块化编程

文章目录

CommonJS
AMD
CMD
AMD和CMD的区别

说起模块化编程，经常会听到什么CMD、AMD、CommonJS，记录一下自己的理解，虽然自己用得不是很多。

CommonJS

NodeJS就是参照CommonJS规范实现的

// 导出
module.export math = ...
// 引入
var math = require('math');

但是存在一个问题，就是必须等模块导入了，才能继续运行。
这样就非常不适合浏览器，因为如果网速慢，就会一直等待等待，就会出现"假死"的情况。
所以就可以采用异步的方式，这个就是AMD。

AMD

AMD（“Asynchronous Module Definition”），就是“异步模块加载”，就是在引入某一个模块时，写入一个回调函数，等模块加载完成就会执行回调函数。
需要提前下载好require.js，并且在html中引入

// 引入require.js
// html内容
<div>
  <h1>Require Demo 1 -- usage of Require()</h1>
  <button id="contentBtn">Click me</button>
  <p id="messagebox"></p>
</div>
<script
  data-main="js/script/main.js"
  src="js/lib/require.min.js"
  type="text/javascript"
></script>
// 导出一个desc.js的文件
define(function() {
  return {
    decs: 'this js will be request only if it is needed'
  };
});
// 使用，一个main.js的文件
require.config({
paths: {
// 可以引入公共模块
    jquery: '../lib/jquery-3.4.1'
  }
});
require(['jquery'], function($) {
  $(document).on('click', '#contentBtn', function() {
    $('#messagebox').html('You have access Jquery by using require()');
  });
});
require(['../script/desc'], function(desc) {
  alert(JSON.stringify(desc));
});

CMD

CMD是国内发展起来的规范，我觉得和AMD很相似，AMD需要一个require.js，CMD需要一个ses.js

// 定义模块  myModule.js
define(function(require, exports, module) {
// 区别：AMD在引入其他模块，是会回调函数的一个参数，而CMD是在回调函数中引入
  var $ = require('jquery.js');
});
// 加载模块
seajs.use(['myModule.js'], function(my){});