bui.loader Class
模块加载器
模块加载器, 默认已经初始化给 window.loader, 无需再次初始化.
可以直接调用 loader.define, loader.require 或者 loader.map 等方法
主要配合 router 的单页模块加载.
预览地址: demo
方法说明:
define: 模块定义require: 加载模块脚本
map: 模块声明,基本路径配置
import: 加载动态脚本资源及CSS资源
checkLoad: 检查是否所有模块都已经实例化
get: 获取模块信息
set: 设置模块信息
global: 1.6.2 新增定义全局方法供模块内部调用,避免编译找不到全局变量
1.6.x 新增 load: 加载组件到一个容器里
delay: 加载component上有delay属性的标签,只加载一次
component: 解析component标签
components: 解析容器下的所有component标签
view: 解析view标签
views: 解析容器下的所有view标签
Constructor
bui.loader
-
[option]
Parameters:
-
[option]Object optional-
cacheBoolean[默认: true, 浏览器缓存脚本 | false, 不缓存 ]
-
scriptSuffixBoolean[默认: ".js", 一般无需更改 ]
-
needNativeBoolean[ 1.6.0新增, 请求是否使用设备原生方法, 默认: false | true ]
-
deepComponentBoolean[1.6.0新增, 编译 component 标签时, 是否继续编译内部的component标签, 默认: true | false ]
-
Example:
// 默认已经初始化,无需再次初始化, 如果要修改,应该在 window.router 前面.
window.loader = bui.loader();
Item Index
Methods
Methods
checkLoad
-
[option]
检测模块名的加载状态,加载完成,该模块会有一个export对象,就是callback的回调
Parameters:
-
[option]Object optional-
[modules]Array optional模块名称, 如果不传,则检测所有加载的模块
-
Returns:
[ 全部创建完成以后会返回 true ]
Example:
例子1: 检测所有模块是否都加载完毕
var bool = loader.checkLoad(["main"]);
console.log(bool)
component
-
id -
[loaded] -
[compiled]
1.6.0新增, 编译页面 component标签, 默认路由跳转的时候就会编译, 一般无需手动处理
Parameters:
-
idString | Object[ component 本身id ]
-
[loaded]Function optional每次编译完一个commponent执行
-
[compiled]Function optional编译完同级1个或多个commponent后执行,存在嵌套则会多次执行
Example:
例子1:
html:
<component id="slide" name="pages/components/slide/index"></component>
js:
loader.component({
id:"#slide"
});
components
-
id -
param -
[beforeLoad] -
[loaded] -
[compiled]
1.6.0新增, 编译容器下的 所有component标签 一般无需使用, router(默认needComponent:true), store(默认needComponent:false), page(默认needComponent:false)
Parameters:
-
idString | Object[ 哪个容器下的 ]
-
paramObject[ 动态传参 1.6.2新增, 同名会覆盖属性上的参数 ]
-
[beforeLoad]Function optional每次模块加载前执行
-
[loaded]Function optional每次编译完一个commponent执行
-
[compiled]Function optional编译完同级1个或多个commponent后执行,存在嵌套则会多次执行
Example:
例子1:
html:
<div id="coms">
<component name="pages/components/slide/index"></component>
<component name="pages/components/list/index"></component>
</div>
js:
loader.components({
id:"#coms"
});
define
-
[moduleName] -
[depend] -
callback
define是bui.loader实例的一个方法,用于定义模块, 1.5.3新增定义页面的生命周期
一个js对应一个 define ,可以定义一个匿名的模块,或者自定义依赖的模块,用法跟requirejs类似,
自定义模块名以后,需要用map声明该模块的script属性,或者callback方法
Parameters:
-
[moduleName]String | Object optional模块的自定义名称,可以省略, 如果是定义该模块的生命周期,参考例子5. 1.5.3新增.
-
[depend]Array optional模块的依赖模块,可以省略, 模块名不含.js
-
callbackFunction[注册回调,如果有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"
})
例子5: 1.5.3新增 定义页面的生命周期
loader.define({
moduleName: "", // 是否是自定义的模块名, 没有则不要这个参数
depend: [], // 是否有依赖的模块, 没有则不要这个参数
beforeCreate: function(){
// 只在第一次创建的时候执行
console.log("beforeCreate")
},
created: function(){
// 只在第一次创建的时候执行
console.log("beforeCreate")
},
beforeLoad: function(){
// 每次跳转前执行, 注意:这里return false 并不能阻止页面跳转及执行, 如果要阻止应该在 bui.load({beforeLoad:function(){ return false; }})
console.log("beforeCreate")
},
loaded: function(require,export,module){
// 每次跳转时执行, loader.require 要加载当前模块,需要在这里抛出方法.
console.log("loaded")
},
show: function(e){
// 每次跳转,后退后执行
console.log(e.type ,"show")
},
hide: function(){
// 每次跳转,后退后执行上一个页面的hide
console.log("hide")
},
beforeDestroy: function(){
// 每次后退前执行
console.log("beforeDestroy")
},
destroyed: function(){
// 每次后退后执行
console.log("destroyed")
}
})
delay
-
id -
[param] -
[everytime] -
[loaded] -
[compiled]
加载之前延迟加载的组件
Parameters:
-
idString | Object[ 哪个容器下的 ]
-
[param]Object optional动态传参 1.6.2新增, 同名会覆盖属性上的参数
-
[everytime]Boolean optional1.6.2新增 是否每次都执行, 默认 false | true
-
[loaded]Function optional每次编译完一个commponent执行,存在嵌套则会多次执行
-
[compiled]Function optional编译完同级1个或多个commponent后执行,存在嵌套则会多次执行
Example:
例子1:
html:
<component id="delayCom" name="pages/components/slide/index" delay="true"></component>
js:
loader.delay({
id:"#delayCom",
});
destroy
-
[option]
销毁一个模块
Parameters:
-
[option]Object optional-
[name]String optional模块的自定义名称,可以省略,自定义模块名以后,需要用map声明该模块的script属性,或者callback方法
-
[depend]Array optional模块的依赖模块,可以省略, 模块名不含.js
-
callbackFunction[注册回调,如果有return值, 可以抛出给其它模块调用 ]
-
Returns:
[ 返回值用于公共使用 ]
Example:
get
-
name
获取模块
Parameters:
-
nameString[通过模块名称,获取模块信息]
Returns:
[description]
Example:
var main = loader.get("main")global
-
callback
定义公共全局方法
Parameters:
-
callbackFunction | Object[定义一个回调方法,返回一个对象, 或者直接使用返回对象的方式 ]
Returns:
[只能返回一个对象]
Example:
1. 定义 // common.js 使用这个方法构建全局方法, 最简单也可以直接返回一个对象loader.global({test:function(){}})
loader.global(function(global){
// global: 为上次执行的依赖
// 返回一个对象
return {
test: function(){
console.log("test");
},
test2: function(){
console.log("test2");
}
}
})
// 2. 推荐: 局部调用
loader.define(function(require,export,module,global){
global.test();
})
1.6.3 全局调用:
loader.global().test();
import
-
[option]
动态加载脚本资源,或者css资源,1.5.2 新增html的加载
Parameters:
-
[option]Object optional-
[src]String | Array optionalhtml,脚本或者样式路径,也可以是数组
-
[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){
// 创建成功以后执行回调
});
例子4: 1.5.2新增, 动态加载模板,回调每次都执行, 如果放在 loader.require 里面执行,则默认只初始化一次;
loader.import("pages/ui/list.html",function(res){
// 拿到模板信息
$("#id").html(res);
});
importCss
-
[url] -
[id] -
[id]
动态加载带id的css, 可以用来更换皮肤
Parameters:
-
[url]String optionallink的地址
-
[id]String optional创建的id
-
[id]String optional创建的id
Returns:
[ promise ]
Example:
例子1:
// 引入新皮肤
loader.importCss("css/bui-skin.css","deepskin");
// 删除新皮肤
$("#deepskin").remove();
importHtml
-
[option]
动态加载html
Parameters:
-
[option]Object optional-
[url]String optionalhtml地址
-
[successCallback]Function optional请求成功以后执行
-
[failCallback]Function optional请求失败以后执行
-
Returns:
[ promise ]
Example:
例子1:
loader.importHtml("pages/ui/list.html",function(res){
// 拿到模板信息
$("#id").html(res);
});
importSync
-
[option]
按先后顺序同步处理加载资源
Parameters:
-
[option]Object optional-
[url]String | Array optional数组才有先后顺序, 多次调用 importSync 无法确定哪个先加载.
-
[successCallback]Function optional请求成功以后执行
-
[failCallback]Function optional请求失败以后执行
-
Returns:
[ promise ]
Example:
例子1:
loader.importHtml(["pages/ui/list.html","pages/ui/list1.html"],function(res){
// 拿到模板信息
$("#id").html(res[0]);
$("#id2").html(res[1]);
});
load
-
[option]
1.6.0 新增, 页面加载, require加载脚本, load 加载模板跟执行脚本, 每次调用都执行一次
Parameters:
-
[option]Object optional-
idString | Object[ 模板需要加载到哪个容器下 ]
-
urlString[ 一般是页面的路径,或者模块名 ]
-
paramObject[ 传参给组件, 可以这样传 { id:"111"} ]
-
[script]String optional可选,如果模板跟模块如果是分离的,则需要指明模块的路径,建议一般使用同名规范.
-
[beforeLoad]Function optional加载前的回调, return false 则不执行
-
[loaded]Function optional加载成功以后的回调
-
Example:
例子1:
html:
<div id="tab1"></div>
js: 把模板加载进来并执行模块脚本
loader.load({
id:"#tab1",
url:"pages/main/home.html"
});
map
-
[option]
设置或者获取模块之间的依赖关系
如果define了一个自定义名称的模块,则需要在首页用map方法,声明该模块的script或callback属性
Parameters:
-
[option]Object optional-
[baseUrl]String optional默认:"" 脚本资源的公共路径
-
[modules]Object optional默认:{} 模块的配置存放在modules对象中
-
[main]Object optional默认:{} router路由默认定义了一个main模块 -
main.moduleNameString[默认:"main" 当前模块的名称等于父级名 ] -
main.templateString[默认:"" 模板名称,用于路由的模板加载 ] -
main.scriptString[默认:"" 当前模块的加载脚本 ] -
[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-
dependArray | String[模块的依赖模块,可以是数组或者模块名 ]
-
callbackFunction[加载模块成功以后,执行回调 ]
-
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)
})
set
-
name -
value
设置模块
Parameters:
-
nameString[ 模块名 ]
-
valueObject[ 模块的路径 {template:"",script:""}]
Example:
// 修改首页为登录页, 需要在window.router 后面
loader.set("main",{
template: "pages/login/login.html",
script: "pages/login/login.html"
})syncLoad
-
id -
[url] -
[param] -
[beforeLoad] -
[loaded]
同步加载
Parameters:
-
idString | Object[ 哪个容器下的,通过id，返回一个对象，通过样式名，返回一个数组，看例子 ]
-
[url]String optional可选，如果component标签属性有name值，可以不传
-
[param]Object optional传参给组件
-
[beforeLoad]Function optional每次编译commponent前执行， return false 则不执行
-
[loaded]Function optional每次编译commponent后执行
Example:
例子1:
html:
<component id="delayCom" name="pages/components/slide/index" delay="true"></component>
<component id="delayCom1" class="delay" name="pages/components/slide/index" delay="true"></component>
<component id="delayCom2" class="delay" name="pages/components/slide/index" delay="true"></component>
js:
// 同步编译组件，这样在传
const loadall = async function(){
// 通过id编译1个，comp为返回的实例
const comp = await loader.syncLoad({
id:"#delayCom",
param: {
data: []
} // 传参给组件
})
console.log(comp) // delayCom 的实例
// 通过样式名编译多个
const [comp1,comp2] = await loader.syncLoad({
id:".delay",
})
console.log(comp1)// delayCom1 的实例
console.log(comp2)// delayCom2 的实例
}
loadall();
view
-
id -
[loaded] -
[compiled]
1.6.0新增, 编译页面 view标签, 把模板加载进来, 默认只编译一次,一般不需要调用, view标签主要配合 bui.store 的mixins而来, 自带解析view标签
Parameters:
-
idString | Object[ view标签本身 ]
-
[loaded]Function optional每次编译完commponent执行
-
[compiled]Function optional编译完同级commponent执行,存在嵌套则会多次执行
Example:
例子:
html:
<view id="views" name="pages/views/slide/index"></view>
js:
loader.view({
id:"#views"
});
views
-
id -
[loaded] -
[compiled]
1.6.0新增, 编译容器下的 多个view标签, 一般无需使用, router(默认needView:false), store(默认needView:true), page(默认needView:false)
Parameters:
-
idString | Object[ 哪个容器下的 ]
-
[loaded]Function optional每次编译完一个commponent执行
-
[compiled]Function optional编译完同级1个或多个commponent后执行,存在嵌套则会多次执行
Example:
例子:
html:
<div id="views">
<view name="pages/views/slide/index"></view>
<view name="pages/views/list/index"></view>
</div>
js:
loader.views({
id:"#views"
});
Events
off
为控件取消绑定事件
Event Payload:
-
[type]String optional关闭订阅事件 例如: success
-
[callback]Function optional监听事件以后执行
Example:
loader.off("success");
on
为模块绑定事件,比方依赖的模块是异步的,这个时候可以监听该数据请求结束以后再执行.
Event Payload:
-
[type]String optional关闭订阅事件 例如: success
-
[callback]Function optional监听事件以后执行
Example:
loader.on("success",function () {
// 点击的菜单
console.log(this);
});
one
只绑定一次事件
Event Payload:
-
[type]String optional关闭订阅事件 例如: success
-
[callback]Function optional监听事件以后执行
Example:
loader.one("success",function () {
// 点击的菜单
console.log(this);
});
trigger
触发自定义事件, 名称不能跟component 的id相同. componet id 内部会自动触发
Event Payload:
-
[type]String optional自定义事件, 例如: "success"
-
[args]String optional传过去的参数,可以有多个
Example:
loader.trigger("success")
wait
在父层获取子组件的处理, 等待多个模块完成后触发一次
Event Payload:
-
[type]Array optional组件的id
-
[callback]Function optional监听事件以后执行
Example:
<component id="list" name="pages/components/list"></component>
// 等等list编译完成触发
loader.wait(["list"],function (list) {
// list 组件的实例
console.log(list.exports);
});
waited
在父层获取子组件的处理, 等待多个模块完成后触发一次
Event Payload:
-
[type]Array optional组件的id
-
[callback]Function optional监听事件以后执行
Example:
<component id="list" name="pages/components/list"></component>
// 等等list编译完成触发
loader.waited(["list"],function (list) {
// list 组件的实例
console.log(list);
});