[Из песочницы] Even more jQuery?
За последние несколько лет я полюбил язык Javascript. Мне прекрасно известно, сколько вокруг него обсуждений и холиваров. И я прекрасно знаю его назначение, где он может быть применим, а где нет.Все мы хоть раз слышали о jQuery. С некоторых пор я буквально влюбился в это творение, как и в сам JavaScript. За моей спиной очень много строк кода. Рабочего, любительского, простого фонарного кода. С недавних пор я начал изучать структуру всеми любимой jQuery и пришёл к выводу, что это ничто иное, как шедевр.
Почему здесь эта статья? На моём счету немало разработок, которыми я пытался упростить себе процесс программирования, многие из них были jQuery-like. Но увы, разработка и поддержка останавливалась и забрасывалась в силу моей занятости и они так и не вышли за пределы моего жесткого диска.Некоторое время назад мне, уже будучи неплохо ознакомленному со структурой jQuery, пришла в голову мысль: что если сделать конструктор, где мы сами будем указывать функцию, которая будет подбирать для нас необходимые данные и собирать их в объект jQuery? Нет, здесь нет никакой речи о селекторном разборе веб-страниц, об анимациях, ajax и прочих плюшках и вкусностях jQuery. Я подумал: что если наша библиотека будет подстраиваться под требования программиста (будь то перебор банальных чисел, строк, объектов с данными или даже файлов) вне зависимости от платформы, на которой запущен данный код?
Так пришла идея собрать этот небольшой фреймворк.
Давайте разберемся, что к чему.
jQuery Builder — это микрофреймворк, предназначенный для создания jQuery-like библиотек для манипуляции различными данными. На данный момент я пока решил унаследовать класс jQuery от родного js-массива, но в будущем это будет исключено и будут созданы свои аналоги стандартных методов.
Приведу пару простых примеров:
Пример №1. Предположим, у нас есть массив данных, из которого нам нужно сформировать jQuery-объект с необходимыми методами. Пусть это будут банальные числа.
Код // Наши числа var numbers = [4, 8, 15, 16, 23, 42, 108];
// Сам конструктор var builder = new JQueryBuilder (function (selector) { // Перебираем числа for (var i = 0; i < numbers.length; i++) { // Проверяем селектор switch (selector) { // Если мы ищем чётные числа case 'even' : // ... и число подходит под требования if (numbers[i] % 2 === 0) { // Добавляем его в выборку this.push(numbers[i]); } break; // Если мы ищем нечётные числа case 'odd' : // ... и число подходит под требования if (numbers[i] % 2 !== 0) { // Добавляем его в выборку this.push(numbers[i]); } break; } } }); Поле jQuery содержит в себе необходимый нам объект (если быть точнее, это функция), где будет содержаться наша выборка и необходимые методы (из jQuery.fn).Итак, мы только что выполнили первую основную задачу — мы сформировали наш конструктор. Он представляет из себя функцию, в которой исполняется цикл, перебирающий наш массив. При соответствии числа нашим требованиям число будет добавлено в выборку.
Теперь создадим новый метод. Всё делается точно так же как в настоящем jQuery — через объект fn.
Код var $ = builder.jQuery; $.fn.add = function (value) { var self = this; return this.each (function (i) { self[i] += value; }); }; var result = $('even').add (5); console.log (result); // [9, 13, 21, 47, 113] Ожидаю в комментариях эту картинку, однако здесь всё гораздо приятнее. Данная библиотека, по моему мнению, может оказаться полезной для быстрого нахождения решения частых (и не только) задач касательно массивов.Пример №2. Теперь проделаем что-то подобное со строками.
Код var $ = jQueryBuilder.fromArray ().jQuery; $.fn.extend ({ reverse: function () { var self = this; return this.each (function (i) { var result = ''; for (var x = self[i].length — 1; x >= 0; x--) { result += self[i][x]; } self[i] = result; }); }, upper: function () { var self = this; return this.each (function (i) { self[i] = this.toUpperCase (); }); }, lower: function () { var self = this; return this.each (function (i) { self[i] = this.toLowerCase (); }); } }); var result = $('abcde', 'xyZ', 'HAAR') .reverse () .lower () ;
console.log (result); // [«edcba», «zyx», «raah»] На мой взгляд, всё очень просто и понятно. В следующей статье я расскажу, как применил эту библиотеку к Adobe After Effects, в котором есть возможность писать скрипты на Javascript. Получился эдакий jQuery для перебора и управления слоями в композиции. В ближайшем будуем планирую изучить скриптинг Фотошопа и разработать аналог для него.Репозиторий тут. Обещаю постепенно дополнять примерами.
Спасибо за внимание.
UPD.Сейчас плотно изучаю Coffeescript. Планирую переписать Builder на него.
