/jsCore

lightweight and cross-browser JavaScript library

Primary LanguageJavaScriptMIT LicenseMIT

jsCore logotypeРеинкарнация моего старого проекта js-core. Появились время, знания и желания развивать фреймворк дальше. За прошедшие 2,5 года взгляды на JavaScript-программирование немного поменялись, я больше не буду фапать на результаты тестов, где 100500 раз выполняется одно и тоже действие, и писать код так, чтобы в этих тестах на несколько миллисекунд обогнать какой-нибудь jQuery, вместо этого уделю внимание структурированию и документированию кода.

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

Цепочки методов

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

<div id="example-1">example 1</div>
$("#example-1").append("h1").text("test")

Выполнив такой JavaScript-код с использованием jsCore получим:

<div id="example-1">
    <h1>test</h1>
</div>

А jQuery даст другой результат:

<div id="example-1">test</div>

Так произойдет потому, что jsCore, после добавления <h1>, в отличие от jQuery, переключится на новый элемент и добавит в него текст test, а jQuery, добавив <h1>, тут же заменит его на текстовый узел test, продолжив работать с начальным элементом <div id="example-1">.

Действия для коллекции и одного элемента

jQuery всегда работает с коллекцией элементов, даже если точно известно, что элемент один. Эта особенность часто затрудняет отладку, например:

$("#example-2").addClass("active")

В случае отсутствия элемента #example-2, не произойдет никакой ошибки, цикл конечно же не выполнить ни одной итерации по пустой коллекции, и метод addClass ни разу не будет вызван, а хотелось бы получить в консоли сообщение о том, что какое-то внутреннее свойство null, как это происходит без использования библиотеки:

var node = document.getElementById("#example-2");
node.classList.add("active") //TypeError: node is null

Мне приходилось встречать в кодах коллег забытые цепочки, которые ничего не выполняли, для них больше не существовало DOM-элементов… Еще одним моментом, вызывающим неудобства при использовании jQuery и вытекающим из первой проблемы, является то, что не видя селектор, по коду сложно определить для какого количества элементов он написан.

В jsCore я постараюсь избавиться от этих проблем, уйдя от погони за супер-универсальностью функции $ и разделив методы для работы с одним элементом и коллекцией. Будет две глобальных функции, возвращающих обёртки с разными прототипами:

$(".example-3") // -> {src: document.querySelector(".example-3")}
    .addClass(...)
    .append(...)
    .hide(...)
    ...

$$(".example-3") // -> {src: document.querySelectorAll(".example-3")}
    .filter(...)
    .each(...)
    .odd(...)
    ...

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

$$(".example-3").each("addClass", "active")

Таким образом метод addClass будет вызван для каждого элемента коллекции. Тот факт, что работа идет несколькими элементами, будет наглядно продемонстрирована использованием метода each.

Один элемент:

$(".example-3").addClass("active");

Коллекция элементов:

$$(".example-3").each("addClass", "active");

Селекторы

Все браузеры обзавелись поддержкой Selectors API, поэтому, несмотря на мою неприязнь к использованию поиска элементов по селекторам в JavaScript, функция $ будет принимать селектор, а не идентификатор узла, как в старой версии фреймворка. Для IE7 добавлю поддержку только самых простых селекторов, например:

tag#id.class[attr^="value"], a[rel]...

Поиск потомков и дочерних элементов будет выполнятся с помощью методов descendants и children соответственно.

Другое

Никаких аналогов live и прочего ненужного мусора в jsCore не будет.

Отвечу на вопросы по email: dmitry.korobkin@gmail.com или ICQ: 644768