За последние несколько лет я полюбил язык 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 'even' :
// ... и число подходит под требования
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 для перебора и управления слоями в композиции.
Репозиторий тут. Обещаю постепенно дополнять примерами.
Спасибо за внимание.
Автор: Serabas
