open-index/open-npm huggingface dataset:
npm package: @iot-studio/material-factory
Description: material factory
Author: xizhi.ljh@alibaba-inc.com
Latest version: 0.1.7

# material-factory

组件容器工厂： 负责加载用户组件，并作为组件挂载容器。

### API

`createMaterial(opts)` 返回一个新的组件。`opts` 解构之后的参数如下：

|参数名称|类型|是否必须|含义|
|--|--|--|--|
|script_url|string|是|组件js地址|
|style_url|string|是|组件css样式地址|
|source|string|是|组件来源:官方，自研|
|dependencies|array|否|组件依赖的包名,bonelibs中的基础包|
|isSandbox|boolean|否|是否启用沙箱渲染，不需要传，前期不支持指定|


### 用例

```javascript

import { createMaterial } from '@maliang/material-factory';

const TestUC = createMaterial({
  script_url: 'http://localhost:8899/index.js',
  style_url: 'http://localhost:8001/index.css',
  source: 'official',
  dependencies: [
    "react@16",
    "react-dom@16"
  ],
});

export default (props) => {
  return <TestUC text="我是测试组件" />
}

```
npm package: @iot-studio/material-loader
Description: loader
Author: xizhi.ljh@alibaba-inc.com
Latest version: 0.1.12

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

> fork 自 @bone/loader  [http://gitlab.alibaba-inc.com/bone/floader](http://gitlab.alibaba-inc.com/bone/floader)

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

### 1. 引入加载器
```html
    <script src="//g.alicdn.com/bone/loader/1.1.0/index.js"></script>
```
加载器引入之后，在window上会挂载一个全局的loader函数对象。

### 2. 注册模块
在每个js文件中，加入以下代码
```javascript
    loader.register(module);
```

### 3. 使用模块
```javascript
    const module = loader(moduleId);
```
这里的moduleId默认是js的url地址

### 4. 异步加载一个js文件
```javascript
    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上的名称
```html
    <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
```javascript
import loader from "@bone/loader";
loader.async("xxx.js", function(xxx){ ... });
```

## 示例
### a.js
```javascript
    loader.register(1);
```

### b.js
```javascript
    loader.register(2);
```

### main.js
```javascript
    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
加载一个模块
```javascript
loader.plugin("load", function(info){
    // 修改加载的url
    info.url = "xxx";
    return info;
});
```
### register
注册一个模块
```javascript
loader.plugin("register", function(info){
    // 修改模块ID
    info.moduleId = "xxx";
    return info;
});
```
### get
获取一个模块
```javascript
loader.plugin("get", function(info){
    // 修改模块ID
    info.moduleId = "xxx";
    return info;
});
```

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

### 引入combo插件
```html
    <script src="//g.alicdn.com/bone/loader/1.1.0/plugins/combo.js"></script>
```

### 效果
```javascript
    loader.async([
        "xxx/module1.js",
        "xxx/module2.js"
    ], function(module1, module2){
        // do something
    });
```
加载两个模块时，实际发出的请求为 `xxx/??module1.js,module2.js`