Glue

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

##简介

Glue — это простой фронтэнд-фреймворк, основанный на jQuery. Он предоставляет следующие функции:

• интеграция с jQuery;
• автоматическая загрузка файлов JavaScript и CSS;
• отправка запросов и анализ JSON;
• шаблонизатор JavaScript.

PS: файл Glue.iml является файлом конфигурации проекта Intellij IDEA и может быть проигнорирован.

##Обновление истории

2014-12-24:

1. Улучшены возможности Importer для импорта удалённых зависимостей.
2. Значки шаблонизатора изменены на <@@>, чтобы избежать конфликтов с тегами JSP.
3. Для упрощения использования метод getData класса Sender был удалён, а вместо него используется метод 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 находятся основные файлы фреймворка (импортёр, jQuery, отправка запросов, шаблонизатор);
• папка config содержит файлы конфигурации фреймворка, которые предоставляют пути к загружаемым файлам JavaScript и CSS, включая cspath.json и jspath.json;
• папка page содержит файлы JavaScript для каждой страницы, например, fun.js и tpl.js для index.html.

PS: структура проекта и имена файлов не обязательно должны соответствовать предоставленному примеру.

##Начало работы

1. Измените свойство pathConfig в файле import.js, чтобы оно указывало на файлы 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 на странице и настройте загрузку других ресурсов согласно конфигурации. Пример:

<script type="text/javascript" src="./js/base/import.js"></script>
<script type="text/javascript">Importer.init(["init","index"],["test"]);</script>

Примечание: файл jquery.js должен быть загружен перед другими компонентами, так как они зависят от него. Фреймворк готов к использованию. Далее рассмотрим основные компоненты.

##send.js

В файле send.js класс Sender предоставляет метод send, который принимает следующие параметры:

• url — адрес для отправки запроса, без имени проекта или домена;
• type — метод запроса (GET или POST);
• json — передаваемые параметры, которые будут упакованы в параметр params;
• win — окно, по умолчанию null;
• asyn — режим передачи, по умолчанию синхронный.

Метод send не только отправляет запрос, но и анализирует ответ сервера, упаковывая его в объект JSON, который затем возвращается.

Пример использования можно найти в файле fun.js.

##template.js

Шаблонизатор использует синтаксис <@ и @> для обрамления кода шаблона. Пример:

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

Можно использовать следующие элементы языка: if, for, else, switch, case, break.

Для возврата обработанного HTML-кода используется метод render класса TemplateEngine. Пример:

//$("body").html() содержит код шаблона
//data — объект JSON
TemplateEngine.render($("body").html(), data)

Передаваемый объект JSON доступен через this.

Примеры использования можно найти в файлах fun.js и tpl.js.