bui.loader Class
模块加载器
模块加载器, 默认已经初始化给 window.loader, 无需再次初始化.
可以直接调用 loader.define, loader.require 或者 loader.map 等方法
主要配合 router 的单页模块加载.
预览地址: demo
方法说明:
define: 模块定义require: 加载模块
map: 模块声明,基本路径配置
import: 加载动态脚本资源及CSS资源
checkLoad: 检查是否所有模块都已经实例化
Constructor
bui.loader
-
[option]
Parameters:
-
[option]
Object optional-
cache
Boolean[默认: true, 浏览器缓存脚本 | false, 不缓存 ]
-
scriptSuffix
Boolean[默认: ".js", 一般无需更改 ]
-
Example:
// 默认已经初始化,无需再次初始化 window.loader = bui.loader();
Methods
checkLoad
-
[option]
检测模块的加载状态,加载完成,该模块会有一个export对象,就是callback的回调
Parameters:
-
[option]
Object optional-
[modules]
Array optional[ 模块名称, 如果不传,则检测所有加载的模块 ]
-
Returns:
[ 全部创建完成以后会返回 true ]
Example:
例子1: 检测所有模块是否都加载完毕
var bool = loader.checkLoad(["main"]);
console.log(bool)
define
-
[option]
define是bui.loader实例的一个方法,用于定义模块
一个js对应一个 define ,可以定义一个匿名的模块,或者自定义依赖的模块,用法跟requirejs类似,
自定义模块名以后,需要用map声明该模块的script属性,或者callback方法
Parameters:
-
[option]
Object optional-
[name]
String optional[模块的自定义名称,可以省略,自定义模块名以后,需要用map声明该模块的script属性,或者callback方法 ]
-
[depend]
Array optional[模块的依赖模块,可以省略, 模块名不含.js ]
-
callback
Function[注册回调,如果有return值, 可以抛出给其它模块调用 ]
-
Returns:
[ 返回值用于公共使用 ]
Example:
例子1: 注册首页的回调 pages/main/main.js
提示: pages/main/main.js 文件, 定义了一个匿名模块,匿名模块的模块名取.js前面的路径名,确保唯一
// 最简单的匿名定义 loader.define
loader.define(function(require,exports,module){
// require : 相当于 loader.require, 获取依赖的模块
// module : 拿到当前模块信息
// 可以通过 return 把希望给其它页面调用的方法抛出来
return {
}
})
例子2: 直接定义返回的对象, 模块名同样是路径名
loader.define({
test: "console"
})
例子3: 定义模块的依赖,如果模块未定义固定名称,则路径.html前面是默认的模块名称
// require,exports,module 在依赖后面顺序下来,不是必须
// 当前模块依赖于page2
loader.define(["pages/page2/page2"],function(page2,require,exports,module){
// 拿到依赖的模块,取名为page2
console.log(page2)
// 可以通过 return 把希望给其它页面调用的方法抛出来
return {
}
})
例子4: 定义一个自定义名称的模块
// 当前模块名为 page2 , 则别的模块要依赖page2的时候,使用自定义的名称
loader.define("page2",function(){
// 可以通过 return 把希望给其它页面调用的方法抛出来
return {
}
})
// 需要在index.html 路由初始化前,先声明该模块的脚本,或者回调
loader.map({
moduleName: "page2",
template: "pages/page2/page2.html",
script: "pages/page2/page2.js"
})
// 如果是回调,则不用加载脚本
loader.map({
moduleName: "page2",
template: "pages/page2/page2.html",
callback: function(){
// 这里写业务逻辑
}
})
import
-
[option]
动态加载脚本资源,或者css资源
Parameters:
-
[option]
Object optional-
[src]
String | Array optional[ 脚本或者样式路径,可以是数组 ]
-
[successCallback]
Function optional[ 加载成功以后执行,如果是数组,只在最后一个执行 ]
-
Returns:
[ 全部创建完成以后会返回 true ]
Example:
例子1: 动态加载单个样式
loader.import("main.css",function(src){
// 创建成功以后执行回调
});
例子2: 动态加载单个脚本
loader.import("main.js",function(src){
// 创建成功以后执行回调
});
例子3: 动态加载多个脚本
loader.import(["js/plugins/baiduTemplate.js","js/plugins/map.js"],function(src){
// 创建成功以后执行回调
});
map
-
[option]
设置或者获取模块之间的依赖关系
如果define了一个自定义名称的模块,则需要在首页用map方法,声明该模块的script或callback属性
Parameters:
-
[option]
Object optional-
[baseUrl]
String optional[默认:"" 脚本资源的公共路径 ]
-
[modules]
Object optional[默认:{} 模块的配置存放在modules对象中 ]
-
[main]
Object optional[默认:{} router路由默认定义了一个main模块 ] -
main.moduleName
String[默认:"main" 当前模块的名称等于父级名 ] -
main.template
String[默认:"" 模板名称,用于路由的模板加载 ] -
main.script
String[默认:"" 当前模块的加载脚本 ] -
[main.callback]
Function optional[默认:null 执行的回调,如果存在,则无需加载script ] -
[main.style]
Array optional[默认:[] 加载模块的样式资源,也可以使用load方法单独加载] -
[main.depend]
Array optional[默认:[] 模块的依赖名,如果define时没有声明名称,则依赖名为该脚本的路径去掉.js ]
-
-
Example:
例子1: 获取所有模块的配置信息
var map = loader.map();
例子2: 声明单个模块;
loader.map({
moduleName: "main",
template: "pages/main/main.html",
script: "pages/main/main.js"
})
例子3: 定义多个模块,并修改路径
loader.map({
baseUrl: "",
modules: {
// 自定义模块名
"main": {
moduleName: "main",
template: "pages/main/main.html",
script: "pages/main/main.js"
}
}
})
require
-
[option]
获取依赖的实例,异步,在同一次依赖加载里面,如果该实例已经重复初始化,不会重复执行.
Parameters:
-
[option]
Object optional-
depend
Array | String[模块的依赖模块,可以是数组或者模块名 ]
-
callback
Function[加载模块成功以后,执行回调 ]
-
Returns:
[ loader ]
Example:
例子1: 加载单个模块
loader.require("main",function (main) {
console.log(main)
})
例子2: 加载多个模块
loader.require(["main","page2"],function (main,page2) {
console.log(main)
console.log(page2)
})