В браузерах, поддерживающих «Element Traversal», доступны новые методы:

• firstElementChild — первый дочерний элементы;
• lastElementChild — последний дочерний элементы;
• nextElementSibling — следующий элементы;
• previousElementSibling — предыдущий элементы;
• childElementCount — количество дочерних элементов.

Эти методы работают с узлами, у которых nodeType == 1, например, метод childElementCount показывает не сколько всего дочерних узлов, а количество дочерних элементов, т. е. узлов с nodeType == 1.

Все конечно хорошо и удобно, но нельзя забывать о огромной армии пользователей старых браузеров, поэтому напишем функции, которые позволят кросс-браузерно выполнять поиск дочерних элементов.

Для начала проверим, поддерживает ли браузер интерфейс «Element Traversal»?

var traversal = typeof document
                           .createElement('div')
                               .childElementCount != 'undefined';

В итоге переменная traversal будет иметь значение true или false, опираясь на которое мы будем выбирать, какой из способов перемещения по DOM-дереву использовать.

Следующая функция будет искать первый дочерний элемент:

var firstChild = traversal ? function(node) {
    // для новых браузеров достаточно
    // воспользоваться встроенным методом
    return node.firstElementChild;
} : function(node) {
    // для старых браузеров
    // находим первый дочерний узел
    node = node.firstChild;
    // ищем в цикле следующий узел,
    // пока не встретим элемент с nodeType == 1
    while(node && node.nodeType != 1) node = node.nextSibling;
    // возвращаем результат
    return node;
};

Рассмотрим простой пример использования:

XHTML

<div id="test">
    text node
    <div>First</div>
    text node
    <div>Last</div>
    text node
</div>

JavaScript

var node = document.getElementById('test');
var text = firstChild(node).innerHTML;
alert(text); // → First

Аналогично будет выглядет функция lastChild:

var lastChild = traversal ? function(node) {
    return node.lastElementChild;
} : function(node) {
    node = node.lastChild;
    while(node && node.nodeType != 1) node = node.previousSibling;
    return node;
};

Используем:

text = lastChild(node).innerHTML;
alert(text); // → Last

Назовем функции поиска следующего и предыдущего элемента «next» и «previous» соответственно:

var next = traversal ? function(node) {
    return node.nextElementSibling;
} : function(node) {
    while(node = node.nextSibling) if(node.nodeType == 1) break;
    return node;
};
var previous = traversal ? function(node) {
    return node.previousElementSibling;
} : function(node) {
    while(node = node.previousSibling) if(node.nodeType == 1) break;
    return node;
};

И рассмотрим их работу на простеньком примере:

XHTML

<div>
    text node
    <div id="first">First</div>
    text node
    <div id="last">Last</div>
    text node
</div>

JavaScript

var node = document.getElementById('first');
var text = next(node).innerHTML;
alert(text); // → Last
node = document.getElementById('last');
text = previous(node).innerHTML;
alert(text); // → First

Чтобы получить коллекцию дочерних узлов, среди которых могут содержаться, ненужные нам текстовые узлы, в интерфейсе DOM предусмотрен метод childNodes, но большинство браузеров поддерживает и более удобный метод children, который возвращает коллекцию, состоящую только из элементов.

Проверим, поддерживает ли браузер метод children?

var children = typeof document
                          .createElement('div')
                              .children != 'undefined';

И напишем функцию поиска:

var child = children ? function(node) {
    return node.children;
} : function(node) {
    var list = node.childNodes,
    length = list.length,
    i = -1,
    array = [];
    while(++i < length)
        if(list[i].nodeType == 1)
            array.push(list[i]);
    return array;
};

Ну и конечно рассмотрим работу на примере:

XHTML

<div id="test">
    text node
    <div>First</div>
    text node
    <div>Last</div>
    text node
</div>

JavaScript

var node = document.getElementById('test');
var count = child(node).length;
alert(count); // → 2

Все эти методы, но в более функциональном виде, используются в новых версиях JavaScript фреймворка js-core. А так же, для поиска всех дочерних элементов по имени CSS-класса, атрибутам или просто по имени тега, когда это возможно, используется «Selectors API», что позволяет добиться хороших результатов в тестах на производительность.

Кстати, Microsoft как всегда «радует», в Internet Explorer 8 RC1 синтаксис методов querySelector и querySelectorAll ограничен версией CSS2

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

В рамках акции «Обмен постовыми»:

• Молодой блог об IT — kSM’s blog.

Возьмем готовые решения Sizzle, Peppy и Yass, и сделаем расширение для js-core, которое будет автоматически преобразовывать список элементов, выдаваемый этими движками, в объект для работы со списками узлов, предусмотренный в framework’е.

Sizzle

core.query = function(selector, context) {
    return new core.list(Sizzle(selector, context), false);
};
core.prototype.query = function(selector) {
    return new core.list(Sizzle(selector, this.node), false);
};

Peppy

core.query = function(selector, context) {
    return new core.list(peppy.query(selector, context), false);
};
core.prototype.query = function(selector) {
    return new core.list(peppy.query(selector, this.node), false);
};

Yass

core.query = function(selector, context) {
    return new core.list(yass(selector, context), false);
};
core.prototype.query = function(selector) {
    return new core.list(yass(selector, this.node), false);
};

Добавьте одно из этих расширений сразу после загрузки js-core и соответствующего движка выборки элементов по CSS-селекторам.

