Притча о шаблонах

[@anarleen]

Крутая статья. В закладки.

[@Hellbot]

Статья интересная, а подача требует «внезапно» сломать голову.

[@bondbig]

подача клоунская, портит годную статью.

[@tenshi]

кажется ты слишком напряжён :-о *массирует плечи* расслабься!

[@can3p]

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

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

[@tenshi]

я люблю экспериментировать %-)

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

[@cypok]

Мне было реально трудно ее читать из-за этих *напрягающих* вставок

[@dinamyte]

Диалоги персонажей в стиле Web 2.0 прямо.

[@tenshi]

настоящие джедаи делают так:
javascript: document.documentElement.innerHTML= document.documentElement.innerHTML.replace( /\*[а-я].*?[а-я]\*/g, ' ' )

[@tenshi]

не, всего-лишь Зелёнка ^^'

[@tenshi]

Силы мало в тебе чувствую я. Качаться нужно тебе ещё.

[@tenshi]

никаким, но если очень хочется, то:

TT.template( '{[}{xxx}{]}' )({ '[': '{', ']': '}', xxx: 777 })

[@Hellbot]

Выглядит как жесткое порно.

[@tenshi]

экранирование — всегда порно…

[@widowmaker]

а почему не сделать экранирование двойными скобками, например {{{variable}}} выведет {значение}

[@tenshi]

парсить это дело сложно ._.

[@widowmaker]

Парсер пишется один раз, а использается постоянно.
Должно быть легко в использовании, а не написании парсера.

[@tenshi]

сложный парсер медленнее работает… впрочем, я согласен.

[@tenshi]

сделал такое экранирование

[@tenshi]

теперь для экранирования достаточно удвоить фигурную скобку

[@Hellbot]

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

[@tenshi]

а как будет понятнее, проще или красивее?

[@SMiX]

embeddedjs.com/
beebole.com/pure/

[@SMiX]

Очень удобно, красиво и уже сравнительно давно изобретено. И оттестировано многими разработчиками.

[@tenshi]

значит тебе не составит труда переписать мой пример на каждый из них?

[@SMiX]

На embeddedjs.com/ есть отличная интерактивная демка.

[@tenshi]

я в курсе

[@widowmaker]

Почему нету точек с запятой в конце строк?
Они, конечно, не обязательны, но крайне желательны, и без них невозможно "упаковать" скрипт

[@tenshi]

м… а зачем его упаковывать в одну строку? х) это же не букмарклет какой-нибудь…

[@widowmaker]

Если поставить галочку возле Shrink variables размер уменьшиться в 1.8 раза.

[@tenshi]

а семиколоны тут при чём?

[@widowmaker]

При том, что всё сворачивается в одну строчку для уменьшения размера почти на 30%

[@tenshi]

ты предлагаешь добавить 30% семиколонов, чтобы можно было вырезать 30% переводов строк? х) шило на мыло…

[@widowmaker]

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

[@tenshi]

1. пробелы можно вырезать независимо от наличия семиколонов
2. как и перенос строки
3. какие проблемы редуцировать перенос строки до 1 символа?

[@widowmaker]

Зачем изобретать велосипед?

[@tenshi]

я и не предлагаю

[@widowmaker]

тогда смысл экономить на семиколонах?

[@tenshi]

потому что перевод строки необходим и достаточен.

[@SMiX]

Замкнутый круг. Перейдите в начало ветки.

[@dime]

Когда-то прочёл, что если точек с запятыми нет, то некоторые (многие?) движки сначала их предварительно расставляют (выглядит странно), что негативно сказывается на производительности. Или сильнее напрягаются в парсинге (что вполне объяснимо). С теми же последствиями. Зуб за эту информацию не даю, продаю за что купил, но с некоторых пор сменил бесточекасзапяточный :) стиль обратно на классический. Мне не жалко, а шансов нарваться на ошибку парсинга чуть меньше, ну и со скоростью — вдруг не соврали…

[@tenshi]

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

[@dime]

