BUI

其它版本:

API for BUI 1.4.8

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.loader = bui.loader();

Item Index

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

(
  • [option]
)
Object

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:

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"
   })
   // 如果是回调,则不用加载脚本
   loader.map({
       moduleName: "page2",
       template: "pages/page2/page2.html",
       callback: function(){
         // 这里写业务逻辑
       }
   })

import

(
  • [option]
)
Boolean

动态加载脚本资源,或者css资源

Parameters:

  • [option] Object optional
    • [src] 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){
     // 创建成功以后执行回调
   });

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