Рассмотрим, как это можно использовать. Возьмем следующий XHTML-код:

<ul id="list">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Fourth list item</li>
    <li>Fifth list item</li>
    <li>Sixth list item</li>
    <li>Seventh list item</li>
    <li>Eighth list item</li>
</ul>

Опишем CSS-класс:

.odd {
    background: #ffc;
}

Теперь, с помощью JavaScript, добавим класс odd всем нечетным элементам списка list:

$.query('#list > li:nth-child(odd)').each('addClass', 'odd');

// или
$('list').query('li:nth-child(odd)').each('addClass', 'odd');

Получим так называемую «зебру» из элементов списка:

<ul id="list">
    <li class="odd">First list item</li>
    <li>Second list item</li>
    <li class="odd">Third list item</li>
    <li>Fourth list item</li>
    <li class="odd">Fifth list item</li>
    <li>Sixth list item</li>
    <li class="odd">Seventh list item</li>
    <li>Eighth list item</li>
</ul>

В функции $.query(…) вторым параметром можно указать контекст поиска. Это бывает удобно, например, при поиске элементов ввода внутри форм или нахождении элементов в XML-данных, пришедших с сервера через AJAX.

// найти все чекбоксы в первой форме документа
$.query('input[type="checkbox"]', document.forms[0]);

В методе $('id'|node).query('selector'), в качестве контекста поиска, автоматически передается текущий элемент.

Скачать: пример, js-core.

В рамках акции «Обмен постовыми»:

• Записки микростокового иллюстратора — блог о том, как еще можно заработать в сети.

Теперь, пройдя множество исправлений, дополнений и модификаций, js-core вполне может использоваться в проектах любой сложности, обеспечивая достойный уровень производительности. В версии 2.7 структура фреймворка была полностью изменена, он не будет вызывать конфликты с другими скриптами, из-за внедрения пользовательских методов в прототипы встроенных объектов JavaScript. В глобальное пространство имен помещается только один объект с ссылками core и $ на него. Появилась возможность работы со списками узлов.

Содержание

• Функция $(…) — получение элемента по идентификатору, кэширование
• Цепочки — последовательный вызов методов
• Текущий элемент, контекст вызова
• Обработка событий
  • Добавление/удаление обработчиков событий
  • Работа с объектом-событие
    • События мыши
    • События клавиатуры
    • Стандартное действие браузера и всплывание событий
• Работа со списками элементов
• Методы js-core
  • Методы доступные через прототип функции core(…) или $(…)
  • Методы и атрибуты объекта core или $
  • Методы работы с таймером
  • Методы работы со списками узлов
  • Методы работы с объектом-событие
  • Методы работы c AJAX
• Создание расширений для js-core
• Что дальше?
• Скачать

Функция $(…) — получение элемента по идентификатору, кэширование

Допустим, у нас есть следующий XHTML-код:

<div id="container"></div>

Чтобы получить ссылку на узел <div&gt; с идентификатором container, в JavaScript предусмотрен метод getElementById(…) объекта document:

var node = document.getElementById('container');

Существует очень распространенная функция, сокращающая эту запись:

function $(id) {
    return document.getElementById(id);
}

Или более сложный вариант:

function $(arg) {
    return typeof arg == 'string' ? document.getElementById(arg) : arg;
}

В таком виде функция $(…) просто сокращает запись метода getElementById(…), предавая прямую ссылку на узел.

В js-core функции core(…) и $(…) эквивалентны, и возвращают новую копию объекта core, содержащую ссылку на указанный узел. Таким образом, через прототип объекта core для этого узла становится доступен набор методов, позволяющих производить манипуляции с DOM, добавлять обработчики событий и изменять стили элемента.

Выполним следующий код, с использованием фреймворка:

var obj = $('container')

// или
var obj = core('container')

// или
var obj = new $('container')

// или
var obj = new core('container')

Все эти варианты абсолютно равнозначны, только, последние 2 теоретически должны выполнится быстрее, т. к. первые просто рекурсивно вызывают функцию core в конструкторе new. В результате переменная obj будет ссылкой на объект следующего вида:

{node: HTMLDivElement}

Такой объект можно бы было получить, например, такми образом:

var obj = {node: document.getElementById('container')}

Но у созданного при помощи функции core(…) или $(…), входящих в состав js-core, объекта есть одно важное отличие — наличие специальных методов в прототипе, доступ к которым осуществляется так же, как и к любым другим методам объектов в JavaScript:

$('container').hide()

// или
$('container')['hide']()

Забегая вперед, скажу, что метод hide(…) просто скрывает указанный элемент.

Чтобы получить прямую ссылку на DOM-узел, достаточно написать:

var node = $('container').node

Так же в любой момент можно беспрепятственно воспользоваться этой ссылкой в уже созданном, функциями core(…) или $(…), объекте:

var obj = $('container')
var node = obj.node

Если отправить в функцию core(…) или $(…) не строку, содержащую имя идентификатора узла, а ссылку на узел, то она автоматически будет запомнена в том же атрибуте node:

var obj = $(document.getElementById('container'))
alert(obj.node.id) // выдаст сообщение "container"

Все ссылки на элементы, полученные по идентификатору, помещаются в кэш. Кэш очищается каждый раз, когда выполняется удаление DOM-узлов или изменение идентификатора средствами фреймворка. Если вы производили какие-либо манипуляции с DOM и у вас возникли проблемы из-за наличия в кэше ссылок на удаленные узлы, достаточно просто инициализировать кэш ссылкой на новый объект:

