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
});

完整的示例

hello world debug