Turtle online — это архитектура для создания фронтенд-разработки на ПК, которая включает в себя две основные части: компоненты и API. Она позволяет быстро создавать среду разработки фронтенда на ПК.

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

API включает в себя методы JavaScript, которые часто используются и были упакованы (операции с cookie, операции AJAX, обработка дат, определение браузера, переход на страницу по щелчку, другие часто используемые методы), а также основан на фреймворках Backbone.View и Require.text.js и шаблонах фронтенда.

Важно: часть компонентов Turtle online использует сторонние библиотеки JavaScript layerUI и poshytip.

Демонстрация

Демонстрация Turtle Online доступна по ссылке: http://yinluhui.oschina.io/turtle-online/code/views/index.html.

Использование

1. Поместите каталог build в свой проект.

2. Включите Turtle.min.css и ../build/Turtle.min.js на своей странице.

3. Затем вы можете использовать его в своём JavaScript-коде, например:

   // Синтаксис аналогичен requireJS и BackboneJs // cPageView — это Backbone.View.js, упакованный в Turtle, text! — это require.text.js, уже импортированный в turtle. define(['cPageView', 'text!views/temple/temptest.html'], function (cPageView, temptest) { var View = cPageView.extend({ events: { 'click #cpageviewTest1': 'clicktest1', 'click #templateA': 'clicktest2' }, initialize: function () { console.log('initialize'); this.$el.find('#cpageviewTest3').html('Значение по умолчанию было изменено'); this.on('initpage', function () { console.log('initpage'); }); this.trigger('initpage'); }, clicktest1: function (e) { this.$el.find('#cpageviewTest2').html('Задание выполнено успешно!' + new Date()) }, clicktest2: function () { $('#templateTest').html(_.template(temptest)({name: 'Alec yin'})); } }) return new View(); });

4. Все API можно найти в объекте Turtle./turtle.

После выполнения этих четырёх шагов вы сможете использовать методы Turtle online. Если вы не используете requireJS, то API и компоненты также доступны для использования.

Запуск Turtle online

1. Скачайте проект Turtle online и откройте index.html для просмотра. (На этом этапе могут возникнуть ошибки JavaScript из-за использования require.js. Это не влияет на просмотр экземпляров, кроме cPageView.)

   Если вы хотите просмотреть экземпляр cPageView, выполните следующие действия:

2. Разместите код Turtle online на сервере.

3. Измените код в index.html, заменив baseUrl: «http://localhost/TurtleOnline» на путь к вашему серверу.

4. Запустите index.html ещё раз.

Разработка

Если существующий Turtle online не соответствует вашим требованиям, вы можете настроить его под свои нужды (но не отправляйте изменения в репозиторий, используйте их только для личного использования).

Разработка включает следующие шаги:

1. Внесите изменения в код.
2. Если добавлены или удалены файлы, необходимо обновить конфигурацию gulpfile.js.
3. Установите зависимости node_modules.
4. Выполните команду gulp build, чтобы объединить и сжать проект в каталоге build.
5. Скопируйте файлы из каталога build в ваш проект, и вы сможете сразу же использовать их.

Архитектура проекта

Проект имеет следующую архитектуру:

Схема работы Turtle Online

Схема работы Turtle Online представлена на следующих изображениях:

Изображение	Описание

Поддержка

Вы можете поддержать проект, сделав пожертвование через платёжные системы Alipay и WeChat.