Bala.js - функция для выборки элементов на странице в 408 символах
 

Репка

Псто (очень быстро набирает плюсики)

(function(win, $) {
    // your code starts here
    $(function() {
        alert($('div').length);
    });
  // your code ends here
})(window, function(d,e,c,f,g){c=function(a,b){return new f(a,b)};f=function(a,b){e.push.apply(this,a?a.nodeType||a==window?[a]:""+a===a?/</.test(a)?((g=d.createElement(b||"q")).innerHTML=a,g.children):(b&&c(b)[0]||d).querySelectorAll(a):/f/.test(typeof a)?/c/.test(d.readyState)?a():d.addEventListener("DOMContentLoaded",a):a:e)};c.fn=f.prototype=e;c.one=function(a,b){return c(a,b)[0]||null};return c}(document,[]));

Что добавить, не знаю. Может, Максимаксимаксимус заюзает в ui.js.

Я юзаю https://github.com/bendc/sprint

kobezzza, но зачем? Вопрос отпадает если работаешь с коллекциями элементов.

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

kobezzza, по поводу скорости я согласен, по поводу методов... О каких методах речь? Может, я слишком хорошо знаю VanillaJS и слишком быстро печатаю, чтоб понять, нафига юзать DOM библиотеки.

$, hasClass, attr, width / height, on /off иногда. Бывает юзаю всякие next/prev/closest/find.

Конечно сейчас при работе в рамках фреймворков это редко нужно, но мне удобно что тут привычно jQ API, которое я в своё время выучил наизусть, а 5кб мне не жалко :)

Кто-то крадет мои поюсики на Хабре. Джон Резиг, наверное.

ахаха, не иначе :)

node.classList.contains
node.getAttribute/node.setAttribute
node.offsetWidth/node.offsetHeightnode.nextElementSibling/node.prevElementSibling/closest/querySelector

Может это я один такой упоротый и кайфую от того, что пишу код, скорость которого зависит только от уровня кривизны моих рук?

FINoM, я всё это знаю, но мне привычнее jQ :)

В тот день, когда такая хрень станет для меня узким местом - я брошу программировать :)

Я сонный, наверное, не пониимаю твоего сообщения.

Я к тому оптимизация таких спичек никогда не станет узким местом в моих приложениях.

Мне приятнее писать append, а не insertAjasentHTML (даже без ошибок написать не могу:)).

PS: Я уже давно отказался от jQ, ввиду её не нужности, но для простейших операций с DOM мне приятнее её API, а не vanilla, поэтому я рад, что нашёл такую библиотеку. А то что я юзаю там 20-30%, меня не напрягает, ибо это опять таки оптимизация на спичках.

А автодополнение?
Это не оптимизация. Я сам говнокожу порой (на Матрешку посмотри :D). Просто между VanillaJS и какой-нибудь библиотекой не вижу разницы. Если разницы нет, то логично выбрать то, что работает быстрее и зависит только от меня.

jQ API я печатаю быстрее :)

Ну разница в сахаре. Сахар - это конечно условность. Тебе нравиться native, а мне native завёрнутый в привычный jQ API - не вижу ничего криминального в этой схеме.

FINoM, а как минимизировать подобные нативные конструкции как classList.contains? Попробуй... аля jq и получишь... при том получится что-то типа elem.has('class'), видишь как красиво))

А ты предлагаешь так извращаться да?

var classList = 'classList', contains = 'contains';
elem[classList][contains]('class');

Глянул DOM level 4 спеку - а симпатично уже выходит :)

Rise, жми код как хочешь. В маленьких проектах синтаксис DOM API не сильно повлияет на результирующий код. В больших - юзай фреймворки.
Вот вот.

Не ожидал такого срача на Хабре :)

Багфикс заставил распухнуть функцию до 415 символов. Вчера удалось вернуть прежний размер (408), но не понятно, как жать дальше. У меня создаётся впечатление, что жать уже некуда (без eval, конечно же). Вот, финальный, неминифицированный вариант: https://github.com/finom/bala/blob/master/bala.js

Жму вот этой штукой, вручную: http://closure-compiler.appspot.com/

Есть идеи, как еще можно уменьшить количество символов?

Понятно, что плюс-минус пара байт ничего не решат. У меня чисто спортивный интерес.

Сразу после предыдущего сообщения пришли две идеи:
1. В парсере заменить document.createElement('q') на document.createElement(s_addEventListener) (где s_addEventListener - это 'addEventListener'). Разница только в том, что вместо валидного элемента создается HTMLUnknownElement.
2. /f/.test(typeof s) (является ли переменная функцией) заменил на это: (typeof s)[7] (мы заранее знаем, что переменная не undefined).

И небольшой чит: я убрал запятую после объявления функции в примерах, сохранив 1 байт. Теперь "убийца" занимает 400 символов.

Опять сижу и думаю, что жать некуда, не пожертвовав функциональностью.

FINoM, , $, Bala убрать из параметров и объявить как function declaration, тогда ; станет не нужен после них, даст -6.

Если не брать в расчёт шаблонизаторы, а ваяние скриптов под запрос, зачастую интерес отнюдь не в скорости, а в алгоритме.
====================
На Хабре, главное тактика ответов на первые два вопроса,
Если начинаешь оспаривать наезды, особенно на фичах-альтернативных популярным фреймворкам, получаешь кучу минусов.
Хитрый ход, сделать упор в первых двух комментах, что востребовано в проектах где
a) Политикой руководства запрещены тяжёлые фреймворки.
b) Разработка приложений с быстрой реакцией

хорошо сказано :)

