Skip to content

README_ru.md

Latest commit

 

History

History
330 lines (229 loc) · 12 KB

README_ru.md

File metadata and controls

330 lines (229 loc) · 12 KB

GStime JavaScript Library

Философия библиотеки

GStime.js — это легковесная JavaScript библиотека для манипуляции с DOM, создания анимации и выполнения AJAX запросов. Она разработана как современный облегченный аналог jQuery, сохраняющий знакомый синтаксис и популярные функции, но оптимизированный для современных браузеров.

Основные принципы:

  • Минимальный размер: Только необходимый функционал, без излишних возможностей
  • Современный JavaScript: Использование современного синтаксиса и API браузеров
  • Совместимость API: Синтаксис похож на jQuery для облегчения миграции
  • Цепочки методов: Поддержка цепных вызовов методов для лаконичного кода

Быстрый старт

<!-- Подключение библиотеки -->
<script src="GStime.js"></script>

<script>
  // DOM готов
  $(document).ready(function() {
    // Выбор элементов и манипуляция с ними
    $('button').on('click', function() {
      $('.box').fadeIn(500);
    });
  });
</script>

Основные возможности

Селекторы

Выбор элементов на странице по CSS-селекторам:

// Выбор по ID
$("#myElement");

// Выбор по классу
$(".myClass");

// Выбор по тегу
$("div");

// Комбинированные селекторы
$("ul.menu li");

Работа с DOM

Манипуляция с DOM-элементами:

// Изменение HTML содержимого
$("#content").html("<h1>Новый заголовок</h1>");

// Добавление содержимого
$(".container").append("<p>Новый параграф</p>");

// Создание элементов
$("<div class='box'></div>").appendTo(".container");

// Работа с классами
$(".item").addClass("active");
$(".item").removeClass("hidden");
$(".item").toggleClass("selected");

// Работа с атрибутами
$("img").attr("src", "new-image.jpg");
$("input").val("Новое значение");

События

Обработка событий:

// Базовые события
$("#button").on("click", function() {
  console.log("Кнопка нажата");
});

// Делегирование событий
$(".container").on("click", ".button", function() {
  console.log("Нажата кнопка внутри контейнера");
});

// Удаление обработчиков
$("#element").off("click");

Анимации

Создание анимаций:

// Простые анимации
$(".box").fadeIn(500);
$(".box").fadeOut(500);

// Слайдеры
$(".panel").slideDown(500);
$(".panel").slideUp(500);
$(".panel").slideToggle(500);

// Пользовательские анимации
$(".element").animate({ width: "200px", height: "300px" }, 500);

// Анимация цвета
$(".button").colorAnimate({ backgroundColor: "#ff0000" }, 500);

AJAX

Выполнение асинхронных запросов:

// GET запрос
GStime.get("api/users", { page: 1 })
  .then(data => console.log(data))
  .catch(error => console.error(error));

// POST запрос
GStime.post("api/users", { name: "John", age: 30 })
  .then(response => console.log(response))
  .catch(error => console.error(error));

// Расширенные настройки
GStime.ajax({
  url: "api/data",
  method: "POST",
  data: { id: 123 },
  headers: { "Authorization": "Bearer token" },
  timeout: 5000,
  beforeSend: function() {
    $(".loader").show();
  }
})
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => $(".loader").hide());

API Документация

Основные методы

Селектор $(selector)

Создает новый объект GStime с элементами, соответствующими селектору.

Параметры:

  • selector (String|Element|NodeList|Array): CSS-селектор, HTML-строка или DOM-элемент.

Ограничения:

  • При передаче HTML-строки создается только один элемент верхнего уровня.

.each(callback)

Выполняет функцию для каждого элемента в наборе.

Параметры:

  • callback (Function): Функция, выполняемая для каждого элемента.

.on(event, [selector], callback)

Присоединяет обработчик события к элементам.

Параметры:

  • event (String): Название события (например, "click").
  • selector (String, необязательный): Селектор для делегирования событий.
  • callback (Function): Функция-обработчик.

Ограничения:

  • Делегирование работает только для элементов, существующих на момент привязки события.

.off(event, callback)

Удаляет обработчик события с элементов.

Параметры:

  • event (String): Название события.
  • callback (Function): Функция, которую нужно удалить.

