# Glue

**Repository Path**: lray/Glue

## Basic Information

- **Project Name**: Glue
- **Description**: 一个简单的JS框架
- **Primary Language**: JavaScript
- **License**: WTFPL
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2014-12-05
- **Last Updated**: 2024-04-18

## Categories & Tags

**Categories**: javascript-toolkits

**Tags**: None

## README

#Glue
-----

http://lray.pw/works | [lray](http://lray.pw) | [Glue](http://git.oschina.net/lray/Glue) | [GitHub](https://github.com/artistlin) | [Mail](mailto://lraypublic@163.com)

##简介
一个基于jQuery的简单前端框架。  
主要实现了如下功能：
> 1. 集成jQuery
> 2. 自动加载js文件和css文件
> 3. 发送请求和解析json
> 4. js模版引擎

PS: Glue.iml 文件是 Intellij IDEA 的项目配置文件，可忽略。

##更新历史
    2014-12-24:
    1. 增强Importer的功能，能够引进配置远程依赖
    2. 将模版引擎的便签更改为<@@>，解决和JSP页面标签的冲突
    3. 为简单化，去掉Sender的getData方法，使用send方法来替代，同时强制将发送请求改为同步方式（暂时）
    4. 更新例子

##项目结构
    根目录--|
            |---js
            |   |---base
            |   |   |---import.js
            |   |   |---jquery.js
            |   |   |---send.js
            |   |   |---template.js
            |   |
            |   |---config
            |   |   |---cspath.json
            |   |   |---jspath.json
            |   |
            |   |---page
            |       |---index
            |           |---fun.js
            |           |---tpl.js
            |
            |---index.html

相关说明：
+ base 文件夹下是框架核心文件（重点），包含import.js[资源加载器]，jquery.js[jquery框架]，send.js[请求发送和json解析器]，template.js[模版引擎]
+ config 文件夹下是框架配置文件，提供需要加载的js文件和css文件路径，包含cspath.json[css文件路径配置文件]，jspath.json[js文件路径配置文件]
+ page 文件夹下是对应页面的js文件，如index文件夹下的js文件对应index.html页面，其中fun.js是该页面独有的函数集合，tpl.js是该页面的一些页面模版

**PS：项目结构和文件名不一定需要像我提供的这种格式来编写，本人只是提供一个构建的样例。**

##开始
1. 修改import.js中Importer的pathConfig属性，将其地址分别指向cspath.json和jspath.json，以上面项目格式为例，修改如下：  
```javascript
    pathConfig: function (type) {
        if(type === "js"){
            return Importer.getSiteRoot(true) + "js/config/jspath.json";
        }
        return Importer.getSiteRoot(true) + "js/config/cspath.json";
    }
```

2. 修改cspath.json和jspath.json，分别按如上方式配置路径，可以参考项目文件，具体如下：  
```javascript
    {
        "init": [
            "http://libs.baidu.com/jquery/1.9.0/jquery.js",
            "js/base/send.js",
            "js/base/template.js"
        ],
        
        "index": [
            "js/page/index/tpl.js",
            "js/page/index/fun.js"
        ]
    }
```

3. 在页面中引入import.js，并根据配置文件，设置需要加载的其它资源文件（第一个json数组为js文件的，第二个json数组为css文件的，第一个参数必填，第二个参数可不填），例子如下：  
```javascript
    <script type="text/javascript" src="./js/base/import.js"></script>
    <script type="text/javascript">Importer.init(["init","index"],["test"]);</script>
```

**PS：jquery.js必须要在其它组件之前引入，因为其它组件依赖于它来实现功能。**
框架已引入完毕，下面讲解核心组件的用法。

##send.js
send.js里面的Sender封装了一个send方法[<code>send: function (url, type, json)</code>]：
+ url是发送请求的地址，不需要项目名和域名，直接填写如：<code>"rest/kong"</code>
+ type是发送的请求方法，有GET和POST两种
+ json是传送的参数，会把整个json封装进一个name为<code>params</code>参数中传送过去
+ win是窗口，可以填null [ **暂时去掉** ]
+ asyn是传输方式，默认为同步传输，设置为<code>true</code>则使用异步传输 [ **暂时去掉** ]

**send方法除了发送请求，还会把服务端返回的内容解析封装进一个json对象中，再返回这个json对象。**
具体用法可以查看项目代码中的fun.js。

##template.js
1. 模版代码需要用<code><@</code>和<code>@></code>来括住，如下：  
```html
    <@ for (var index in this.keys) { @>
        <li><@ this.keys[index] @></li>
    <@ } @>
```

2. 可以使用的语法元素有：if，for，else，switch，case，break
3. 调用TemplateEngine的render方法来返回渲染后的html代码:  
```javascript
    //$("body").html()内的是模版代码
    //data是一个json对象
    TemplateEngine.render($("body").html(), data)
```

4. 传入的json用this指代

具体用法可以查看项目代码中的fun.js和tpl.js。

##项目例子
+ 请参考项目中的代码
+ 接下来会更新一些使用该框架和其它框架的整合例子，敬请期待