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 optional

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

    • [scriptSuffix] Boolean optional

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

    • [needNative] Boolean optional

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

    • [deepComponent] Boolean optional

      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

(
  • option
)

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

Available since 1.6.0

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

Parameters:

  • option Object
    • id String | Object

      component 本身id

    • [loaded] Function optional

      每次编译完一个commponent执行

    • [command] Object optional

      1.7.3 新增 默认 html | append | prepend 可以通过 component 标签上的command属性指定

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

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

Available since 1.6.0

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

Parameters:

  • id String | Object

    哪个容器下的

  • [param] Object optional

    动态传参 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
)
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")
                                                       }
                                                   })
                                                

delay

(
  • id
  • [param]
  • [everytime]
  • [loaded]
  • [compiled]
)

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

Available since 1.6.0

加载之前延迟加载的组件

Parameters:

  • id String | Object

    哪个容器下的

  • [param] Object optional

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

  • [everytime] Boolean optional

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

global

(
  • callback
)
Object

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

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] String | Array optional

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

    • [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]
  • [id]
  • [id]
)
Object

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

Available since 1.6.2

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

Parameters:

  • [url] String optional

    link的地址

  • [id] String optional

    创建的id

  • [id] String optional

    创建的id

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

Available since 1.6.0

动态加载html

Parameters:

  • [option] Object optional
    • [url] String optional

      html地址

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

Available since 1.6.0

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

Parameters:

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

      数组才有先后顺序, 多次调用 importSync 无法确定哪个先加载.

    • [successCallback] Function optional

      请求成功以后执行

    • [failCallback] Function optional

      请求失败以后执行

Returns:

Object:

[ promise ]

Example:

       例子1: 
                                                
                                                       async function init(){
                                                           let html = await loader.importSync("pages/ui/list.html");
                                                           let html2 = await loader.importSync("pages/ui/list2.html");
                                                
                                                           // do something
                                                       }
                                                

load

(
  • [option]
)

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

Available since 1.6.0

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

Parameters:

  • [option] Object optional
    • id String | Object

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

    • url String

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

    • param Object

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

    • [command] Object optional

      1.7.3 新增 默认 html | append | prepend

    • [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.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

获取依赖的实例,异步,在同一次依赖加载里面,如果该实例已经重复初始化,不会重复执行, 除非第三个参数 reload:true.

Parameters:

  • [option] Object optional
    • depend Array | String

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

    • callback Function

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

    • reload Boolean

      [ 默认 false(只重新加载 callback, 不重新执行模块) | true (重新执行模块,并重新加载callback) ]

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

syncLoad

(
  • option
)

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

Available since 1.6.7

同步加载

Parameters:

  • option Object
    • id String | Object

      哪个容器下的,通过id,返回一个对象,通过样式名,返回一个数组,看例子

    • [url] String optional

      可选,如果component标签属性有name值,可以不传

    • [param] Object optional

      传参给组件

    • [command] Object optional

      1.7.3 新增 默认 html | append | prepend

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

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

Available since 1.6.0

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

Parameters:

  • id String | 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]
)

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

Available since 1.6.0

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

Parameters:

  • id String | 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

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

Available since 1.5.3

为控件取消绑定事件

Event Payload:

  • [type] String optional

    关闭订阅事件 例如: success

  • [callback] Function optional

    监听事件以后执行

Example:

       loader.off("success");
                                                

on

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

Available since 1.5.3

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

Event Payload:

  • [type] String optional

    关闭订阅事件 例如: success

  • [callback] Function optional

    监听事件以后执行

Example:

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

one

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

Available since 1.6.2

只绑定一次事件

Event Payload:

  • [type] String optional

    关闭订阅事件 例如: success

  • [callback] Function optional

    监听事件以后执行

Example:

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

trigger

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

Available since 1.5.3

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

Event Payload:

  • [type] String optional

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

  • [args] String optional

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

Example:

       loader.trigger("success")
                                                

wait

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

Available since 1.6.2

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

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

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

Available since 1.6.2

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

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