Vanilla JS

Vanilla JS — очень мощный javascript-фреймворк.

Кто использует Vanilla JS?

Хорошо, что вы спросили, вот несколько примеров: Facebook, Google, YouTube, Yahoo, Wikipedia, Windows Live, Twitter, Amazon, LinkedIn, MSN, eBay, Microsoft, Tumblr, Apple, Pinterest, PayPal, Reddit, Netflix, Stack Overflow. Команда Vanilla JS поддерживает каждый байт кода фреймворка и каждый день много трудится, чтобы сделать его маленьким и интуитивным.

На сайте вы можете скачать фреймворк, выбрав нужную вам функциональность:
- DOM (Манипуляции / Селекторы)
- Прототипная система объектов
- AJAX
- Анимации
- Система событий
- Регулярные выражения
- Функции как объекты
- Замыкания
- Библиотеку математических методов
- Библиотеку для работы с массивами
- Библиотеку для работы со строками

Плюс можете настроить вашу сборку:
- Сжать исходники
- В кодировке UTF8
- Использовать «CRLF» переносы строк (Windows)

При максимальной комплектации фреймворк будет весить:
- несжатый: 0 байт
- сжатый: 25 байт

Установка Vanilla JS

Команда Vanilla JS гордится тем фактом, что это самый лёгкий фреймворк всех времён; используйте нашу стратегию выкладки на продакшн, и браузеры ваших пользователей загрузят Vanilla JS в память ещё даже до того, как начнут загружать ваш сайт.

Чтобы подключить Vanilla JS, просто добавьте следующую строку в ваш HTML:

<script src="path/to/vanilla.js"></script>


Когда будете готовы выложить свой проект на продакшн, смените подключение на намного более быстрый метод:

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

Сравнение скорости работы VanillaJS с другими фреймворками

Поиск DOM-элемента по ID

Фреймворк	Код	Оп.\сек
Vanilla JS	document.getElementById('test-table');	12,137,211
Dojo	dojo.byId('test-table');	5,443,343
Prototype JS	$('test-table')	2,940,734
Ext JS	delete Ext.elCache['test-table']; Ext.get('test-table');	997,562
jQuery	$jq('#test-table');	350,557
YUI	YAHOO.util.Dom.get('test-table');	326,534
MooTools	document.id('test-table');	78,802

Поиск элементов по названию тэга

Фреймворк	Код	Оп.\сек
Vanilla JS	document.getElementsByTagName("span");	8,280,893
Prototype JS	Prototype.Selector.select('span', document);	62,872
YUI	YAHOO.util.Dom.getElementsBy(function(){return true;},'span');	48,545
Ext JS	Ext.query('span');	46,915
jQuery	$jq('span');	19,449
Dojo	dojo.query('span');	10,335
MooTools	Slick.search(document, 'span', new Elements);	5,457

Примеры кода

Плавно скрыть элемент

Vanilla JS	var s = document.getElementById('thing').style; s.opacity = 1; (function(){(s.opacity-=.1)<0?s.display="none": setTimeout(arguments.callee,40)})();
jQuery	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('#thing').fadeOut();</script>

AJAX-вызов

Vanilla JS	var r = new XMLHttpRequest(); r.open("POST", "path/to/api", true); r.onreadystatechange = function () { if (r.readyState != 4 || r.status != 200) return; alert("Success: " + r.responseText); }; r.send("banana=yellow");
jQuery	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $.ajax({ type: 'POST', url: "path/to/api", data: "banana=yellow", success: function (data) { alert("Success: " + data); }, }); </script>