$.cache = {}

Или выполнить функцию $.clear(…), передав в нее в качестве аргумента, ссылку на изменяемый узел:

$.clear(document.getElementById('container'))

Если вы уже используете функцию $(…), то js-core не заменит её, если она будет создана до подключения фреймворка. В этом случае можно использовать функцию core(…) или заключить код, использующий js-core в функцию-обертку:

(function($) {
    // Здесь $(…) — функция фреймворка "js-core"
})(core);

Цепочки — последовательный вызов методов

JavaScript позволяет реализовать последовательный вызов методов, называемый «цепочками вызовов». В js-core активно используется эта возможно, что позволяет в некоторых случаях обойтись без дополнительных переменных. Рассмотрим это на простом примере, добавим элементу с идентификатором container CSS-класс highlight и какой-то текст:

$('container').addClass('highlight').text('Пример')

// или
$('container').text('Пример').addClass('highlight')

В какой последовательности вызывать методы, работающие с одним и тем же узлом, в данном случае, не имеет значения.

В результате получим:

<div id="container" class="highlight">Пример</div>

Цепочку можно продолжать, вызывая доступные методы.

Если все-таки необходимо запомнить ссылку на объект в переменную, то можно сделать это несколькими способами:

var obj = $('container')
obj.addClass('highlight').text('Пример')

// или
var obj = $('container').text('Пример').addClass('highlight')

Второй вариант возможен ввиду того, что методы возвращают объект, созданный на первом звене цепочки вызовов. Но, так происходит не всегда, в фреймворке есть функции, которые могут либо обрывать цепочку, возвращая какое-то значение, либо продолжать цепочку, но работая уже с новым объектом.

Допустим, у нас есть следующий XHTML-код:

<div id="container">Пример</div>

Добавим элементу с идентификатором container CSS-класс highlight и сохраним в переменную содержащийся в нем текст:

var text = $('container').addClass('highlight').text()
alert(text) // выдаст сообщение "Пример"

Вызванный метод text(), без параметров, обрывает цепочку и возвращает innerText текущего узла.

Другой тип функций передает в цепочке новый объект, содержащий, например, ссылку на добавленный элемент:

var obj = $('container').addClass('highlight').append('span')

В результате в переменной obj будет находиться ссылка на HTMLSpanElement, а не HTMLDivElement, таким образом, можно продолжить цепочку:

var obj = $('container').addClass('highlight')
                        .append('span').text('Добавленный текст')

Переменная obj все так же будет содержать ссылку на HTMLSpanElement, так как метод text вернет предыдущий в цепочке объект, созданный функцией append(…).

XHTML-код приобретет следующий вид:

<div id="container" class="highlight">
    Пример
    <span>Добавленный текст</span>
</div>

Текущий элемент, контекст вызова

Из предыдущего примера видно, что элемент, с которым идет работа в цепочке вызовов, может изменяться. Соответственно изменяется и контекст вызова функций this, происходит это следующим образом:

$('container')      // this → HTMLDivElement
.append('fieldset') // this → HTMLFieldsetElement
.append('p')        // this → HTMLParagraphElement
.prepend('span')    // this → HTMLSpanElement
.text('Пример')     // this → HTMLSpanElement

Получим XHTML-код:

<div id="container">
    <fieldset>
        <p>
            <span>Пример</span>
        </p>
    </fieldset>
</div>

Таким образом, можно выполнить код последовательно, для каждого элемента, не запоминая ссылку на него в переменную:

$('container').exist(function() {
    // this → HTMLDivElement
}).append('fieldset').exist(function() {
    // this → HTMLFieldsetElement
}).append('p').exist(function() {
    // this → HTMLParagraphElement
}).prepend('span').exist(function() {
    // this → HTMLSpanElement
}).text('Пример') // this → HTMLSpanElement

Метод exist(…) проверяет наличие элемента и запускает callback-функйцию, которая вызывается в контексте текущего узла.

Обработка событий

Кросс-браузерная обработка событий, наверное, одна из самых сложных частей фреймворка, как для понимания, так и в плане реализации.

Добавление/удаление обработчиков событий

В Internet Explorer, в отличие от других браузеров, выполняемые по событию функции, добавленные методом attachEvent(…), не получают в качестве первого аргумента объект-событие и не вызываются в контексте элемента, к событию которого «привязаны». Чтобы частично решить эту проблему в js-core все анонимные функции, добавляемые в обработчик события какого-либо элемента, автоматически вызываются в контексте этого элемента, а для получения объекта-событие предусмотрены специальные методы, о которых позже.

Добавим обработчик события click для узла с идентификатором container:

$('container').bind('click', function() {
    // this → HTMLDivElement
})

Для анонимной функции, переданной в метод bind(…), в Internet Explorer будет автоматически добавлена «обертка», вызывающая эту функцию в контексте узла с идентификатором container. Чтобы иметь возможность удалить функцию из обработчика события, т. е. выполнить метод removeEventListener(…)/detachEvent(…), для именованных функций такая обертка не добавляется, но предусмотрен специальный метод context(…), который можно использовать следующим образом:

function test() {
    // this → HTMLDivElement
}
var obj = $('container')
var func = $.context(test, obj.node)
obj.bind('click', func) // добавляем обработчик события
…
obj.unbind('click', func) // удаляем обработчик события

