BUI

其它版本:

API for BUI 1.6.x

Show:

bui.loader Class

Module: Core

Available since 1.4.0

模块加载器

模块加载器, 默认已经初始化给 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]
)

Defined in src/scripts/core/bui.loader.js:10

Available since 1.4.0

Parameters:

  • [option] Object optional
    • cache Boolean

      [默认: true, 浏览器缓存脚本 | false, 不缓存 ]

    • scriptSuffix Boolean

      [默认: ".js", 一般无需更改 ]

    • needNative Boolean

      [ 1.6.0新增, 请求是否使用设备原生方法, 默认: false | true ]

    • deepComponent Boolean

      [1.6.0新增, 编译 component 标签时, 是否继续编译内部的component标签, 默认: true | false ]

Example:

   // 默认已经初始化,无需再次初始化, 如果要修改,应该在 window.router 前面.
                                   window.loader = bui.loader();
                                

Methods

checkLoad

(
  • [option]
)
Boolean

检测模块名的加载状态,加载完成,该模块会有一个export对象,就是callback的回调

Parameters:

  • [option] Object optional
    • [modules] [ 模块名称, 如果不传,则检测所有加载的模块] Array optional

Returns:

Boolean:

[ 全部创建完成以后会返回 true ]

Example:

       例子1: 检测所有模块是否都加载完毕
                                            
                                                   var bool = loader.checkLoad(["main"]);
                                                   console.log(bool)
                                            

component

(
  • id
  • [loaded] [ 每次编译完一个commponent执行]
  • [compiled] [ 编译完同级1个或多个commponent后执行,存在嵌套则会多次执行]
)

Defined in src/scripts/core/bui.loader.js:1390

Available since 1.6.0

1.6.0新增, 编译页面 component标签, 默认路由跳转的时候就会编译, 一般无需手动处理

Parameters:

  • id String | Object

    [ component 本身id ]

  • [loaded] [ 每次编译完一个commponent执行] Function optional
  • [compiled] [ 编译完同级1个或多个commponent后执行,存在嵌套则会多次执行] Function optional

Example:

       例子1: 
                                            
                                                   html: 
                                                   <component id="slide" name="pages/components/slide/index"></component>
                                            
                                                   js: 
                                                   loader.component({
                                                       id:"#slide"
                                                   });
                                            

components

(
  • id
  • param
  • [beforeLoad] [ 每次模块加载前执行]
  • [loaded] [ 每次编译完一个commponent执行]
  • [compiled] [ 编译完同级1个或多个commponent后执行,存在嵌套则会多次执行]
)

Defined in src/scripts/core/bui.loader.js:1610

Available since 1.6.0

1.6.0新增, 编译容器下的 所有component标签 一般无需使用, router(默认needComponent:true), store(默认needComponent:false), page(默认needComponent:false)

Parameters:

  • id String | Object

    [ 哪个容器下的 ]

  • param Object

    [ 动态传参 1.6.2新增, 同名会覆盖属性上的参数 ]

  • [beforeLoad] [ 每次模块加载前执行] Function optional
  • [loaded] [ 每次编译完一个commponent执行] Function optional
  • [compiled] [ 编译完同级1个或多个commponent后执行,存在嵌套则会多次执行] Function optional

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] [模块的自定义名称,可以省略, 如果是定义该模块的生命周期,参考例子5. 1.5.3新增.]
  • [depend] [模块的依赖模块,可以省略, 模块名不含.js]
  • callback
)
Object

define是bui.loader实例的一个方法,用于定义模块, 1.5.3新增定义页面的生命周期

一个js对应一个 define ,可以定义一个匿名的模块,或者自定义依赖的模块,用法跟requirejs类似,

自定义模块名以后,需要用map声明该模块的script属性,或者callback方法

Parameters:

  • [moduleName] [模块的自定义名称,可以省略, 如果是定义该模块的生命周期,参考例子5. 1.5.3新增.] String | Object optional
  • [depend] [模块的依赖模块,可以省略, 模块名不含.js] Array optional
  • callback Function

    [注册回调,如果有return值, 可以抛出给其它模块调用 ]

Returns:

Object:

[ 返回值用于公共使用 ]

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] [ 动态传参 1.6.2新增, 同名会覆盖属性上的参数]
  • [everytime] [ 1.6.2新增 是否每次都执行, 默认 false | true]
  • [loaded] [ 每次编译完一个commponent执行,存在嵌套则会多次执行]
  • [compiled] [ 编译完同级1个或多个commponent后执行,存在嵌套则会多次执行]
)

Defined in src/scripts/core/bui.loader.js:1697

Available since 1.6.0

加载之前延迟加载的组件

