spike - библиотека внедряет W3C-шные методы в IE

[devote]

Снова всем привет, хочу представить вам новую свою разработку.

Данная библиотека предназначена именно для Internet Explorer 6,7,8 а в дальнейшем возможно будет что-то добавлять и в IE9.

Скажу сразу, поддержку IE6 я не планировал, но реализация привела к тому что она очень даже хорошо работает в IE6, так что уж не обессудьте.

Что именно делает эта библиотека, а делает она очень простые вещи. Добавляет W3C-шные методы в ослобраузер, такие как addEventListener, querySelector и т.д.

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

DOM Element.prototype:

В IE7 и ниже нет возможности расширять элементы новыми прототипами, которые мы хотим делегировать всем элементам, для этого я написал небольшую модель для ее эмуляции в IE<8. Теперь она дает возможность нам расширить элементы своими методами.

Вот ниже один из способов будет корректно работать в IE 7-ой версии и ниже:

var div = document.createElement( 'div' );
Element.prototype.ourNewMethod = function() {
    alert( 'Привет мир!' )
}
div.ourNewMethod(); // alerts 'Привет мир!'

и другие вариации которые вам придут в голову.

Методы которые добавляет данная библиотека:

.addEventListener

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

.removeEventListener

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

.dispatchEvent

полная поддержка ручного запуска события.

document.createEvent

частичная поддержка создания событий, поддерживает события только DOM Level 2, то-есть Event, CustomEvent, UIEvent, MouseEvent. В дальнейшем возможно будет расширена.

Полная поддержка экземпляра события, поддерживает такие методы как:

.preventDefault()

отменить действие по умолчанию.

.stopPropagation()

прервать событие на следующей фазе или другом элементе.

.stopImmediatePropagation()

полная остановка распространение события. (новое в HTML5)

и прочие свойства экземпляра события по требованиям DOM Level 2

Так же присутствуют константы указывающие тип фазы:

Event.CAPTURING_PHASE
Event.AT_TARGET
Event.BUBBLING_PHASE

Селекторы:

.querySelectorAll

полный CSS3 селектор для поиска списка элементов, в IE8 добавляет поддержку только тех селекторов которые не имеет нативный метод.

.querySelector

полный CSS3 селектор для поиска одного элемента

.getElementsByClassName

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

.matchesSelector

полный CSS3 селектор для проверки элемента

Все это на данный момент работает в IE 6,7,8. Жестких тестов не проводил, но во время разработки тесты дали положительный результат. Если будет желание потестить, или найдете ошибку, сообщайте мне и я от нее немедленно избавлюсь.

Все это добро вы как всегда можете найти у меня на гитхабе: https://github.com/devote/spike

Файлы в корне это собранная библиотека из трех моделей, сами модели вы можете найти в папке models.

element.js - нужен для IE ниже 8-й версии, подключать самым первым
events.js - модель событий
selectors.js - модель селекторов

Постепенно я буду дополнять дополнительные модели, если у вас есть пожелания по написанию моделей я с удовольствием выслушаю.

Всем приятной разработки скриптов с мыслью о нормальной кросс-браузерности. Спасибо за внимание!

С Уважением, Дмитрий!

PS. Не забываем фоловится на гитхабе

[Octane]

Если я правильно понял, то Element.prototype хранилище методов, ссылки на которые копируются в каждый элемент при вызове одного из добавленных или перезаписанных методов типа createElement, а еще после загрузки документа выполняется такое копирование для всех найденных элементов? Я ожидал какую-нибудь магию с VB-скриптми и htc-файлами


Расскажи, пожалуйста, как реализуется event capturing.

[devote]

Я ожидал какую-нибудь магию с VB-скриптми и htc-файлами

Да заманчиво Но я пока не думал над этим что бы сделать это через VBScript но htc юзать не хочу.

Расскажи, пожалуйста, как реализуется event capturing.

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

Картина примерно такая:

Здесь иллюстрируется не совсем понятно, но допустим при возникновении события на элементе TD, не срабатывает всплытие, а идет перенаправление на прокси метод, который запоминает ссылку на элемент в котором произошло событие, и так для каждого элемента до самого верха. После того как событие достигло верхнего элемента, запускается уже планировщик, который проходит по всем элементам которые прокси сохранил в неком кеше для планировщика. В итоге планировщик по ним проходит дважды, сначала сверху-вниз, затем снизу-вверх. Тем самым получая нужный нам эффект.

Мда, объясняющий с меня херовый конечно

[devote]

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

[Раед]

devote,
Я правильно понял, что Element.prototype теперь работает?

P.S. Да, ещё можно добавить полную поддержку getComputedStyle.
P.P.S. Ещё идея, можно добавить геттеры-сеттеры

[devote]

devote,
Я правильно понял, что Element.prototype теперь работает?

Можно сказать да

P.S. Да, ещё можно добавить полную поддержку getComputedStyle.

Думаю это есть возможность добавить.

P.P.S. Ещё идея, можно добавить геттеры-сеттеры

Насчет геттеров/сеттеров боюсь они будут не полными, то-есть причину думаю вам объяснять не нужно. А не полная реализация не есть хорошо, она не должна ограничивать то что всегда было разрешено делать.

[Раед]

А не полная реализация не есть хорошо, она не должна ограничивать то что всегда было разрешено делать.

Чуть-чуть лучше, чем ничего.

[devote]

Чуть-чуть лучше, чем ничего.

лучше когда она просто что-то не умеет, но увы реализация аксессоров в ИЕ приводит не к тому что она просто что-то не умеет, но и к тому что появляется ограничение, довольно таки важное. Это возможность расширить объект, дополнить новыми свойствами. И это огромное ограничение.

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

[devote]

Хочу отметить важное замечание, метод .getElementsByClassName реализован полностью по указаниям спецификации, то-есть все реализации лежащие по инету не правильные, и сделаны из-за невнимательности прочтения документа.

Как работает метод, который все выкладывают по инету:
допустим мы хотим найти элемент с классом .blah

document.getElementsByClassName( 'blah' ); // все как и везде

Но если указать список классов:

document.getElementsByClassName( 'blah lala' );

То в этом случае реализации кишащие по инету выдадут все элементы с классом .blah и элементы с классом .lala то-есть:

<div class="blah"></div>
<div class="lala"></div>

Найдет оба элемента, так как они удовлетворяют запросам.

Как же все таки реально должен работать этот метод, то-есть как описано в спецификации. При попытке искать со списком классов, то-есть у нас есть HTML:

<div class="blah"></div>
<div class="lala"></div>

и мы пытаемся найти элементы:

document.getElementsByClassName( 'blah lala' );

Нам метод не выдаст ни одного элемента, потому что по критериям не проходят. Отличия тут таковы, что список этих классов должен иметь один и тот-же элемент, если хоть одного класса в элементе нет, то он пропускается. То-есть наш код найдет элемент например вот такой:

<div class="lala blah"></div>

или такой:

<div class="lala test some blah"></div>

Вот такие вот секреты рассказывает нам этот метод и спецификация, которую почему-то все читают не так как я

[Octane]

все события проходят через прокси метод, который ловит все события до самого верхнего элемента…

Ну это я догадался, глядя на код я не понял, как узнать, что bubbling фаза закончилась и пора её в обратном порядке запускать.

Если не срабатывает fireEvent, то listener'ы запускаются синхронно? Может фейковый эвент инициировать, чтобы ошибка в listener'е не останавливала выполнение кода. Когда fireEvent ошибку выдаёт?

В фазе capturing не имеет смысла обращаться к window.event, чтобы достать дополнительную информацию?

А еще стоит отметить, что добавление методов в Element.prototype для IE7 нужно делать до подключения spike.js вообще нельзя в Element.prototype ничего добавить для IE7?