>разница в скорости незначительна.
Я не проверял.
>никто их при парсинге не расставляет, ибо они являются лишь разделителями операторов
Расставляет. Об этом даже есть специальный раздел в стандарте. Automatic Semicolon Insertion называется. Ну, то есть, физически можно не вставлять, но поведение должно соответствовать варианту, как будто вставляется.

[@tenshi]

это всего-лишь игра слов для простоты понимания.

[@dime]

Это описание поведения интерпретатора. И парсер именно так и работает. Фиг с ней со скоростью, главное тут побочные эффекты.

[@tenshi]

парсер создаёт дерево инструкций. в этом дереве нет ни семиколонов, ни переводов строк.

[@dime]

??? При чём здесь дерево инструкций? Описано поведение парсера во время парсинга исходного текста.

[@tenshi]

ru.wikipedia.org/wiki/%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%B0%D0%BD%D0%B0%D0%BB%D0%B8%D0%B7
парсер не занимается расстановкой точек х)

[@dime]

ECMAscript Language Specification, пункт Automatic Semicolon Insertion.
Там описано как должен вести себя парсер языка ECMAscript. Как ведёт себя парсер из википедии меня совершенно не волнует. Вы полагаете, яваскриптовые движки пишут по википедии, а не по спецификации? Ну-ну.

[@tenshi]

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

[@dime]

Угу, я про это тоже писал. Но анализировать ситуацию всё-равно надо — раз, и спецэффекты всё-равно остаются — два.

[@TR4V15]

не говорите глупостей, я лично собираю все скрипты в один пак, сжимаю. На выброс идет пакованый скрипт + gzip + кэшируется. В итоге клиент получает 57.9 KB вместо 220кб ;)

[@tenshi]

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

[@TR4V15]

чему удивлятся? ошибкам после того как скрипты пройдут через Closure Compiler?

[@tenshi]

СС настолько тупой, что ломает скрипты?

[@Beresta]

Семиколоны в некоторых случаях должны быть по стандарту. Если их нет — движок пытается «угадать». Логично предположить, что не всегда он угадает правильно.

Именно поэтому надо их ставить везде. А убирать, для компенсации, переносы строк ;-)

[@tenshi]

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

[@Beresta]

Вот пример. Падает с ошибкой из-за пропущенной ;.

<script>
var a = 5
(true)
</script>

Интерпретатор трактует это как вызов функции 5(true). Так что ставьте везде семиколоны ;-)

[@tenshi]

это синтетический пример.

[@Beresta]

<script>
var a = 5
(condition? obj1: obj2).callSomeFunc()
</script>

Тоже самое. Пример, более близкий к жизни, коли вам так угодно.

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

[@tenshi]

а это говнокод :-Р надо писать так:
var a= 5
var obj= condition? obj1: obj2
obj.callSomeFunc()

[@Beresta]

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

[@tenshi]

науке всё прекрасно известно :-Р именно поэтому у меня никогда из-за этого проблем не возникало.

[@tenshi]

каждый думает в меру своей испорченности ;-)

[@habraname]

олдфаги помнят зачин «здравствуй дружочек» и одобряют топик

[@tagir_valeev]

У меня при чтении возникло ощущение, что статью пишет анимешник. Я укрепился в этом мнении, когда дочитал до ника автора =)

[@tenshi]

все анимешники немного того х)

[@tenshi]

нет, конечно :-о

[@tenshi]

ага, и сколько хостинга…

[@bO_oblik]

Нужно отобрать у автора как можно больше ЛСД.

[@tenshi]

не получится — я уже всё скурил %-)

[@bO_oblik]

ЛСД даже не курят :)

[@tenshi]

так вот почему так плохо торкает! :-о

[@vittore]

как же
курят даже орех

[@ZiggiPop]

клоунада, а не статья

[@habraname]

порно^W задорно ;)

[@esenin]

И Смешно и поучительно одновременно

[@hramik]

Жаль, а ведь, наверное, что–то интересное написано. Ведь правда? *обнимаю в охапку и плачу*

[@tenshi]

правда *взаимообнимаю* (Y_Y)