Ограничения:

  • При использовании делегированных событий необходимо передать точно ту же функцию, которая была назначена через .on().

.val([newVal])

Получает или устанавливает значение элементов формы.

Параметры:

  • newVal (String, необязательный): Новое значение.

Возвращает:

  • Без параметров: значение первого элемента.
  • С параметром: объект GStime для цепочки вызовов.

.html([content])

Получает или устанавливает HTML содержимое элементов.

Параметры:

  • content (String, необязательный): HTML содержимое.

Возвращает:

  • Без параметров: содержимое первого элемента.
  • С параметром: объект GStime для цепочки вызовов.

.css(prop, [value]) или .css(properties)

Получает или устанавливает CSS свойства элементов.

Параметры:

  • prop (String): Название CSS свойства.
  • value (String|Number, необязательный): Значение CSS свойства.
  • properties (Object): Объект с CSS свойствами.

Возвращает:

  • При получении: значение свойства.
  • При установке: объект GStime для цепочки вызовов.

Анимации

.animate(properties, duration, [callback])

Анимирует CSS свойства элементов.

Параметры:

  • properties (Object): Объект с CSS свойствами и их конечными значениями.
  • duration (Number): Длительность анимации в миллисекундах.
  • callback (Function, необязательный): Функция, вызываемая по завершении.

Ограничения:

  • Анимировать можно только числовые значения CSS свойств.

.fadeIn(duration, [callback]) / .fadeOut(duration, [callback])

Показывает или скрывает элементы с эффектом плавного изменения прозрачности.

Параметры:

  • duration (Number): Длительность анимации в миллисекундах.
  • callback (Function, необязательный): Функция, вызываемая по завершении.

.slideUp(duration, [callback]) / .slideDown(duration, [callback]) / .slideToggle(duration, [callback])

Скрывает, показывает или переключает видимость элементов с эффектом сворачивания/разворачивания.

Параметры:

  • duration (Number): Длительность анимации в миллисекундах.
  • callback (Function, необязательный): Функция, вызываемая по завершении.

Ограничения:

  • Может работать некорректно для элементов с padding/margin или сложной внутренней структурой.

.colorAnimate(properties, duration, [callback])

Анимирует цветовые CSS свойства элементов.

Параметры:

  • properties (Object): Объект с цветовыми CSS свойствами и их конечными значениями.
  • duration (Number): Длительность анимации в миллисекундах.
  • callback (Function, необязательный): Функция, вызываемая по завершении.

Ограничения:

  • Поддерживаются форматы цветов: hex (#RGB, #RRGGBB, #RRGGBBAA), rgb() и rgba().

AJAX

GStime.ajax(settings)

Выполняет AJAX запрос.

Параметры:

  • settings (Object): Объект с настройками запроса:
    • url (String): URL для запроса.
    • method (String): HTTP метод (GET, POST, PUT, DELETE).
    • data (Object|String): Данные для отправки.
    • headers (Object): HTTP заголовки.
    • timeout (Number): Таймаут запроса в миллисекундах.
    • beforeSend (Function): Функция, вызываемая перед отправкой запроса.

Возвращает:

  • Promise, разрешающийся с данными ответа или отклоняющийся с ошибкой.

Ограничения:

  • Не поддерживает синхронные запросы.
  • Ограниченная поддержка кросс-доменных запросов (зависит от браузера).

GStime.get(url, [data], [options])

Выполняет GET запрос.

Параметры:

  • url (String): URL для запроса.
  • data (Object, необязательный): Параметры запроса.
  • options (Object, необязательный): Дополнительные настройки.

GStime.post(url, data, [options])

Выполняет POST запрос.

Параметры:

  • url (String): URL для запроса.
  • data (Object): Данные для отправки.
  • options (Object, необязательный): Дополнительные настройки.

GStime.put(url, data, [options]) / GStime.delete(url, [data], [options])

Выполняет PUT или DELETE запрос.

Параметры:

  • url (String): URL для запроса.
  • data (Object): Данные для отправки.
  • options (Object, необязательный): Дополнительные настройки.

Совместимость с браузерами

GStime.js поддерживает следующие браузеры:

  • Chrome 60+
  • Firefox 55+
  • Safari 11+
  • Edge 15+
  • Opera 47+

Лицензия

GStime.js распространяется под лицензией MIT.