Parameters:

  • id String | Object

    [ 哪个容器下的 ]

  • [param] [ 动态传参 1.6.2新增, 同名会覆盖属性上的参数] Object optional
  • [everytime] [ 1.6.2新增 是否每次都执行, 默认 false | true] Boolean optional
  • [loaded] [ 每次编译完一个commponent执行,存在嵌套则会多次执行] Function optional
  • [compiled] [ 编译完同级1个或多个commponent后执行,存在嵌套则会多次执行] Function optional

Example:

       例子1: 
                                            
                                                   html: 
                                                   <component id="delayCom" name="pages/components/slide/index" delay="true"></component>
                                                   
                                                   js: 
                                                   loader.delay({
                                                       id:"#delayCom",
                                                   });
                                            

destroy

(
  • [option]
)
Object

销毁一个模块

Parameters:

  • [option] Object optional
    • [name] [模块的自定义名称,可以省略,自定义模块名以后,需要用map声明该模块的script属性,或者callback方法] String optional
    • [depend] [模块的依赖模块,可以省略, 模块名不含.js] Array optional
    • callback Function

      [注册回调,如果有return值, 可以抛出给其它模块调用 ]

Returns:

Object:

[ 返回值用于公共使用 ]

Example:

get

(
  • name
)
Object

获取模块

Parameters:

  • name String

    [通过模块名称,获取模块信息]

Returns:

Object:

[description]

Example:

       var main = loader.get("main")

global

(
  • callback
)
Object

Defined in src/scripts/core/bui.loader.js:216

Available since 1.6.2

定义公共全局方法

Parameters:

  • callback Function | Object

    [定义一个回调方法,返回一个对象, 或者直接使用返回对象的方式 ]

Returns:

Object:

[只能返回一个对象]

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]
)
Boolean

动态加载脚本资源,或者css资源,1.5.2 新增html的加载

Parameters:

  • [option] Object optional
    • [src] [ html,脚本或者样式路径,也可以是数组] String | Array optional
    • [successCallback] [ 加载成功以后执行,如果是数组,只在最后一个执行] Function optional

Returns:

Boolean:

[ 全部创建完成以后会返回 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] [ link的地址]
  • [id] [ 创建的id]
  • [id] [ 创建的id]
)
Object

Defined in src/scripts/core/bui.loader.js:2380

Available since 1.6.2

动态加载带id的css, 可以用来更换皮肤

Parameters:

  • [url] [ link的地址] String optional
  • [id] [ 创建的id] String optional
  • [id] [ 创建的id] String optional

Returns:

Object:

[ promise ]

Example:

       例子1: 
                                                   // 引入新皮肤
                                                   loader.importCss("css/bui-skin.css","deepskin");
                                                   // 删除新皮肤
                                                   $("#deepskin").remove();
                                            

importHtml

(
  • [option]
)
Object

Defined in src/scripts/core/bui.loader.js:2187

Available since 1.6.0

动态加载html

Parameters:

  • [option] Object optional
    • [url] [ html地址] String optional
    • [successCallback] [ 请求成功以后执行] Function optional
    • [failCallback] [ 请求失败以后执行] Function optional

Returns:

Object:

[ promise ]

Example:

       例子1: 
                                            
                                                   loader.importHtml("pages/ui/list.html",function(res){
                                                     // 拿到模板信息
                                                     $("#id").html(res);
                                                   });
                                            

importSync

(
  • [option]
)
Object

Defined in src/scripts/core/bui.loader.js:2120

Available since 1.6.0

按先后顺序同步处理加载资源

Parameters:

  • [option] Object optional
    • [url] [ 数组才有先后顺序, 多次调用 importSync 无法确定哪个先加载.] String | Array optional
    • [successCallback] [ 请求成功以后执行] Function optional
    • [failCallback] [ 请求失败以后执行] Function optional

Returns:

Object:

[ 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]
)

Defined in src/scripts/core/bui.loader.js:1204

Available since 1.6.0

1.6.0 新增, 页面加载, require加载脚本, load 加载模板跟执行脚本, 每次调用都执行一次

Parameters:

  • [option] Object optional
    • id String | Object

      [ 模板需要加载到哪个容器下 ]

    • url String

      [ 一般是页面的路径,或者模块名 ]

    • param Object

      [ 传参给组件, 可以这样传 { id:"111"} ]

    • [script] [ 可选,如果模板跟模块如果是分离的,则需要指明模块的路径,建议一般使用同名规范.] String optional
    • [beforeLoad] [ 加载前的回调, return false 则不执行] Function optional
    • [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] [默认:{} 模块的配置存放在modules对象中] Object optional
    • [modules.main] [默认:{} router路由默认定义了一个main模块] Object optional
    • modules.main.moduleName String

      [默认:"main" 当前模块的名称等于父级名 ]

    • modules.main.template String

      [默认:"" 模板名称,用于路由的模板加载 ]

    • modules.main.script String

      [默认:"" 当前模块的加载脚本 ]

    • [modules.main.style] [默认:[] 加载模块的样式资源,也可以使用load方法单独加载] Array optional
    • [modules.main.depend] [默认:[] 模块的依赖名,如果define时没有声明名称,则依赖名为该脚本的路径去掉.js] Array optional

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]
)
Object

