@iot-studio/material-loader v0.1.12

基于 fetch 的简易js模块加载器

fork 自 @bone/loader http://gitlab.alibaba-inc.com/bone/floader

使用方式

本加载器不需要修改js文件的打包方式，按照以下方式使用。

1. 引入加载器

    <script src="//g.alicdn.com/bone/loader/1.1.0/index.js"></script>

加载器引入之后，在window上会挂载一个全局的loader函数对象。

2. 注册模块

在每个js文件中，加入以下代码

    loader.register(module);

3. 使用模块

    const module = loader(moduleId);

这里的moduleId默认是js的url地址

4. 异步加载一个js文件

    loader.async("xxx/yyy.js", function(module){
        // do something
    });

    loader.async([
        "xxx/module1.js",
        "xxx/module2.js"
    ], function(module1, module2){
        // do something
    });

在html中访问loader

可以在script标签上通过global-name指定loader挂载在window上的名称

    <script src="//g.alicdn.com/bone/loader/1.1.0/index.js" global-name="myLoader"></script>
    <script>
        myLoader.async("xxx.js", function(xxx){ ... });
    </script>

在js项目中访问loader

通过bnpm安装@bone/loader

import loader from "@bone/loader";
loader.async("xxx.js", function(xxx){ ... });

示例

a.js

    loader.register(1);

b.js

    loader.register(2);

main.js

    function load(url){
        return new Promise(function(resolve){
            loader.async(url, resolve);
        });
    }

    Promise.all([
        load("a.js"),
        load("b.js")
    ]).then(function(a, b){
        console.log(a + b === 3);
    });

插件开发

支持以插件的方式修改loader的行为，目前支持以下3个插件修改点

load

加载一个模块

loader.plugin("load", function(info){
    // 修改加载的url
    info.url = "xxx";
    return info;
});

register

注册一个模块

loader.plugin("register", function(info){
    // 修改模块ID
    info.moduleId = "xxx";
    return info;
});

get

获取一个模块

loader.plugin("get", function(info){
    // 修改模块ID
    info.moduleId = "xxx";
    return info;
});

combo插件

使用combo插件，会对同时发起的多个请求进行合并，减少http请求数

引入combo插件

    <script src="//g.alicdn.com/bone/loader/1.1.0/plugins/combo.js"></script>

效果

    loader.async([
        "xxx/module1.js",
        "xxx/module2.js"
    ], function(module1, module2){
        // do something
    });

加载两个模块时，实际发出的请求为 xxx/??module1.js,module2.js