CMD 模块化介绍

CMD 全称 Common Module Definition，即通用模块定义

该规范由国内发展而来，由玉伯提出

其浏览器实现为 Sea.js

提示

Sea.js 说实话在我眼里算作早期比较疯狂且黑科技的库了

每次看到相关的文章都感觉头皮发麻

Sea.js 使用

参考快速上手

使用 seajs.config 进行配置

然后使用 seajs.use 调用入口模块

// seajs 的简单配置
seajs.config({
  base: "../sea-modules/",
  alias: {
    jquery: "jquery/jquery/1.10.1/jquery.js",
  },
});

// 加载入口模块
seajs.use("../static/hello/src/main");

其中通过 require 引入依赖，export 用来导出依赖，也可以通过 module.exports 导出模块

// 所有模块都通过 define 来定义
define(function(require, exports, module) {

  // 通过 require 引入依赖
  var $ = require('jquery');
  var Spinning = require('./spinning');

  // 通过 exports 对外提供接口
  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});

加载异步模块

使用require.async 加载完毕后使用回调函数

define(function(require, exports, module) {
  require.async(['./a', './b'], function(a, b) {
  });
});

使用方式还是很简单的，如果你看懂了说明你已经学会了本节

关于更多可以参考Sea.js 手册与文档以及提供简单、极致的模块化开发体验

拓展篇：关于Sea.js的引入原理

你可能很好奇require('jquery')这句话

为什么就可以同步执行并且拿到对应的数据

我们查阅一下资料可以找到LABjs、RequireJS、SeaJS 哪个最好用？为什么？中提到了

实际上原理是通过Function.tostring匹配出来对应的模块，然后解析模块路径，反复执行该过程，最后解析到最里层模块

全部模块依赖都加载完毕并运行后，再执行我们一开始的调用函数

其实现过程堪称疯狂，Sea.js竟然是2013年的库！

关于该部分在require 书写约定也有一些影子

要求必须使用require、不能二次赋值require、必须使用常量等等

我只能说太酷了！

确实如知乎的卢勃大佬所言、官方没顺口提到这个问题还是挺让人难受的，第一眼看的时候懵了好久

但是真的很惊艳于想出这种想法