Немного неудобно, но лучшего варианта, сохраняющего возможность удаления обработчиков событий, нет. Для тех, кто хорошо разбирается в JavaScript, приведу более короткий вариант кода, который выполняет тоже самое:

var func, obj = $('container');
obj.bind('click', (func = $.context(function() {
    // this → HTMLDivElement
}, obj.node))) // добавляем обработчик события
…
obj.unbind('click', func) // удаляем обработчик события

Работа с объектом-событие

Для работы с объектом-событие предусмотрен метод $.event(…), который возвращает, так же как и в случае с функцией $(…), специальную обертку, содержащую ссылку на этот объект, через прототип которой доступны методы для работы с событием.

Получить объект-событие можно несколькими способами:

$('container').bind('mousedown', function(eventObject) {
    eventObject = eventObject || window.event
    $.event(eventObject)
})

// или
$('container').bind('mousedown', function(eventObject) {
    var eventObject = arguments[0] || window.event
    $.event(eventObject)
})

// или
$('container').bind('mousedown', function(eventObject) {
    $.event(eventObject)
})

// или
$('container').bind('mousedown', function() {
    $.event(arguments[0])
})

Все эти варианты успешно сработают. Далее в примерах будем использовать последний вариант.

События мыши

$('container').bind('mousedown', function() {
    var eventObj = $.event(arguments[0]) // обертка для объекта-событие
    eventObj.object // ссылка на объект-событие
    eventObj.mouseButton() // выдаст "left", "middle" или "right"
    eventObj.mousePosition() // вернет объект {x: число, y: число}
    eventObj.mousePosition().x // координата курсора по оси OX
    eventObj.mousePosition().y // координата курсора по оси OY
    eventObj.target() // текущий элемент, при всплывании события
    this // ссылка на <div> c идентификатором "container"
})

События клавиатуры

$(document).bind('keydown', function() {
    $.event(arguments[0]).key() // код нажатой клавиши
 })

Стандартное действие браузера и всплывание событий

$(document.forms[0]).bind('submit', function() {
    var eventObj = $.event(arguments[0])
    eventObj.preventDefault() // предотвращает стандартное действие
    eventObj.stopPropagation() // останавливает "всплывание" события
    eventObj.stop() // выполняет 2 предыдущих метода
})

Для управления предотвращением стандартного действия браузера (preventDefualt/returnValue), методы bind(…) и unbind(…) могут принимать, в качестве 3-го параметра, значения true или false, а так же предусмотрен специальный метод useDefault(…):

// выполнять автоматически preventDefault
$(document.forms[0]).bind('submit', func, false)

// отменить автоматическое срабатывание preventDefault
$(document.forms[0]).useDefault('submit', true)

Работа со списками элементов

Еще одна функция-конструктор $.list(…) создает обертку для списка DOM-элементов (узлов с nodeType == 1) и предоставляет набор методов:

var list = $.list(document.getElementsByTagName('div'))

// или
var list = new $.list(document.getElementsByTagName('div'))

Если отправить в функцию набор, содержащий не только элементы, но и текстовые узлы, то она автоматически оставит в списке только элементы:

var list = $.list(document.body.childNodes)

Так же, в качестве второго аргумента, можно указать значение false или функцию-фильтр. Если указано значение false, то автоматическая фильтрация узлов по значению свойства nodeType не производится, это может быть использовано для увеличения производительности, если вы уверены, что передаваемая вами коллекция элементов не содержит текстовых узлов. Функция-фильтр вызывается в контексте каждого элемента списка с nodeType == 1, для того чтобы включать элемент в список, функция должна вернуть значение true.

var list = $.list(document.getElementsByTagName('*'), false)

Рассмотрим работу варианта с функцией-фильтром на конкретном примере, допустим есть следующий XHTML-код:

<ul id="list-items">
    <li>1st list item</li>
    <li>2nd list item</li>
    <li>3rd list item</li>
    <li>4th list item</li>
    <li>5th list item</li>
</ul>

Добавим CSS-класс highlight всем четным элементам <li> в списке <ul> c идентификатором list-items:

$.list($('list-items').node.childNodes, function(i) {
    return i % 2 == 0;
}).each(function() {
    $(this).addClass('highlight');
})

Существуют способы сделать это короче:

$.list($('list-items').node.childNodes}).each(function(i) {
    if(i % 2 == 0) $(this).addClass('highlight')
});

// или
$.list($('list-items').node.childNodes, function(i) {
    return i % 2 == 0;
}).each('addClass', 'highlight')

// или
$('list-items').child().filter(function(i) {
    return i % 2 == 0;
}).each('addClass', 'highlight')

// или
$('list-items').child().each(function(i) {
    if(i % 2 == 0) $(this).addClass('highlight')
})

Как видим, некоторые методы (child, filter и др.) возвращают экземпляр объекта $.list.

Сам список можно получить следующим образом:

var items = $.list(document.body.childNodes).items

Остальные методы работы со списками смотрите в таблице ниже.

Методы js-core

Разобьем методы на группы по объектам, к которым они относятся.

Методы доступные через прототип функции core(…) или $(…)

$(document.body).append('h1').text('Пример');

Методы и атрибуты объекта core или $

Как бы странно это не звучало, но в JavaScript такое возможно, любая функция одновременно является объектом и может изменть свои атрибуты и методы. Использовать их можно следующим образом:

