快速上手

目录结构

本类库源代码文件结构(以“/”结尾的是文件夹):

  • doc-template/:文档模板,用于生成模块API文档。
  • example/:部分模块的使用示例。
  • lib/:本类库的所有模块。
  • bowl-debug.js:加载器(开发版本)。
  • bowl.js:加载器(生产版本)。
  • document.settings:文档生成配置,配合 Bowljs CLI 使用。
  • lib.settings:类库构建配置,配合 Bowljs CLI 使用。
  • package.settings:自定义构建配置,配合 Bowljs CLI 使用。

在实际项目中,建议按以下结构重新放置文件:

1
2
3
4
5
6
7
8
9
10
11
12
static/                 「静态文件目录」
- js/ 「普通JS」
- bowljs/ 「加载器」
- 1.1/
- bowl.js
- modjs/ 「模块化JS」
- lib 「JRaiser模块」
- app 「项目模块」
- common 「项目公共模块」
- page 「项目页面模块」
- lib.settings
- package.settings

简单使用

要使用本类库中的模块,必须先在页面中加载并配置 Bowl.js 。在「static」目录下新建「hello-world.html」,录入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="js/bowljs/1.1/bowl.js"></script>
<script>
bowljs.config({
// 指定类库目录
libPath: 'modjs/lib',
// 预加载一些处理兼容性的模块
preload: [
Function.prototype.bind ? '' : 'compatibility/es5-shim',
window.JSON ? '' : 'compatibility/json2',
window.localStorage ? '' : 'compatibility/localstorage'
],
// 开发模式
debug: true
});
</script>

接着就可以通过全局变量「require」调用类库中的模块。例如:

1
2
3
4
5
<script>
require('dom@1.1.x', function($) {
$('body').prepend('<p>Hello world</p>');
});
</script>

独立文件

在实际项目中,经常要把JS代码放到.js文件中而不是写在HTML文档内。在「static/modjs/app/page」目录下新建「hello-world-debug.js」,录入:

1
2
3
4
define(function(require) {
var $ = require('dom@1.1.x');
$('body').prepend('<p>Hello world</p>');
});

修改「hello-world.html」的内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="js/bowljs/1.1/bowl.js"></script>
<script>
bowljs.config({
libPath: 'modjs/lib',
appPath: 'modjs/app', // 配置项目目录
preload: [
Function.prototype.bind ? '' : 'compatibility/es5-shim',
window.JSON ? '' : 'compatibility/json2',
window.localStorage ? '' : 'compatibility/localstorage'
],
debug: true
});
// 加载应用目录下的 page/hello-world-debug.js
require('/page/hello-world');
</script>

这样就可以把代码放到外部.js文件了。

更多加载器配置请参阅 Bowl.js加载器配置