BUI

其它版本:

API for BUI 1.5.4

Show:

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.router 前面.
   window.loader = bui.loader();

Item Index

Events

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)

define

(
  • [moduleName]
  • [depend]
  • callback
)
Object

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 ]

  • 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")
       }
   })

destroy

(
  • [option]
)
Object

销毁一个模块

Parameters:

  • [option] Object optional
    • [name] String optional

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

    • [depend] Array optional

      [模块的依赖模块,可以省略, 模块名不含.js ]

    • callback Function

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

Returns:

Object:

[ 返回值用于公共使用 ]

Example:

get

(
  • name
)
Object

获取模块

Parameters:

  • name String

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

Returns:

Object:

[description]

Example:

       var main = loader.get("main")

import

(
  • [option]
)
Boolean

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

Parameters:

  • [option] Object optional
    • [src] String | Array optional

      [ html,脚本或者样式路径,也可以是数组 ]

    • [successCallback] Function optional

      [ 1.5.4新增对ID的支持,结合html使用,查看例子5, 加载成功以后执行,如果是数组,只在最后一个执行 ]

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){
         // 拿到模板信息
       });

       例子5: 1.5.4新增, 把html,渲染到某个id下,只渲染一次. 有回调也只执行一次

       loader.import("pages/ui/list.html","#id",function(res){
           // 在渲染模板到#id以后,回调只执行一次
       });

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.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]
)
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"
       })

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

trigger

触发自定义事件

Event Payload:

  • [type] String optional

    [自定义事件, 例如: "success"]

  • [args] String optional

    [传过去的参数,可以有多个 ]

Example:

       bui.ajax({
           url: ""
       }).then(function(result){
           loader.trigger("success",result);
       })