$.ready(func) // выполнить функцию по событию "DOMContentLoaded"
$.t('h1 h2 h3 h4 h5 h6') // получить все заголовки в документе
$.c('selected') // получить все элементы с классом "selected"

Подробнее обо всех методах объекта core или $ далее в таблице.

Методы работы с таймером

В js-core вводит специальный объект для более удобного использования встроенных методов setTimeout и setInterval. Получить этот объект можно при помощи функции конструктора $.timer(…) или core.timer(…):

// повторить выполнение функции 5 раз с задержкой 100 мс
$.timer(100, function() {…}).repeat(5)

// выполнять функцию с задержкой 50 мс
core.timer(50, function() {…}).start()

Подробнее, об остальных методах, в таблице ниже:

Методы работы со списками узлов

Все методы фреймворка для работы со списками узлов доступны через прототип функции $.list(…), которая может быть использована в качестве конструктора любым из представленных ниже способов:

var list = $.list(document.getElementsByTagName('div'))

// или
var list = new $.list(document.getElementsByTagName('div'))

// или
var list = core.list(document.getElementsByTagName('div'))

// или
var list = new core.list(document.getElementsByTagName('div'))

Некоторые функции фреймворка автоматически создают подобные списки, например:

var list = $.t('div');

В результате в переменной list будет ссылка на объект, содержащий список узлов, над которым можно произвонить действия, например, добавим всем найденным элементам CSS-класс highlight:

list.each('addClass', 'highlight');

Подробнее обо всех методах функции-конструктора $.list(…) далее в таблице:

Методы работы с объектом-событие

Обработка событий, как говорилось ранее, один из самых трудных моментов, но используя js-core, вы избавить себя от ряда проблем.

function(e) {
    $.event(e).preventDefault();
}

Подробнее, об остальных методах, в таблице ниже:

Методы работы с AJAX

Для того чтобы получить доступ к методам для работы с AJAX в js-core, вам нужно подключить соответствующий модуль, который находится в отдельном файле. Такое разделение было сделано по причине того, что в дальнейшем планируется значительно увеличить функционал этого модуля, что неминуемо приведет к увеличению его размеров, но не каждое JavaScript-приложение использует AJAX для передачи данных.

На данный момент (версия модуля 0.2.5) доступно 4 метода, которые могут принимать следующие аргументы:

// объект с параметрами
var parametrs = {
    method: 'GET'|'POST',      // по умолчанию GET
    url: 'url-encoded-string', // по умолчанию location.href
    async: true|false,         // по умолчанию true
    user: 'string',            // по умолчанию null
    password: 'string',        // по умолчанию null
    params: {param: 'value'},  // по умолчанию null
    processData: true|false,   // по умолчанию false
    timeout: number,           // по умолчанию 0
    contentType: 'string',// по умолчанию application/x-www-form-urlencoded
    dataType: 'string',        // по умолчанию */*
    requestHeaders: {'name': 'content'}, // по умолчанию null
    protocol: 'string'         // по умолчанию http:
}
// callback-функции
function success(responseText [, xhr]) {...}
function error(responseText [, xhr]) {...}

Ни один из аргументов объекта parametrs не обязателен, как и callback-функции. Метод $(…).load(…) выполняет callback-функции в контексте текущего элемента, остальные — AJAX-объекта.

$('container').text('loading…').load(parametrs, success, error)

Не забывайте, что в JavaScript действует «правило одного источника», поэтому передачу данных можно производить только в переделах одного домена.

Создание расширений для js-core

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

core.prototype.newMethod = function() {
    // что-то делаем с this.node
    return this; // для обарзования цепочек
}

Добавим метод defaultValue(…), который служит, чтобы установить значение по умолчанию для элемента ввода:

core.prototype.defaultValue = function(str) {
    if(!this.node.value) this.node.value = str;
    return this.bind('focus', function() {
        if(this.value == str) this.value = '';
    }).bind('blur', function() {
        if(!core.trim(this.value)) this.value = str;
    });
};

// используем
$(HTMLInputElement).defaultValue('Найти');

Как видим, механизм расширения предельно прост, достаточно добавить свой метод в прототип объекта core, а для того, чтобы организовать возможность построения цепочек вызовов, можно вернуть в своем методе контекст вызова this.

Что дальше?

Я планирую поддерживать и развивать проект. За дальнейшими обновлениями следите на сайте www.js-core.ru. В скором времени там начнет появляться документация с примерами для каждого метода.

Дальнейшие планы по наращиванию функционала:

• Анимация (fadeIn, fadeOut, slideToggle), которую вы можете реализовать и сейчас, для этого есть набор необходимых методов (opacity, timer, hide, show и др.);
• Обработка форм, маскированный ввод;
• Расширение функциональности AJAX-модуля, внедрение глобальных AJAX-событий и очередей перезапускающихся запросов;
• Создание набора готовых элементов интерфейса;
• Подавление других фреймворков

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

На этом закончим статью, надеюсь, вам пришлись по вкусу способы, предлагаемые фреймворком js-core, решения задач, и на его основе вы будете создавать современные и динамичные сайты и веб-приложения.

Скачать

Скачать можно на странице проекта в сервисе Google Code или с сайта www.js-core.ru.

Так как я пока сомневаюсь, стоит ли мне писать подобный модуль для «js-core», потому что считаю, что вполне достаточно стандартных методов DOM для выбора нужных узлов, но всё-таки иногда бывают случаи, когда использование синтаксиса CSS-селекторов для этих целей очень удобно, я решил попробовать совместить мой фреймворк и библиотеку «Peppy». Как оказалось, все очень просто.