[@spanishgipsy]

А чем отличается объявление:

TT.html= function( tpl )…

от:

TT.html.encoder= new function( )…

С какой целью в одном имеется оператор new, а в другом нет?

[@tenshi]

new используется для создания дополнительного скопа, куда помещаются статические переменные, необходимые для определяемой функции

[@spanishgipsy]

1) скоп — что это?
2) чем переменная в функции без new будет отличаться от функции с new?

Да и вообще, можешь рассказать об этом подробнее?
А то я даже вопросов пока сформулировать не могу толком =)

[@tenshi]

попробуй это: javascript.ru/basic/closure

[@widowmaker]

Не проще было написать что var x = new function(){}; равносильно var x = (function(){})();.

[@tenshi]

и тогда бы он спросил, что такое (function(){})()? х)

[@widowmaker]

Такой вариант, по моим наблюдениям, встречается чаще.

[@spanishgipsy]

То есть, в этом случае функция не только объявляется, но и выполняется, при этом её результат пишетя в x?
Или, другими словами, в x пишется не функция, а результат функции?

[@tenshi]

агась

[@vittore]

а зачем кстати новый скоуп для TT.template, почему было searcher просто внутрь не положить?

[@tenshi]

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

[@can3p]

в первом случае просто определяется анонимная функция, а во втором случае, благодаря оператору new она еще и вызывается, что приводит к созданию нового объекта вызова, в который попадают все определяемые внутри переменные

[@ferrari]

тошно читать

[@tenshi]

м… надо будет выпустить аудиокнигу %-)

[@j1nn]

фильм. тогда не будет этих вставок, за которыми теряется весь смысл текста.

[@vittore]

ага и обязательно тетю асю с 3м размером: Р

[@j1nn]

только чтобы третий размер не отвлекал куда больше, чем вставки в тексте..:)

[@aceventura]

Материал довольно интересен. То есть его можно кушать и нахваливать. Антураж весь вот этот лично для меня портит впечатление. То есть по итогам оценка — 0.
Но тут я вспоминаю слово «порева», меня передергивает еще разок и ставлю минус.

[@tenshi]

ви таки порноненавистник? х)

[@aceventura]

Таки нет, но есть вещи уместные и неуместные.

[@tenshi]

скучный ты .-.

[@aceventura]

Нет, просто я во всем люблю красоту. Можно сделать узбекский орнамент на ковровой рамке у портрета Путину или там украсить свой автомобиль лошадиным хвостом. Главное при этом остроумие, оригинальность изобретательность и пр.

Человек ведущий себя в разных ситуациях нестандартно может быть яркой личностью а может тупым неадекватом. Оба делают что-то «нескучное» на их субъективный взгляд, а получается по-разному. Андэстэнд?

[@tenshi]

ты посягаешь на мою индивидуальность! т-т

[@vittore]

а кто тебе сказал что ты правильно отличишь яркую личность от тупого неадеквата?

[@aceventura]

Это субъективные оценки. И здесь никакого «правильно» или «неправильно» быть не может.

[@vittore]

так и я о том

[@yuretsz]

Если табуляцию выставить в два пробела — то уже не так страшно.

[@tenshi]

угу, подсвечиватель невменяемый какой-то >_<

[@isden]

статья и особенно её подача впечатлили. ушло в избранное :)

[@dm9]

По стилю здорово =) Разбавит немного хабрашаблоны и хабразаискивания. Так держать!

[@mihalicyn]

Забавно все это конечно, только зачем что-либо экранировать на стороне JS?

[@tenshi]

а где ты предлагаешь экранировать?

[@mihalicyn]

Хм, ну такие вещи вроде-как на стороне сервера делаются, не? (-:

[@tenshi]

не всегда

[@Sannis]

Есть Javascript на стороне сервера ;)

[@Ryav]

Перед сном детям читать

[@TEHEK]

Вам бы JS в яслях преподавать

[@IIIEII]

Выглядит зловеще:

.split( '"' ).join( '"' )

Это действительно делает что-то полезное?

[@tenshi]

