Организация кода приложения

Zepto — это лёгкая библиотека JavaScript, ориентированная на работу с DOM и событиями. Она предоставляет API, совместимый с jQuery, но с меньшим объёмом кода, что делает её удобной для мобильных приложений и лёгких веб-проектов. Основные возможности Zepto включают выбор элементов, манипуляцию DOM, работу с событиями, анимацию и AJAX.

Выбор элементов

Выбор элементов осуществляется с помощью функции $. Она принимает селектор CSS или HTML-элемент и возвращает объект Zepto с набором методов для работы с выбранными элементами.

var header = $('header');
var buttons = $('.btn');
var firstItem = $('#list li:first-child');

Особенности:

  • Поддерживаются CSS-селекторы и простые фильтры.
  • Можно передавать массивы или NodeList.
  • Методы возвращают объект Zepto, что позволяет использовать цепочки вызовов (chaining).

Манипуляция DOM

Zepto предоставляет методы для изменения структуры документа и содержимого элементов:

$('#content').html('<p>Новый текст</p>');
$('.item').append('<span>Дополнительно</span>');
$('#menu').prepend('<li>Главная</li>');
  • html() — получает или задаёт HTML содержимое.
  • text() — аналогично для текста без HTML.
  • append(), prepend() — добавляют элементы внутрь выбранных элементов.
  • before(), after() — вставляют элементы перед или после выбранных элементов.

Работа с атрибутами и стилями

$('img').attr('src', 'image.jpg');
$('.link').attr('target', '_blank');
$('#box').css('width', '200px');
$('#box').css({height: '100px', backgroundColor: 'blue'});
  • attr() — получение или установка атрибутов.
  • removeAttr() — удаление атрибутов.
  • css() — получение или установка стилей; может принимать объект с несколькими свойствами.

События

Zepto поддерживает работу с событиями через метод on и его аналоги:

$('.btn').on('click', function() {
    alert('Кнопка нажата');
});

$(document).on('keydown', function(e) {
    console.log('Нажата клавиша:', e.key);
});
  • on(event, selector, handler) — навешивание события с делегированием.
  • off(event, handler) — удаление обработчиков.
  • trigger(event) — программный вызов события.

Для коротких обработчиков также существуют сокращённые методы, например: click(handler), focus(handler).

Анимации и эффекты

Zepto предоставляет простые средства для анимации:

$('#box').fadeOut(500, function() {
    console.log('Анимация завершена');
});

$('#box').fadeIn(300);
$('#box').slideUp(400).slideDown(400);
  • fadeIn(), fadeOut() — плавное появление и исчезновение элементов.
  • slideUp(), slideDown() — сворачивание и разворачивание элементов.
  • Методы поддерживают указание времени анимации и callback-функций.

AJAX-запросы

Zepto включает методы для работы с HTTP-запросами:

$.get('/api/data', {id: 1}, function(response) {
    console.log(response);
});

$.post('/api/save', {name: 'John'}, function(result) {
    console.log(result);
});

$.ajax({
    url: '/api/update',
    type: 'PUT',
    data: {status: 'active'},
    success: function(data) {
        console.log('Обновление успешно');
    },
    error: function(err) {
        console.log('Ошибка запроса', err);
    }
});
  • $.get(), $.post() — простые GET и POST запросы.
  • $.ajax() — универсальный метод с настройкой типа запроса, данных, заголовков и обработчиков.

Расширение функционала

Zepto можно расширять через плагины и собственные методы:

$.fn.highlight = function(color) {
    this.css('background-color', color);
    return this;
};

$('.item').highlight('yellow');
  • $.fn — объект для добавления методов к выбранным элементам.
  • Возврат this обеспечивает цепочки вызовов.

Организация кода с Zepto

Для крупных проектов рекомендуется структурировать код, разделяя функциональные модули и обработку событий:

var App = {
    init: function() {
        this.cacheElements();
        this.bindEvents();
        this.loadData();
    },
    cacheElements: function() {
        this.$menu = $('#menu');
        this.$content = $('#content');
    },
    bindEvents: function() {
        var self = this;
        this.$menu.on('click', 'li', function() {
            self.showContent($(this).data('id'));
        });
    },
    loadData: function() {
        var self = this;
        $.get('/api/items', function(items) {
            self.render(items);
        });
    },
    render: function(items) {
        this.$content.html(items.map(function(item) {
            return '<div>' + item.name + '</div>';
        }).join(''));
    },
    showContent: function(id) {
        console.log('Показ содержимого для', id);
    }
};

$(function() {
    App.init();
});
  • Кэширование элементов — уменьшает количество выборок в DOM.
  • Модулизация — разделение функций по назначению (инициализация, обработка событий, рендеринг).
  • Использование this и замыканий — сохраняет контекст внутри обработчиков.
  • Цепочки вызовов — делают код компактным и читаемым.

Работа с мобильными событиями

Zepto поддерживает события сенсорных экранов:

$('#swipeArea').on('swipeLeft', function() {
    console.log('Свайп влево');
});
$('#tapButton').on('tap', function() {
    console.log('Нажатие на кнопку');
});
  • Основные события: tap, doubleTap, swipe, swipeLeft, swipeRight.
  • Полезно для адаптивного интерфейса и мобильных приложений.

Полезные методы утилит

Zepto содержит набор вспомогательных функций:

$.each([1, 2, 3], function(index, value) {
    console.log(index, value);
});

var merged = $.extend({a: 1}, {b: 2}, {a: 3}); // {a: 3, b: 2}
  • $.each() — перебор массивов и объектов.
  • $.extend() — объединение объектов, часто используется для настроек плагинов.
  • $.isArray(), $.isFunction(), $.isPlainObject() — проверка типов.

Интеграция с модульной структурой

Для поддержки модульной архитектуры Zepto может использоваться совместно с шаблонизаторами и сборщиками:

define(['zepto'], function($) {
    var Module = {
        init: function() {
            $('#btn').on('click', this.handleClick);
        },
        handleClick: function() {
            alert('Модуль активирован');
        }
    };
    return Module;
});
  • Позволяет интегрировать Zepto в RequireJS, Webpack или другие системы модулей.
  • Упрощает поддержку больших приложений.
Оглавление