获取依赖的实例,异步,在同一次依赖加载里面,如果该实例已经重复初始化,不会重复执行.

Parameters:

  • [option] Object optional
    • depend Array | String

      [模块的依赖模块,可以是数组或者模块名 ]

    • callback Function

      [加载模块成功以后,执行回调 ]

Returns:

Object:

[ 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:

  • name String

    [ 模块名 ]

  • value Object

    [ 模块的路径 {template:"",script:""}]

Example:

       // 修改首页为登录页, 需要在window.router 后面
                                                   loader.set("main",{
                                                       template: "pages/login/login.html",
                                                       script: "pages/login/login.html"
                                                   })

view

(
  • id
  • [loaded] [ 每次编译完commponent执行]
  • [compiled] [ 编译完同级commponent执行,存在嵌套则会多次执行]
)

Defined in src/scripts/core/bui.loader.js:1861

Available since 1.6.0

1.6.0新增, 编译页面 view标签, 把模板加载进来, 默认只编译一次,一般不需要调用, view标签主要配合 bui.store 的mixins而来, 自带解析view标签

Parameters:

  • id String | Object

    [ view标签本身 ]

  • [loaded] [ 每次编译完commponent执行] Function optional
  • [compiled] [ 编译完同级commponent执行,存在嵌套则会多次执行] Function optional

Example:

       例子: 
                                                   html: 
                                                   <view id="views" name="pages/views/slide/index"></view>
                                            
                                                   js: 
                                                   loader.view({
                                                       id:"#views"
                                                   });
                                            

views

(
  • id
  • [loaded] [ 每次编译完一个commponent执行]
  • [compiled] [ 编译完同级1个或多个commponent后执行,存在嵌套则会多次执行]
)

Defined in src/scripts/core/bui.loader.js:1823

Available since 1.6.0

1.6.0新增, 编译容器下的 多个view标签, 一般无需使用, router(默认needView:false), store(默认needView:true), page(默认needView:false)

Parameters:

  • id String | Object

    [ 哪个容器下的 ]

  • [loaded] [ 每次编译完一个commponent执行] Function optional
  • [compiled] [ 编译完同级1个或多个commponent后执行,存在嵌套则会多次执行] Function optional

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

Defined in src/scripts/core/bui.loader.js:2600

Available since 1.5.3

为控件取消绑定事件

Event Payload:

  • [type] [关闭订阅事件 例如: success] String optional
  • [callback] [ 监听事件以后执行] Function optional

Example:

       loader.off("success");
                                            

on

Defined in src/scripts/core/bui.loader.js:2479

Available since 1.5.3

为模块绑定事件,比方依赖的模块是异步的,这个时候可以监听该数据请求结束以后再执行.

Event Payload:

  • [type] [关闭订阅事件 例如: success] String optional
  • [callback] [ 监听事件以后执行] Function optional

Example:

         loader.on("success",function () {
                                                         // 点击的菜单
                                                         console.log(this);
                                                     });
                                            

one

Defined in src/scripts/core/bui.loader.js:2510

Available since 1.6.2

只绑定一次事件

Event Payload:

  • [type] [关闭订阅事件 例如: success] String optional
  • [callback] [ 监听事件以后执行] Function optional

Example:

         loader.one("success",function () {
                                                         // 点击的菜单
                                                         console.log(this);
                                                     });
                                            

trigger

Defined in src/scripts/core/bui.loader.js:2626

Available since 1.5.3

触发自定义事件, 名称不能跟component 的id相同. componet id 内部会自动触发

Event Payload:

  • [type] [自定义事件, 例如: "success"] String optional
  • [args] [传过去的参数,可以有多个] String optional

Example:

       loader.trigger("aaa")
                                            

wait

Defined in src/scripts/core/bui.loader.js:2532

Available since 1.6.2

在父层获取子组件的处理, 等待多个模块完成后触发一次

Event Payload:

  • [type] [组件的id] Array optional
  • [callback] [ 监听事件以后执行] Function optional

Example:

         <component id="list" name="pages/components/list"></component>
                                            
                                                     // 等等list编译完成触发
                                                     loader.wait(["list"],function (list) {
                                                         // list 组件的实例
                                                         console.log(list.exports);
                                                     });
                                            

waited

Defined in src/scripts/core/bui.loader.js:2557

Available since 1.6.2

在父层获取子组件的处理, 等待多个模块完成后触发一次

Event Payload:

  • [type] [组件的id] Array optional
  • [callback] [ 监听事件以后执行] Function optional

Example:

         <component id="list" name="pages/components/list"></component>
                                            
                                                     // 等等list编译完成触发
                                                     loader.waited(["list"],function (list) {
                                                         // list 组件的实例
                                                         console.log(list);
                                                     });