блоо, хабралох сломал — ща починю

[@ich]

материал неплохой, подача, соглашусь, чрез чур юморная. а так я сам нечто подобное использую для всего, что надо «отшаблонизировать»

[@stansult]

«чрез чур» :))

[@ich]

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

[@stansult]

сколько людей — столько способов решить проблему :)
я, к примеру, когда не уверен — проверяю в словаре

а в данном случае — и слышится, видимо, всем по-разному
мне слышится как раз «чересчур»… ну, может быть, «чирисчур» (безударные «е» звучат как «и»)

[@ItGold]

что такое ТТ?

[@tenshi]

смайлик такой х)
TrueTemplates

[@zantor]

Переводы строк уходят в аут после парсинга.
Замените

/(.*?)(\{|\}|$)/g

на

/([\s\S]*?)(\{|\}|$)/g

, чтоли ;)

[@tenshi]

м… интересное решение, спасибо :-о

[@zantor]

А еще, возможно, стоит сделать так:

/([\s\S]*?)(\{|\}|$)(?!\2)/g

Тогда решится проблема с экранированием (две скобки == просто скобка):

var template= TT.html( 'По {{fake}} запросу <kbd>{query}</kbd> найдено страниц: {count}' )
var message= template({
    fake: 'этому',
    query: 'Ultimate Answer to the Ultimate Question of Life, The Universe, and Everything',
    count: 42 });

[@tenshi]

к сожалению, не всё так просто…
TT.template( 'a{{{b}}}c' )({ b: 'd' }) должно преобразовываться в 'a{d}c'

[@zantor]

Да, действительно :(

[@tenshi]

короче, сделал экранирование %-)

[@zantor]

Что-то теперь вообще странно. Выдает на пример

{}Ultimate Answer to the Ultimate Question of Life, The Universe, and Everything{}42{}

[@tenshi]

может ты что-то не так скопипастил? о0

[@zantor]

Ну… скачал скрипт… searcher такой:

/((?:[^\{\}]|\{\{|\}\})*)(?:\{|$)|([^\{\}]*)(?:\})/g

[@tenshi]

опа… в лисице косячок ^^'

[@tenshi]

в общем, поправил

[@egorinsk]

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

[@tenshi]

замыкания — это очень быстро

[@zantor]

главное, чтобы где-то в родитетельском scope не попались ссылки на DOM-объекты ;) Ибо ололо.

[@tenshi]

ничего страшного не будет

[@zantor]

То есть не будет? Убиваем элемент в дереве, ссылка на него в контексте, залоченном в замыкании остается, вуаля — leak detected. Или я что-то путаю?

[@tenshi]

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

[@zantor]

тут негде. Это был ответ на

замыкания — это очень быстро

[@tchvil]

Hi I'm the author of pure.js mentioned above (thanks SMiX for the link).
I read this post through Chrome Translate, so please be nice!

At the beginning of your post, it looks you escapeHTML for security reasons.
I don't think you have to do that. The HTML scripts are not parsed when injected into a node through innerHTML.

[@tenshi]

m… fixed ;-) (works in ie)

[@tenshi]

works in anywhere now

[@zantor]

Кстати, а почему pipe получает массив? Лучше уж через arguments, тогда более походе на pipe ;)

[@tenshi]

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

[@zantor]

Про цепочку я что-то не понял, поясните пожалуйста. А насчет конвертации — Array.prototype.slice.call(arguments) работает везде, насколько я помню.

[@tenshi]

this.createFilter= ТТ.pipe( TT.pipe, TT.binder( this ) )

var filter= this.createFilter([ this.trim, this.escape, this.validate ])

везде кроме ие =(

[@zantor]

>>> везде кроме ие =(
Хм. В IE6-8 работает.

[@tenshi]

гм… что-то я напутал видимо, спасибо ._."

[@zantor]

Пожалуйста :) Жаль только, что в IE arguments — это вроде как единственное, для чего это работает (в плане того, что с HTMLCollection так уже не поступить)

[@tenshi]

во, с ним и попутал видимо