# thin

**Repository Path**: chenxindev/thin

## Basic Information

- **Project Name**: thin
- **Description**: 一个前端模块加载框架，方便完成浏览器脚本注入！
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-07-08
- **Last Updated**: 2021-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# thin 1.0.3
> 小型前端模块加载框架，解决因模块多而不好管理问题，通过引入方式解决页面相同的模块加载。

#### 基本语法
```
thin.require
thin.define
thin.use
```

#### 开始使用
```
可以这样用:
<!-- 框架文件 -->
<script type="text/javascript" src="thin.js"></script>
<!-- 入口文件 -->
<script type="text/javascript" src="index.js"></script>

也可以这样用:
<!-- 通过"thin-main"引入入口文件 -->
<script type="text/javascript" src="thin.js" thin-main="index.js"></script>
```

#### thin.require
```
thin.require(src, rely);
／* 参数 *／
src    js文件路径，相对或绝对路径
rely   加载方式，分为 defer|async 两种方式，默认空值
```
> 用于加载JS文件。

#### thin.define
```
thin.define(exports);
／* 参数 *／
exports  函数封装

／* 用法 *／
thin.define(function(exports) {
	var fn = function() {
	    return 'Hello thin';
	};
	// 定义模块后，需要通过exports把模块注册到thin里
	// 绑定后的使用方式是 thin.test();
	exports('test', fn);
});
```
> 此函数用于定义模块，并执行于require之后，执行后可使用thin调用其注册的属性，必须按AMD格式定义模块。

#### thin.use
```
thin.use(callback);
／* 参数 *／
callback   回调函数

／* 用法 *／
thin.use(function() {
    console.dir('Hello thin');
});
```
> 当require和define都执行完毕才开始执行。

#### 案例
```
<script type="text/javascript" src="thin.js" thin-main="index.js"></script>

/* index.js */
thin.require('test.js', 'defer');
thin.use(function() {
    thin.test();
});


/* test.js */
thin.define(function(exports) {
    var fn = function() {
	    return 'Hello thin';
	}
	exports('test', fn);
});

/* 输出 */
"Hello thin"
```