#Glue

http://lray.pw/works | lray | Glue | GitHub | Mail

##简介 一个基于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，以上面项目格式为例，修改如下：

    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，分别按如上方式配置路径，可以参考项目文件，具体如下：

    {
        "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文件的，第一个参数必填，第二个参数可不填），例子如下：

    <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方法[send: function (url, type, json)]：

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

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

##template.js

1. 模版代码需要用<@和@>来括住，如下：

    <@ for (var index in this.keys) { @>
        <li><@ this.keys[index] @></li>
    <@ } @>

2. 可以使用的语法元素有：if，for，else，switch，case，break
3. 调用TemplateEngine的render方法来返回渲染后的html代码:

    //$("body").html()内的是模版代码
    //data是一个json对象
    TemplateEngine.render($("body").html(), data)

4. 传入的json用this指代

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

##项目例子

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