js-core JavaScript framework
 Хочу рассказать Вам о своём JavaScript-фреймворке.
js-core разрабатывался с целью создать быструю и лёгкую JavaScript-библиотеку для кросс-браузерной работы с DOM, CSS и AJAX, обладающую минимальным и достаточным функционалом.
Фреймворк спроектирован так, чтобы не вызывать конфликтов с другими скриптами и библиотеками. Не затрагивает ни один из встроенных объектов.
- Internet Explorer 6+
- Mozilla Firefox 2+
- Opera 9.2+
- Safari 3+
- Google Chrome
Доступ ко всем методам фреймворка возможен через глобальную функцию-объект core или короткую ссылку $. Если вы уже используете функцию с именем $ и создали её до подключения js-core, то ваша функция не будет перезаписана и воспользоваться средствами фреймворка будет возможно только по ссылке core, тогда, чтобы пользоваться ссылкой $, как функцией фреймворка js-core, достаточно весь код заключить в следующую обёртку:
(function($) {
$(…) // – функция фреймворка js-core
})(core);
Фунция $, так же являясь объектом, имеет набор методов и свойств:
$(…) // используем $, как функцию
$.method(…) // используем $, как объект
Функция $ принимает в качестве агрумента строку с именем идентификатора элемента или ссылку на DOM-элемент:
$('elementID') // найти элемент по идентификатору
$(document.body) // просто создать объект core, для ссылки на элемент body
Ссылка на элемент запоминается в свойство node текущего экземпляра объекта core:
var obj = $(document.body); // → {node: document.body}
Через прототип этого объекта доступен набор методов для работы с node:
obj.hide() // скрыть элемент node
obj.remove() // удалить элемент node
obj.html('string') // заменить node.innerHTML на string
и еще много других методов.
В отличие от других JavaScript framework'ов, в js-core нет механизма поиска элементов с использованием синтаксиса CSS-селекторов. Такой функционал был специально исключен из ядра фреймворка, чтобы уменьшить объём кода и сохранить производительность. В большинстве случаев алгоритм, позволяющий выполнить поиск элементов по CSS-селекторам, является слишком избыточным, а иногда и медленным, большая часть кода остается не востребованной и лежит в проекте «мертвым грузом», так как правильно спроектированные JavaScript-приложения должны в меньшей степени зависеть от вёрстки документа, а значит будет достаточно иметь набор методов, выполняющих поиск элементов по именам тегов, CSS-классов и значениям атрибутов:
$('elementID') // поиск элемента по имени идентификатора
$.tag('h1 h2 h3 h4 h5 h6') // поиск элементов по именам тегов
$.findClass('class1 class2') // поиск элементов по именам CSS-классов
$.find({type: 'submit'}) // поиск элементов по значениям атрибутов
js-core похож на jQuery не только именами методов, но и возможностью строить цепочки из последовательного вызова методов, однако, принцип работы цепочек кардинально отличается.
Рассмотрим на примере пустого документа:
<body></body>
Создадим и выполним похожие цепочки вызовов для jQuery и js-core:
// jQuery
$(document.body).append('<div>').html('text');
// js-core
$(document.body).append('div').html('text');
Казалось бы эти 2 примера, приведенные выше, сделают одно и тоже, но в случае с jQuery получим:
<body>text</body>
Элемент div был создан и тут же перезаписан переданной в метод html строкой, так как работа идет с первым звеном цепочки.
А js-core сделает следующее:
<body>
<div>text</div>
</body>
Более ожидаемый результат, не так ли? Все потому, что цепочки вызовов в js-core могут изменять контекст вызова, работа идет последовательно.
Допустим есть следующий HTML-код:
<div id="container"></div>
Построим и выполним цепочку вызовов методов для js-core:
$("container") // this → HTMLDivElement#container
.append("fieldset") // this → HTMLFieldsetElement
.append("p") // this → HTMLParagraphElement
.prepend("span") // this → HTMLSpanElement
.text("Пример") // this → HTMLSpanElement
Получим:
<div id="container">
<fieldset>
<p>
<span>Пример</span>
</p>
</fieldset>
</div>
Фреймворк js-core, в отличие от jQuery, позволяет различать работу с одним элементом или набором.
// jQuery
$('#elementID').addClass('myClass') // работа с набор элементов,
// хотя элемент с идентификатором
// elementID всего один
// js-core
$('elementID').addClass('myClass') // работа с одним элементом
jQuery запустит механизм, который должен выполнить указанный метод addClass для всего набора элементов, не смотря на то, что в списке всего один узел.
В следующем примере видно, каким образом js-core позволяет выполнить указанный метод для набора элементов:
// jQuery
$('div').addClass('myClass')
// js-core
$.tag('div').each('addClass', 'myClass');
Кода немного больше, но он более наглядный и быстрый.
- Полный список методов JavaScript framework'а js-core вы сможете найти в документации.
- Специально подготовлено несколько наглядных примеров использования js-core.
- Скачать фреймворк можно на сайте проекта или в сервисе Google Code.
|
почему не подходил jQuery ?
Не совсем понятны причины побудившие к написанию этого фреймворка!
Могу предположить, что это размер. Но хотелось бы услышать от Вас пояснения.
Спасибо!
Изучила код - и вижу, что в общих чертах синтаксис jQuery сохранен - насколько велика совместимость? Т.е. возможно ли использование некоторых плагинов jQuery совместно с данным фреймворком - ну тех где допустим не используется анимация и ajax?
идея сделать типа jQuery simple очень понравилась - т.е. использование для сборки доп. модулей как в mootools - только необходимое. А то 30 килобайт это довольно много уже для некоторых случаев!
покажи хоть один плаин, где они не используются ;-)
Нет, расширения «jQuery» не работают с «js-core» и из-за того, что названия большинства методов совпадают, они будут конфликтовать при совместном использовании.
jQuery помешательство )
Если есть jQuery, то резон юзать этот фремверк?
"«jQuery» вообще не работает в IE5.5"
Уже Ие 5.5 никто не пользуется, или полюзуютс мамонты....
И вообще пора бы уже перестать использовать этот дырявый браузер.
Roksa gruiec
Agnes roksa
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.