Никаких изменений в файле «peppy.js» делать не нужно, просто подключите его к проекту после «js-core-2.5.4.js». Затем, в файл, где у вас будет код проекта или расширения для «js-core», добавьте несколько строк:

_$.prototype.query = function(selectorGroups, includeRoot, recursed, flat) {
  return peppy.query(selectorGroups, this.node, includeRoot, recursed, flat);
};

$.query = peppy.query;

Все готово, теперь вы можете использовать все прелести CSS3-селекторов, предоставляемые «Peppy», совместно с фунционалом «js-core». Функция «query» возвращает список найденных элементов.

var list1 = $('id'|node).query('selector' [, …]);
var list2 = $.query('selector' [, …]);

Давайте рассмотрим какой-нибудь наглядный пример. Допустим у нас есть такой вот семантичный код формы:

<form id="my-form" action="">
  <fieldset>
    <label for="given-name">Given name: <input type="text" id="given-name" /></label>
    <label for="family-name">Family name: <input type="text" id="family-name" /></label>
    <label for="male">Male:</label>
    <ul id="male">
      <li><label for="man"><input type="radio" id="man" name="male" /> man</label></li>
      <li><label for="woman"><input type="radio" id="woman" name="male" /> woman</label></li>
    </ul>
    <input type="submit" value="Отправить" />
  </fieldset>
</form>

Теперь, чтобы получить все <input type="text" /> внутри «#my-form», достаточно написать:

var inputs = $('my-form').query('input:text');
// или
var inputs = $('my-form').query('input[type="text"]');

В этом случае в функцию «peppy.query» автоматически отправляется параметр «root» — ссылка на узел с идентификатором «my-form».

Метод «$.query(…)» будет в точности соответствовать «peppy.query(…)».

var labels = $.query('label[for="man"]', '#my-form');

Вот и всё, как видим ничего сложного, все просто и удобно

При разработке «js-core» я ориентировался на опытных программистов, поэтому постарался исключить как можно больше лишних проверок. Например, «jQuery» может автоматически подставить вместо переданного параметра «class» значение «className», либо позволить ввести сразу «className», в связи с чем, каждый раз при использовании метода «attr» идет проверка и подстановка соответствующего значения. Так же в «js-core» активно применяется расширение стандартных прототипов встроеных объектов, поэтому не забывайте делать проверку «hasOwnProperty» в конструкиции «for(…in…)». Чтобы не делать такую проверку в framework’е предумотрены методы «object.each(fn, [arg])», «$.foreach(object, fn)», а также реализован метод «array.forEach(fn, context)» для старых браузеров, не поддерживающих его.

Для начала, рассмотрим пример, демонстрирующий упрощенный принцип работы JavaScript framework’а.

// Глобальный объект с набором частоиспользуемых
// функций, на основе которых построено большинство
// методов framework'а.
var core = {
  // Определение версии «Internet Explorer»
  ie: 0 /*@cc_on + @_jscript_version * 10 % 10 @*/,
  // …
  // и другие атрибуты и методы.
  // …
};

// Главная функция-конструктор.
function _$(arg) {
  // В атрибут «node» нового объекта запоминаем ссылку на DOM-узел
  this.node = typeof arg == 'string' ? document.getElementById(arg) : arg;
}

// Методы работы с DOM-узлами,
// доступные через прототип функции «_$».
_$.prototype = {
  parent: function() {
    // Возвращаем новую копию объекта «_$»
    // с сылкой на родительский узел
    // текущего элемента.
    return new _$(this.node.parentNode);
  },
  html: function(html) {
    // Если указан входной параметр «html»,
    // то заменяем «innerHTML» текущего узла
    // на переданный во входном параметре.
    if(typeof html != 'undefined') {
      this.node.innerHTML = html;
      return this;
    }
    // Иначе возвращаем «innerHTML» текущего узла.
    else return this.node.innerHTML;
  },
  // …
  // здесь же и все остальные методы.
  // …
};

// Функция, сокращающа запись создания
// новой копии объекта «_$».
function $(arg) {
	return new _$(arg);
}

// Дополнительные методы
$.n = function(tag) {
	// Возвращаем новую копию объекта «_$»
	// с сылкой на новый узел с именем тега,
	// указанным в параметре «tag».
	return new _$(document.createElement(tag));
};

Как видим, каждый раз во время выполнения функции «$» происходит конструирование нового объекта, который содержит всего одну ссылку «node» на DOM-узел, но через прототип функции-конструктора «_$» для него доступен набор методов, работающих с текущим узлом по этой ссылке.

В «js-core» реализовано кэширование для ссылок на DOM-узлы, полученных по идентификатору. То есть метод «document.getElementById» выполняется всего один раз для каждого запрашиваемого узла с идентификатором. Это позволяет повысить производительность в некоторых ситуациях.

В весрии 2.5.1 реализовано более 50-и методов, позволяющих JavaScript-программисту сразу приступить к написанию веб-приложения, не затрачивая время на подготовку основы для его работы. Рассмотрим некоторые из них.

Функция $(…)

Для получения новой копии объекта «_$» используется функция «$(…)», которая может принимать строку, содержащую идентификатор или ссылку на DOM-узел. Допустим, у нас есть узел <DIV> с идентификатором «test», тогда мы можем выполнить следующее:

var obj = $('test');
// или
var node = document.getElementById('test');
var obj = $(node);

Далее, чтобы сократить запись, запомним, что все функции, возвращающие один узел, возвращают его в обертке — новой копии объекта «_$» c атрибутом «node», содержащим ссылку на этот DOM-узел. А функции, возвращающие набор значений, отдают нумерованный массив или «DOMNodeList» ссылок на узлы. Некоторые функции (css, attr) могут возвращать как одиночные значения, так и массивы, в зависимости от количества входящих параметров.

Функция exist(…)

В отличие от «jQuery» в «js-core» не проверяется каждый раз наличие элемента, поэтому если, попытаться выполнить некоторые методы с несуществующим узлом, произойдет ошибка. Для случаев, когда элемент может отсутствовать, предусмотрен метод «exist», который может принимать в качестве входных параметров 2 функции: 1-я выполнится, если указанный элемент существует, 2-я выполнится, если такой элемент отсутствует.

$('test').exist(
  function() {
    // По ссылке «this» доступен текущий DOM-узел
    $(this)…
  },
  function() {
    alert('Элемент отсутствует');
  }
);

Так же функцию «exist» можно вызывать без параметров. В этом случае она вернет логическое значение «true» или false».

if($('test').exist()) {…}

Функции append(…) и prepend(…)

Для добавления нового дочернего узла или перемещения уже существующего в список дочерних элементов текущего узла используются функции «append(…)» и «prepend(…)». Первая функция добавляет элемент в конец списка дочерних элементов, вторая — в начало.

$('test').append('h1');
// или
var node = document.createElement('h1');
$('test').append(node);
// а так же
var node = document.getElementById('some-id');
$('test').append(node);

Функции html(…) и text(…)

Можно продолжить предыдущую цепочку и сразу же добавить в новый дочерний узел какой-нибудь текст или HTML-код:

$('test').append('h1').text('Hello World!');
// или
$('test').append('h1').html('<span>Hello</span> World!');

Для тех, кто хорошо знает «jQuery» сразу становится видно отличие «js-core» в работе с элементами в пределах одной цепочки вызовов. В «jQuery» метод «html» заменил бы «innerHTML» DOM-элемента с идентификатором «test», а в «js-core» работа ведется с последним используемым узлом, в данном примере это заголовок первого уровня <H1>.

Функции after(…) и before(…)

Создают новый узел после (перед) текущим или переносят существующий.

$('test').after('p').text('example');
$('test').after(document.getElementById('some-id'));
$('test').before(document.createElement('span')).html('example');

Функции appendTo(…) и prependTo(…)

Переносят текущий узел в конец (начало) списка дочерних элементов узла, переданного в качестве входного параметра (ссылка на DOM-элемент или строка, содержащая идентификатор узла).

$('test').appendTo('some-id');
$('test').prependTo(document.body);

Функции insertAfter(…) и inserBefore(…)

Ставят текущий узел после (перед) указанного узла (ссылка на DOM-элемент или строка, содержащая идентификатор узла).

$('test').insertAfter(document.getElementsByTagName('div')[0]);
$('test').inserBefore('some-id');

Функции next(…) и prev(…)

Возвращают первый соседний справа или слева элемент. В качестве входного параметра может приниматься строка и именем тега. Если входной параметр не указан, то возвращается первый соседний узел с «nodeType == 1».

$('test').next('blockquote');
$('test').prev();

Если соседний элемент отсутствует, функция вернет «undefined».

Функция child(…)

Возвращает массив дочерних элементов. Для фильтрации элементов в качестве первого параметра функции можно указать строку или массив строк, содержащих имена тегов. Если указан второй параметр «true», то поиск элементов производится по всем вложенным узлам.

$('test').child('input select textarea', true);
$('test').child(['div', 'p']);

Функция parent(…)

Возвращает родительский элемент текущего узла.

$('test').parent();

Функции remove(…) и empty(…)

Удаляют и очищают текущий узел соответственно.

$('test').remove();
$('test').empty();

Заметим, что функция «empty» возвращает текущую копию объекта «_$», поэтому мы можем продолжить работу с узлом.

$('test').empty().append('h1').text('example');

Полный перечень методов «js-core» можно посмотреть на главной странице проекта. Для каждой функции указаны все возможные комбинации параметров. В ближайшее время постараюсь сделать, что-то вроде «sheatsheet» по всем функциям.

Сейчас framework используется здесь и на сайте «ЗАО КЛФЗ».

Конечно, «js-core» не столь функционален, как «jQuery», поэтому я решил провести тест, на примере, который можно записать практически одинаково и в моем framework’е и в «jQuery».

js-core:

$.ready(function() {

  for(var i = 0; i < 1000; i++)
    $.n('pre')
    .addClass('xxx')
    .text(i)
    .appendTo(document.body);

  var timeAfter = new Date();

  $.n('p')
  .text(timeAfter.getTime() - timeBefore.getTime())
  .prependTo(document.body);

});

jQuery:

$(document).ready(function() {

  for(var i = 0; i < 1000; i++)
    $('<pre></pre>')
    .addClass('xxx')
    .text(i)
    .appendTo(document.body);

  var timeAfter = new Date();

  $('<p></p>')
  .text(timeAfter.getTime() - timeBefore.getTime())
  .prependTo(document.body);

});

В первую строку каждого framework’а был добавлен следующий код:

var timeBefore = new Date();