Не в плюсиках счастье и не в их колличестве. Плюсы всего лишь отражают популярность. О качестве кода (решения) они ничего не говорят.

Гозар уже делал нечто подобное

На Хабре, минусы отражают популярность. Общий порыв: заклевать автора при малейшем колебании.

Гениально, спасибо!
(Хотя, может, не так и гениально, просто я - тормоз).

По поводу поста на Хабре, тут виден серьезный прогресс. Все посты несколькогодичной давности, где автор предлагал отказаться от jQuery были адски заминусованы. Меня интересует не карма-рейтинг-дрочерство, а реакция людей. Тут мнения разделились на ~60/40, Vanilla побеждает.

Теперь 394 символов :)

FINoM, Ибо как не верти, нативный js по удобству функционала движется к jQuery (грил более 4-лет назад) Ибо автор JQ здорово уловил потребность, да пока наибольший функционал удобств реализован в JQ, но натив движется к задумкам автора
=====================
Ну противопоставлять Bala - jQ для данной аудитории, даж подспудно - ну откровенно нарываться, ибо многие так натив до конца не знают, и оно им не нужно, для правки пары селекторов
По-моему благоразумно было сразу обращаться к js аудитории нативщиков и желающих быстрых и минималистических библиотечек. 90% просто не нужны были в теме, отсеки их изначально обращением к нужной части
Эти добавки бы убили большинство контрпротивостояния джикверистов

Следующая цель - сделать функцию компактнее кода Google Analytics. Нужно совсем немного: дойти до 386 символов, т. е. убрать 8 символов.

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-12418613-4', 'auto');
  ga('send', 'pageview');

(пробелы и переносы тоже учитываются, этот код предоставляет Гугл)


UPD
Можно упростить задачу и сравнивать этот код:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-12418613-4', 'auto');
  ga('send', 'pageview');

</script>

С этим (предварительно убрав все пробелы)

<script>$=function(d,e,f){function c(a,b){return new g(a,b)}function g(a,b){a&&[].push.apply(this,a[e]?[a]:""+a===a?/</.test(a)?((b=d.createElement(b||e)).innerHTML=a,b.children):b?(b=c(b)[0])?b[f](a):[]:d[f](a):(typeof a)[7]?"c"==d.readyState[0]?a():d[e]("DOMContentLoaded",a):a)}c.fn=g.prototype=[];c.one=function(a,b){return c(a,b)[0]||null};return c}(document,"addEventListener","querySelectorAll")</script>

Разница в 3 символа.

С Новым Годом! Bala.js похудела на 18 символов (минус точка с запятой, которую я вернул на бочку). Это сделано благодаря отказу от конструктора в пользу Object.create.

$=function(e,f,g){function c(a,b,d){d=Object.create(c.fn);a&&d.push.apply(d,a[f]?[a]:""+a===a?/</.test(a)?((b=e.createElement(b||f)).innerHTML=a,b.children):b?(b=c(b)[0])?b[g](a):d:e[g](a):(typeof a)[7]?"c"==e.readyState[0]?a():e[f]("DOMContentLoaded",a):a);return d}c.fn=[];c.one=function(a,b){return c(a,b)[0]||null};return c}(document,"addEventListener","querySelectorAll");

.
Ну реально на микрозадачах, решаемых на коленке все с удовольствием откажутся от jQ или собственных библиотечек, если будет текущая Bala.js с такой добавкой . Назови её Bibizyan2016 (или Bibi2016), если жаль трогать Bala.js

Выложи, в том жа Хабре, если за неделю 40 плюсов не будет - я съем галстук :D
======================
/Ну а по серьёзному, имхо будет востребовано/

FINoM,
Ксать есть практически незадействованный символ вместо $ => µ
И имя соответствует микробиблиотеке
-------------------------------
Новое имя позволило бы использовать библу и наряду с неизвестными версиями jQ
К примеру: Постепенная замена (возможных для замены библой) кодов на jQ.
-------------------------------
И, имхо, название бы статьи менее вызывающее(зачем дразнить ?), ну типо:

« Бла-Бла.js - микробиблиотека для микрозадач »

Кстати, пользуют подобную обфускацию только мартышки. Это экономия на спичках.

Deff, и как этот символ печатать при написании кода? У кого-то есть отдельная клавиша для этого символа? Копировать/вставить и альт кодами, ИМХО, неудобно будет.

Не считаю название вызывающим. Программирование - это не религия.

Сохранил еще 5 символов. Не спрашивайте, как.

Вернул 7 символов :(
Детектирование функции таким способом:

(typeof s)[7]

вызовет проблемы с передачей SIMD.

Ruslan_xDD,
В нормальном редакторе есть вставка символа, тьву не все равно где кликать ? (или автозамена клика кнопки, у меня к примеру F12)
Ксать для $ нун еще шифт переключать, а тут одним кликом

Deff, т. е. нужен редактор? А если я хочу jsbin заюзать?

FINoM,
С новым годом! (Ну на вкус и цвет, тогарищей нет, - забудь)
Мну говорил за то, что будет интересно джукверистам, ибо зачастую нужен быстрый парсер по DOM без наворотов, я бы использовал Bala, но из-за отсутствия next, prev и find - отпадает. Причем я не хочу нарягаться с разбором конфликтности с $

Vanilla

var next = $.one('xxx').nextElementSibling;
var prev = $.one('xxx').previousElementSibling;
var found = $.one('yyy', xxx);

Так назови как захочешь. Просто замени доллар в начале скрипта на что угодно: https://github.com/finom/bala/blob/master/bala.min.js