asd asdsa f
Статьи

Пример создания приложения на jQuery mobile, RequireJS и BackboneJS

0 51

Из этой статьи вы узнаете, как создать простое мобильное приложения с использованием таких современных инструментов, как jQueryMobile, RequireJS и Backbonejs.

Что нужно, чтобы написать хорошее мобильное приложение на HTML5?

Во первых, понадобится библиотека для работы с DOM. Для этой цели неплохо подойдет jQuery Mobile.

Во вторых, любое нетривиальное приложения содержит различную функциональность, которую нужно разделить на модули. Для этой цели как нельзя хорошо подходит такой инструмент как RequireJS. Он позволяет загружать только нужны в данный момент модули (файлы) и берет на себя всю работу по разрешению зависимостей.

И наконец, приложение должно иметь архитектуру, удобную в сопровождении. Чтобы проект не превращался в спагетти из зависимостей, на помошь приходят библиотеки вроде Backbonejs. Уже из названия видно, что эта библиотека позволяет сформировать «скелет» приложения. На этот скелет разработчик должен будет нарастить «мясо» в виде логики и интерфейса.

RequireJS

Начнем рассмотрение с обзора библиотеки RequireJS. Эта библиотека служит для построения модульной архитектуры и управляет зависимостями между модулями. Подробнее о спецификации AMD можно почитать, например, тут: https://github.com/amdjs/amdjs-api/wiki/AMD.

Рассмотрим простейший пример: на странице присутствуют два различных виджета, которые отображают разные аспекты одной и той же модели. Здесь напрашивается создание двух модулей, управляющих поведением виджетов и модуль, описывающий модель.

Допустим, наша модель — это список температур большых в уездной больнице.

Первый виджет представляет собой список этих температур, а второй выводит среднюю температуру по больнице.

Создайте такую структуру в файловой системе:

  • index.html
  • main.js
    • js/
      • model.js
      • widget_list.js
      • widget_mid.js

Скачайте require.js со страницы http://requirejs.org/docs/download.html и положите его рядом с index.html:

  • index.html
  • main.js
  • require.js
    • js/
      • model.js
      • widget_list.js
      • widget_mid.js

В файл index.html напишем следующие строки:

<!DOCTYPE html>
<html>
<head>
    <title>Больница v1.0</title>
    <script data-main="js/main" src="require.js"></script>
</head>
<body>

</body>
</html>

В теге script задается атрибут data-main. Он указывает, какой модуль загружать первым. Скрипт в require.js читает значение этого атрибута и загружает файл js/main.js. Обратите внимание, что имена модулей указываются без расширения .js. Также, если бы у нас был модуль «module_name», который бы лежал в папке js/models, то мы бы указали его имя как «js/models/module_name».

В файл js/main.js добавим такие строки:

require.config({

    baseUrl: "js",

    paths: {
        jquery: 'libs/jquery-2.0.3.min'
    }

});

require(["jquery"], function($) {

    $(document).ready(function() {
        //some processing
    });

});

В main.js Вы сначала настраиваете параметры requirejs через ф-ю require.config.
* baseUrl — задает корневую папку где искать модули
* paths — задает короткие имена загружаемым файлам. В частности, если в папке libs у вас лужит файл jquery-2.0.3.min, то доступ к нему можно получить так, как показадо в примере.

About the author / 

admin