loader : 快速开始
一:引入加载器
直接在页面中添加标签引用:
<script src="http://style.c.aliimg.com/m/lofty/port/lofty.js"></script>
二:引入appframework基础库
直接在页面中添加标签引用:
<script src="http://style.c.aliimg.com/m/lofty/gallery/appframework/af.js"></script>
三:定义一个 AMD 模块
定义一个 AMD 模块,并保存为一个独立文件 my-module.js
define( 'lofty/lang/doc/loader/myModule',[], function( ){
var myModule = {
say:function( message ){
alert( message );
};
}
return myModule;
} );
上述模块定义等同于下面的格式:
define( 'lofty/lang/doc/loader/myModule', ['exports'], function( exports ){
exports.page = function( message ){
console.log( message );
};
} );
四:配置 lofty.config
若需异步加载各模块:设置 amd 标识为 ture,同时配置resolve规则(否则需要手工将 myModule.js 以 script 标签的方式引入页面)
lofty.config({
amd:true
})
resolve 是异步加载模块时 id 到 物理文件实际 url 的映射规则,应用可根据实际情况个性化配置(以style_search为例)
注:引用 lofty、sys、gallery目录下的组件无需再定义 resolve 规则,因为种子文件 lofty.js 中已包含了这些路径的定义。
lofty.config({
resolve: function( id ) {
var rStyle = /\.css(?:\?|$)/,
parts = id.split('/'),
root = parts[0],
type = rStyle.test( id ) ? 'css/' : 'js/';
switch ( root ){
case 'cml':
case 'plugins':
case 'plugins.others':
id = 'app/search/' + type + 'list/' + id;
break;
}
return id;
}
})
如果是简单的 Demo 页面,可直接将上述配置写在 Demo 页面中。若是应用级页面,请将这些配置项统一放在 style 根目录的 app.config.js 文件中
若无需异步加载模块:则不用设置 amd 及 resovle 规则,但是需要把页面依赖的全部 js 文件手工引入到页面中。(非推荐方式)
五:使用模块
现在想要使用 myModule 模块,可以这样做:
define(['lofty/lang/doc/loader/myModule'], function( myModule ){
myModule.say( 'hello world!' );
} );
六:模块加载调试
若希望看到 lofty 加载器加载模块的一些 log ,则可以触发 debug 状态:
触发debug状态有两种方式:
1: 在页面url加上lofty.debug=true
访问即可
2: 在代码中加入:
lofty.config({
debug: true
});