Amaze UI JS 的三种引用方式

Minwe LUO edited this page Jul 28, 2015 · 4 revisions

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

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

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

  • 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,以实现前后端代码共享、摆脱加载器。