先看个例子吧¶

新建一个文件，把以下代码复制进去，然后用浏览器打开：

<style>
.target{width:50px;height:50px;border-radius:25px;background:#000;transition:All 1s ease;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;}
</style>
<script charset="utf-8" id="seajsnode"src="http://static.alipayobjects.com/seajs/??seajs/2.2.2/sea.js,seajs-combo/1.0.1/seajs-combo.js,seajs-style/1.0.2/seajs-style.js"></script>
<script>
  seajs.config({
    base: 'http://static.alipayobjects.com',
    alias: {
      'jquery': 'jquery/1.7.2/jquery',
      'position': 'position/1.1.0/index'
    }
  });
  seajs.use(['jquery', 'position'], function($, Position){
    var stop = false;
    var target = $('<div class="target"></div>')
      .hover(function(){stop = true;},function(){stop = false;})
      .appendTo(document.body);
    setInterval(function() {
      if (stop) return;
      var x = Math.floor(Math.random() * 100);
      var y = Math.floor(Math.random() * 100);
      Position.pin(
        { element: target, x: 'center', y: 'center' }, 
        { element: Position.VIEWPORT, x: x + '%', y: y + '%' }
      );
    }, 800);
  });
</script>

看到有个球在飞来飞去么，你能抓到他么？线上演示

使用 SeaJS¶

看过 Arale 的简介，大家已经知道 Arale 是基于 Sea.js 和 spm 开发的，所以使用 Arale 之前要先引入 Sea.js，它是一个模块加载器，会异步请求需要的模块。

然后需要通过 seajs.config 来全局配置下 jQuery 的别名 jquery，这样可以统一控制 jQuery 的版本号。

'jquery': 'jquery/1.7.2/jquery',

在这个例子里，使用了 jquery 和 position 两个模块。大家可能会注意到 seajs.config 的配置，是的，这就是 Arale 模块的 ID，通过这个 ID 可以找到这个模块。

比如模块 position 的完整路径就是：

http://static.alipayobjects.com/position/1.1.0/index.js

Arale 的 ID 由四部分组成：{{module}}/{{version}}/{{file}}

• module 为模块的名字（即 http://spmjs.io 上的模块名称）
• version 为版本
• file 为具体的文件，可以有多个，一般为模块 package.json 的 spm.main 属性。

这个 ID 和 seajs 的所在路径拼合后就是模块文件的具体地址了。当你拿到上面的 ID 后，就可以直接用 seajs.use 来使用这个模块了。

seajs.use(['position/1.1.0/index'], function(Position) {
  // use Position ...
});

当然老这么写全 ID 会比较麻烦，这时你可以用 seajs.config 中的 alias 属性来统一配置别名（像最开始的代码里那样做）。

这样就可以直接 seajs.use(['position']) 了，请求完成后会调用回调函数，这时就可以使用这两个模块了。

Standalone¶

上述是使用支付宝 cdn 来调用 Arale 模块的方式，在 spm3 之后，我们推荐直接使用 standalone 的方式来构建和使用 Arale 模块。

您可以参考文档：https://github.com/spmjs/docs/blob/master/project/get-started.md

使用 standalone 的方式会让业务模块的构建部署更加简单高效，独立解耦。而且不仅可以调用 Arale 模块，也可以直接使用 spmjs.io 上的大量业界模块。

查找模块¶

Arale 是一个基础类库，有自己开发的模块，也有精心挑选由外部引入的模块，那如何找到这些模块呢？

在 Arale 首页 能找到这些模块，或者使用 spmjs.io 的搜索框搜索你需要的模块。

Arale 使用了最优秀的业界模块，比如负责操作 Dom 和 Ajax 的 jQuery，负责时间日期的 Moment，本地存储 Store 等。如果你发现了优秀的业界模块不在其中，请告诉我们。

Arale 拥有丰富实用的基础前端模块，比如负责表单校验的 Validator ，负责区块切换的 Switchable ，负责定位元素的 Positioin。 如果你需要用到浮层类的模块，你可以试试基础浮层 Overlay、负责浮层触发逻辑的 Popup、日历模块 Calendar、自动完成 Autocomplete 等等。

才刚刚开始¶

现在你已经可以在你的博客、网站等各种地方使用 Arale 了，如果你有更复杂的需求可以继续跟着我们学习如何写模块。如果有任何问题，欢迎提问。