组件开发须知

组件之间的调用

假设你开发 Dialog 组件，需要调用 Position 组件提供的功能，这时只要在代码里：

/* dialog.js */
define(function(require, exports, module) {
    var position = require('position'); // 用 require 引入就好
    ...
});

如果 require(xxx) 有问题，请查看 tools/seajs-and-its-friends.js 文件里是否有配置 xxx 的 alias.

example 文件模板

对于 UI 相关的组件，为了开发方便，一般至少需要创建一个 example 文件。以 examples/position.html 为例：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Position Example</title>
<script src="../../../tools/seajs-and-its-friends.js"></script>
</head>
<body>
...
<script>
seajs.use('../src/position', function(position) {
    // test code
});
</script>
</body>
</html>

请根据组件的实际情况来组织。参考页面：http://aralejs.org/position/examples/index.html

tests/runner.html 模板

这个文件是固定的，需要时，复制一份过去就好。文件内容为：

<!doctype html>
<html>
<head>
<title>Jasmine Spec Runner</title>
<script src="../../../tools/seajs-and-its-friends.js"></script>
<script src="../../../tools/jasmine-runner.js"></script>
</head>
<body>
</body>
</html>

要让 runner.html 正常运行，需要注意以下几点：

必须通过 http 方式访问，不支持 file:///.
tests 目录下，按照 module-spec.js 的方式组织代码。
如果有多个 spec 文件，请在入口 spec 文件里，require 其他文件即可。

打包发布自己负责的模块

开发好一个模块后，要提供给他人调用前，需要进行打包操作：

$ cd arale
$ node tools/dist.js overlay

上面的代码就会将 overlay 模块的源码进行依赖分析和压缩合并，最后生成到以下目录：

dist/overlay/x.y.z/

如果是第一次打包，或版本有更新，还得编辑 tools/seajs-and-its-friends.js，将模块名添加下别名。

依旧有困惑

请联系玉伯。

Provide feedback

Saved searches