Конфигурация компьютера, на котором производился тест:

• процессор: Intel Pentium 4 (3000MHz/512kb/HT);
• метеринская плата: Epox на базе i865PE (fsb 1000MHz);
• память: 2×512Mb (DDR PC-3200/dual channel);
• ОС: Windows XP Service Pack 2.

В общем, древний компьютер, приобретенный в далеком 2003 году.

Для тестирования были использованы следующие имеющиеся на тестовом компьютере браузеры:

• Internet Explorer 6 (из пакета MultipleIEs);
• Internet Explorer 8 beta 2;
• Mozilla FireFox 3.0.1;
• Opera 9.52 сборка 10108;
• Safari 3.1 сборка 525.13;
• Google Chrome 0.2.149.29.

Страницы открывались через протокол «file:», т. е. не использовался никакой веб-сервер. Для каждого framework’а на всех браузерах проводилось по 10 попыток загрузки, повторяемых нажатием клавиши «F5», записывалось время, выдаваемое скриптом. Затем было посчитано среднее арифметическое для каждого браузера. XHTML-страницы содержали только необходимые теги, для подключения скриптов и пустое тело <body>.

Как видим «js-core» в данном тесте оказался гораздо быстрее «jQuery», что меня, конечно, очень сильно порадовало Заметьте, какой отрыв «js-core» от «jQuery» в тестах IE. «Opera», «Safari» и «Google Chrome» оказались самыми быстрыми в работе с DOM, недалеко от них «FireFox», ну а IE как всегда…

• небольшой размер (около 520 строк кода);
• работает во всех актуальных на данный момент браузерах;
• поддерживает «DOMContentLoaded» и кэширование для «getElementById»;
• обеспечивает работу с AJAX;
• легок в изучении.

На данный момент подробная документация отсутствует, но в скором времени она будет размещена на страницах нашего блога, в рубрике «js-core».

Скачать последнюю версию «js-core».

Входные параметры

В качестве входного параметра функция может принимать строку с именем тега нового узла или ссылку на уже существующий узел.

• prepend('div') — функция создаст новый узел с именем тега DIV и поместит его в начало списка дочерних элементов текущего узла.
• prepend(node) — функция переместит узел, доступный по ссылке node, в начало списка дочерних элементов текущего узла.

Пример использования

$('test').prepend('div');

В начале списка дочерних элементов узла с идентификатором test будет добавлен новый узел с именем тега DIV.

Аналог без использования фреймворка

function prepend(id, tag) {
  var node = document.getElementById(id),
  first = node.firstChild,
  newNode = document.createElement(tag);
  node.insertBefore(newNode, first);
  return newNode;
}

prepend('test', 'div');

Входные параметры

В качестве входного параметра функция может принимать строку с именем тега нового узла или ссылку на уже существующий узел.

• append('div') — функция создаст новый узел с именем тега DIV и поместит его в конец списка дочерних элементов текущего узла.
• append(node) — функция переместит узел, доступный по ссылке node, в конец списка дочерних элементов текущего узла.

Пример использования

$('test').append('div');

В конец списка дочерних элементов узла с идентификатором test будет добавлен новый узел с именем тега DIV.

Аналог без использования фреймворка

function append(id, tag) {
  var node = document.getElementById(id),
  newNode = document.createElement(tag);
  node.appendChild(newNode);
  return newNode;
}

append('test', 'div');

Пример использования

var node = $('test').parent();

В переменную node будет помещен объект с ссылкой на родительский узел текущего узла с идентификатором test. Чтобы получить сам узел, необходимо обратиться к атрибуту node возвращаемого объекта или воспользоваться функцией el.

var node = $('test').parent().node;
//или
var node = $('test').parent().el();

Аналог без использования фреймворка

function parent(id) {
  return document.getElementById(id).parentNode;
}

var node = parent('test');

Входные параметры

1. Первый параметр используется для выбора элементов по имени тега. Необязательный.

   • child() — пустое значение, функция вернет массив всех дочерних узлов.
   • child('div') — cтрока с именем тега, функция вернет массив дочерних узлов с именем тега DIV.
   • child('div h1 p') — строка со списком имен тегов, разделенных пробелами, функция вернет массив дочерних элементов с именами тегов DIV, H1 и P.
   • child(['div', 'h1', 'p']) — массив строк с именами тегов, результат выполнения функции аналогичен предыдущему пункту.

2. Второй параметр логического типа так же необязателен и используется для переключения режима поиска дочерних элементов. Может принимать пустое значение или true. Если указано значение true, то будут выбраны все дочерние элементы, текущего узла, соответствующие критериям поиска, указанным в первом параметре, иначе — только непосредственно дочерние по отношению к текущему узлу. Допускается сочетание этого параметра со всеми вариантами первого параметра:

   • child(true)
   • child('div', true)
   • child('div h1 p', true)
   • child(['div', 'h1', 'p'], true)

Пример использования

var childArray = $('test').child('li');

В переменную childArray будет помещен массив элементов, с именем тега LI, являющихся непосредственно потомками текущего узла с идентификатором test.

Аналог без использования фреймворка

function child(id, tag) {
  var node = document.getElementById(id),
  children = node.childNodes,
  i, length = children.length, array = [];
  tag = tag.toUpperCase();
  for(i = 0; i < length; i++) {
    if(children[i].tagName == tag) {
      array.push(children[i]);
    }
  }
  return array;
}

var childArray = child('test', 'li');