Amaze UI JS 的三种引用方式

茴香豆的「茴」有 x 种写法，Amaze UI JS 有三种引用方式。

Amaze UI 从 2.4.0 开始，以 UMD 形式打包。

UMD 是 Universal Module Definition 的缩写，翻译成中文就是「通用模块定义」。JavaScript 社区存在三种主流的 JS 模块化形式：Global、AMD、CommonJS。

• Global：每个模块以全局对象属性的形式暴露接口，在浏览器中就是在 window 上。这种方式出现的命名冲突的，一不小心就心有灵犀地和别人取了相同的接口名。正是由于这个问题，社区才有了其他形式的模块化解决方案。
• AMD：具体定义参见规范，耳熟能详的 RequireJS 无疑是最流行的 AMD 加载器。
• CommonJS：Node.js 模块规范，随着 Browserify 等工具的流行延伸到前端。Amaze UI 也是在前端使用 CommonJS 的推崇者和实践者。

UMD 实现了一个模块同时支持三种场景。相应地，UMD 化的 Amaze UI JS 在不同的场景中引用方式略有区别。

Global

全局模式，最常规的方式，也是学习 JavaScript 时最早接触的方式，在 <script> 标签中引入 amazeui.js，然后编写自己的应用逻辑（在线演示，请打开控制台查看 log）。

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min.js"></script>
<script>
  // 编写应用逻辑（实际使用中建议放到外部 JS 文件中）
  
  console.log(AMUI); // 看 AMUI 里面都有什么东西  
  console.log(window.AMUI === jQuery.AMUI); // -> true
</script>

Amaze UI JS 在全局对象上的属性名称为 AMUI，如上面的代码所示，window.AMUI === jQuery.AMUI，在没有使用 UMD 打包以前，Amaze UI JS 通过 jQuery.AMUI 暴露接口。为了向下兼容，UMD 化以后任然保留了 jQuery 上的属性。

AMD

使用 Browserify 打包的时候还有点小问题，定义 AMD 模块的时候没有把 jQuery 注册为依赖，所以需要在 shim 中配置，以保证 jQuery 在 Amaze UI JS 之前加载。

在线演示，请打开控制台查看 log。

<script src="http://cdn.amazeui.org/require.js/2.1.16/require.js"></script>
<script>
  requirejs.config({
    paths: {
      '$': 'http://code.jquery.com/jquery-2.1.4.min',
      'amui': 'http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min'
    },
    shim: {
      'amui': ['$']
    }
  });

  require(['amui'], function(AMUI) {
    $('body').append('<p>Amaze UI loaded by RequireJS.</p>')
    console.log(AMUI);
  });
</script>

随着浏览器端 CommonJS 的流行，个人不再推荐继续使用 AMD，你不觉得引入一个额外的加载器然后写一堆配置很烦么？还有那个什么 SystemJS，不知道冒出干嘛。

CommonJS

首先安装 jQuery、Amaze UI 并保存依赖：

npm install jquery amazeui --save

使用 Amaze UI：

var $ = require('jquery');
var AMUI = require('amazeui');

关于以 CommonJS 形式使用 Amaze UI 的更多细节参见 Amaze UI 入门套件，这里不再赘述。

小结

随着 ES2015 规范发布，传统的模块化方式将逐步退出历史舞台。虽然编译工具提供输出 AMD 模块的功能，但个人还是建议使用 CommonJS，以实现前后端代码共享、摆脱加载器。