Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

233,25
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Префиксные деревья в Javascript

Время на прочтение4 мин
Охват и читатели6.3K
Как это писалось

Одним долгим зимним вечером моя жена играла в Bookworm adventures, и периодически пинала меня по поводу составления слов подлиннее из имеющихся букв. Быстрый поиск по интернету страничек, позволяющих составлять слова из набора букв дал кучу сайтов, которые пытаются делать это на серверной стороне, и один, который делает это на клиентской ява-апплетом. Те, которые составляют слова мощностями сервера либо имеют ограничение на размер набора букв (обычно, почему-то в 8), либо глубоко задумываются, если им послать набор «abcdefghijklmnopqrstuvwxyz». Ява-апплет же имел ограничение в 12 букв, работал шустро и почти подходил (в игре предлагаются 16 букв для составления слов).
Читать дальше →

Javascript. Сортировка таблицы

Время на прочтение3 мин
Охват и читатели43K
Доброго времени суток, Хабровчане.

Может для большинства здешних обитателей моя статья покажется слишком скучной и «и так понятно», но думаю новичкам будет в чем-то полезной.
Стояла передо мной как-то задача сделать сортировку таблицы по разным колонкам. Данный брались из базы, каждый раз их вытаскивать — накладно, решил задействовать JavaScript.
Были небольшие трудности из-за использования различной стилистики строк в таблице, а именно был разный цвет фона, в зависимости от данных самой таблицы.
Стилистику нарушать было нельзя. Кого заинтересовало, прошу под кат.
Читать дальше →

Парсер PSD файлов на CoffeeScript

Время на прочтение2 мин
Охват и читатели5.9K

Автор скрипта psd.js — Райан Лефевр. Скрипт, как вы уже догадались, умеет открывать photoshop документы, как в браузере, так и на стороне Node.js.

Демонстрация возможностей (ранняя beta, не удивляйтесь, что некоторые файлы не откроются. На github странице проекта многие жалуются на это).

Пример вывода информации на Node.js:
{PSD} = require 'psd.js'
 
psd = PSD.fromFile './path/to/file.psd'
psd.parse()
 
for layer in psd.layerMask.layers
console.log "Layer: #{layer.name}"
console.log "Size: width=#{layer.cols}, height=#{layer.rows}"
console.log "Position: top=#{layer.top}, left=#{layer.left}"

Читать дальше →

Смена изображений

Время на прочтение4 мин
Охват и читатели6K
Как то раз на просторах интернета наткнулся на одну замечательную галерею — адрес забыл, но идея ее осталась в памяти. И вот на один из сайтов понадобилась какая то нестандартная смена картинок (затухание и сьезжание уже приелись) И вот я вспомнил про нее.



Суть в чем? Чтобы изображение открывалось по частям (квадратам, полосам итп.) при чем не просто появлялось а чтоб все это было напичкано эффектами.

Ну чтож, приступим.
Читать дальше →

Почему WAT

Время на прочтение3 мин
Охват и читатели42K
Недавний доклад Гарри Бернхардта на CodeMash оказался довольно популярен (прим. пер.: в том числе и на хабре). В докладе он шутит по поводу некоторых особенностей поведения ruby и javascript.
Вряд ли я смогу вас убедить, что есть какой-то смысл в том, на что жалуется Гарри. Тем не менее, надеюсь, я смогу вам объяснить, почему javascript ведёт себя именно так.
Читать дальше →

KnockoutJS: сказ о том, как легко принимать или отклонять изменения

Время на прочтение6 мин
Охват и читатели8.3K
Довольно часто в пользовательском интерфейсе есть кнопки «Сохранить» и «Отмена». Особенно часто эти кнопки используются в формах. Несмотря на то, что в современном мире всё идёт к упрощению интерфейса, но на эти кнопки всё равно есть спрос.

Сегодня я предлагаю разобраться как с помощью KnockoutJS принимать и откатывать изменения для индивидуальных observables так и целых view models.

Знакомые с KnockoutJS сразу могут выдать две ссылки на лучший блог о сабже

У этих методов есть как плюсы, так и вполне существенные недостатки, от которых нужно избавлятся. Недостатки с функциональной точки зрения
  • Dirty flag — не позволяет сохранять изменения, а только сбросить их в начальное состояние.
  • protectedObservable — никто не видит изменений observable до тех пор, пока не произойдёт commit. Это ограничение сильно удручает при использовании dependent observables, к примеру.

Ну и к тому же, они нацелены на индивидуальные observable'ы, а хотелось бы работать с несколькими полями сразу.

Под катом детально разберём процесс создания простого механизма, который сделает работу с принятием и отменой изменений простой и прозрачной.

Читать дальше →

Три подхода к методологии построения сложного клиентского приложения

Время на прочтение6 мин
Охват и читатели11K
Наверно, не существует единого рецепта, который бы всех устроил. Это касается любой проблемы. Для разработчиков этот тезис самоочевиден, и вовлеченность в использование и проектирование отдельных инструментов определяется, главным образом, лишь профессионализмом. Изобретение велосипедов романтично и неизбежно.

Особо вероятно изобретение велосипеда, когда рост сложности приложения происходит постепенно и в некотором смысле незаметно. Сложное приложение обычно является богатым приложением (rich), его элементы и особенности специфицированы W3C www.w3.org/TR/backplane. Известный JavaScript-евангелист Addy Osmani так дополнительно определяет сложное приложение: “По-моему, крупное JavaScript приложение есть нетривиальное приложение, требующее значительных усилий разработчика для поддержки, причем наиболее сложное оперирование обработкой и отображением данных ложится на браузер” (http://addyosmani.com/largescalejavascript/).
Читать дальше →

Открытое письмо лидерам JS касательно точек с запятой

Время на прочтение6 мин
Охват и читатели5.4K
Такое письмо я получил от Шона Сильвы прошлой ночью:
Я просматривал ваш код для проекта npm.js (в частности, вот этот файл: https://github.com/isaacs/npm/blob/master/lib/npm.js), и заметил, что вы выравниваете запятые под ‘r’ в выражениях var, и под [ и { в литералах массивов/объектов. Мне очень нравится такой способ форматирования, но я не решаюсь его использовать, так как большинство ресурсов о js насаждают страх перед хаосом, который воцарится в коде из-за автоматической расстановки точек с запятой, если вы не будете заканчивать строки чем-нибудь, что предполагает продолжение.
Безопасно ли располагать запятые таким образом в «браузерном» коде, или это только в node возможно?

Я написал несколько абзацев, и решил сократить их до следующего ответа:
Да, это полностью безопасно, и это совершенно валидный JS, понимаемый каждым браузером. Closure compiler, yuicompressor, packer, и jsmin — все могут правильно минифицировать его. Производительность нигде не просядет.
Мне жаль, что вместо того, чтобы обучать вас, лидеры сообщества этого языка прививали вам ложь и страхи. Это позор. Я рекомендую изучить, как на самом деле терминируются инструкции в JS (и в каких случаях они нетерминируемы) — и вы сможете писать код, который сочтете прекрасным.

Читать дальше →

Kinetic ScrollBar

Время на прочтение4 мин
Охват и читатели15K
Эффект кинетической прокрутки сейчас можно встретить практически везде. Это действительно удобно при управлении пальцами или стилусом и довольно забавно при прокрутке мышкой.

В вебе такой эффект пока только приживается. Да и не так уж просто придумать, где он будет удобен… В голову приходят пожалуй лишь scroll bar’ы, которые используются для прокрутки некоторого контента, в основном картинок, внутри страницы. Для примера, можно посмотреть реализацию галереи практически на любом сайте. Согласитесь, было бы значительно интереснее, если бы ползунок не останавливался сразу, как только отпустили кнопку мыши, а продолжал бы двигаться дальше по инерции, постепенно останавливаясь…
Я попытаюсь рассмотреть процесс создания такого эффекта «кинетического» scroll bar’a. Что получилось в итоге можно посмотреть здесь
Читать дальше →

Оптимизация JavaScript для ускорения загрузки веб-страниц

Время на прочтение2 мин
Охват и читатели16K
Инженер из компании Google, автор трёх книг по веб-производительности и оптимизации, Стив Содерс (Steve Souders) опубликовал презентацию "JavaScript Perfomance" о том, какие методы нужно применять, чтобы скрипты меньше тормозили загрузку страниц.

По статистике WebPagetest, блокировка загрузки файлов .js на сайтах из Alexa Top 100 снижает среднее по медиане время загрузки страницы c 3,65 с до 2,487 с, то есть на 31%. Если вы видите медленную загрузку веб-страниц и хотите улучшить этот показатель, то, по мнению Стива Содерса, первым делом нужно посмотреть на JavaScript.
Читать дальше →

Фильтрация текстов по списку регулярных выражений

Время на прочтение4 мин
Охват и читатели4.5K
В сборнике скриптов для сайта HabrAjax 0.79 появилась возможность сворачивания аннотаций в ленте для указанных читателем авторов и по совпадению указанных строк (можно назвать, сворачивающих строк). Например, если читатель хочет выделить произведения некоторого автора, показывая только название статьи в любой ленте (главная, избранное, поиск), он вносит имя автора в специальный список и включает настройку сворачивания. Или — сворачивать аннотации, если в названии или в тексте аннотации встречается некоторая последовательность символов (не слов, а символов). Второй фильтр работает на регулярных выражениях, поэтому читатель фактически задаёт не строки, разделённые запятыми, а тела регулярных выражений, с игнорированием размера букв, но с учётом всех символов и пробелов.
Читать дальше →

PhantomJS + JSCoverage + QUnit или консольные JS юнит-тесты с подсчетом покрытия

Время на прочтение4 мин
Охват и читатели6.2K
Поговорим о случае, когда нужно автоматизировать запуск тестов и сбор статистики покрытия, к примеру, для гипотетической клиентской JS библиотеки. Задача не совсем тривиальна, поскольку для нормальной работы библиотеки требуется полноценный браузер — библиотека является визуальной оберткой над стандартными компонентами формы. Библиотека должна быть написана так, чтобы все взаимодействие с ее объектами можно было производить с помощью методов, которые они предоставляют, а не только через непосредственные манипуляции с DOM (т.е. любое действие юзера может быть запущено не только событием, допустим, клика по чему-то, но и руками через метод). Но тем не менее, надо этот DOM иметь, чтобы результаты работы методов помимо изменения внутреннего состояния объектов также отображались и в DOM. В целом напоминает приложения на Sencha (ExtJS).

Для достижения поставленных целей нужен некий контролируемый браузер, фреймворк для запуска тестов и утилита, которая позволит посчитать покрытие кода тестами, а также некоторый код, который соединит все компоненты.
Читать дальше →

Ближайшие события

Backbone Boilerplate

Время на прочтение1 мин
Охват и читатели9.1K
Американская компания Bocoup, как и многие другие веб-разработчики, постоянно использует в работе известный «пуленепробиваемый» шаблон для создания HTML5-сайтов HTML5 Boilerplate. Однако, сотрудники Bocoup решили не только пользоваться, но внести свой вклад в общее дело и выкатили для всеобщего пользования не менее концептуальную вещь — Backbone Boilerplate, набор лучших средств и приёмов для создания приложений Backbone.js.

Прямо из коробки мы получаем:
  • Backbone, Underscore и jQuery, всё это на базе HTML5 Boilerplate.
  • Инструмент Windows/Mac/Linux для прекомпиляции шаблонов, связывания и минификации всех библиотек, кода приложения и CSS.
  • Лёгкий веб-сервер node.js.
  • Многочисленные сниппеты кода для Backbone, облегчающие жизнь.
В Backbone Boilerplate логичная и элегантная файловая система (отдельно код, вспомогательные файлы, тесты, билды) и есть возможность создавать собственные классы Models/Collections/Views/Routers внутри модулей.

Разработчики говорят, что проект появился в результате их долгих попыток работать с другими шаблонами: оказалось, что в одних нет процесса сборки, другие налагают излишние ограничения. Новый Backbone Boilerplate призван исправить ситуацию и вполне может стать каноническим, каким стал тот же HTML5 Boilerplate.

Простая минималистская реализация сложных JavaScript приложений

Время на прочтение12 мин
Охват и читатели9K
Я хочу описать простой минималистский подход к разработке сложных JavaScript приложений. Из внешних библиотек будут использоваться только jQuery и мой js-шаблонизатор, причём из jQuery используются только $.ready(), $.ajax() и $.proxy() — т.е. суть не в библиотеках (их тривиально заменить на предпочитаемые вами), а в самом подходе.

В основе подхода лежат две идеи:
  1. JavaScript виджеты — небольшие модули, каждый из которых «владеет» определённой частью веб-странички (т.е. всё управление этой частью странички происходит исключительно через методы этого модуля, а не через прямую модификацию DOM — инкапсуляция). Виджет отвечает исключительно за функциональность, но не за внешний вид; поэтому прямая модификация части DOM, которым «владеет» виджет, снаружи виджета допускается — но только для чисто дизайнерских задач (для архитектуры и общей сложности приложения нет принципиальной разницы между коррекцией внешнего вида через CSS или jQuery).
  2. Глобальный диспетчер событий. Взаимодействие между виджетами осуществляется путём посылки сообщений глобальному диспетчеру (слабая связанность, паттерн Mediator/Посредник), а уже он принимает решение что с этим сообщением делать — создать/удалить виджеты, дёрнуть методы других виджетов, выполнить дизайнерский код, etc. В отличие от динамического подхода к обработке событий (когда обработчики конкретного события добавляются/удаляются в процессе работы) статический диспетчер сильно упрощает понимание и отладку кода. Безусловно, есть задачи, для которых нужны именно динамические обработчики событий, но в большинстве случаев это избыточное усложнение, поэтому всё, что можно, делается статическими обработчиками.

Читать дальше →

ISO 8601 и ECMAScript — головная боль от разночтения стандартов

Время на прочтение3 мин
Охват и читатели11K
Разрабатываем мы тут некоторый сервис интеграции с очень сторонней системой. Сам сервис работает на Node.js. И всё бы хорошо, но только недоступность сервера во время сборки мусора очень нервировала стороннюю систему.

В канун нового года было решено сделать серверу подарок — обновить Node.js с версии 0.4.8 до 0.6.6 В силу ряда организационных причин, обсуждать которые здесь не очень хочется, обновление было проведено сразу на боевой системе и даже без регрессионного тестирования.

Неужели в этой ситуации что-то могло пойти не так?
Могло и пошло.

Вышла «бета» скрипта HabrAjax

Время на прочтение6 мин
Охват и читатели1.3K
Скрипт и стили для Хабра выложены в пользование и дальнейшее развитие. Количество «фич» довольно большое, поэтому, чтобы не затягивать дальнейшую разработку, скрипты и стили проработаны до необходимого минимума. Бесконечно улучшать просто нет смысла, потому что на сайте постоянно добавляются новые коды и вёрстка, старое ломается, функции приходится восстанавливать. Поэтому идея выкладки в формате «беты» — в том, чтобы различные пользователи, вдохновлённые возможностями оболочки (скриптов и стилей), прониклись идеей небольших доработок «под себя» этого основного скрипта, и тогда общая работа пошла бы заметно быстрее. Ведь совсем нетрудно и интересно потратить вечер для красивой «фичи» на 30-50 строк кода, но когда таких фич набирается 20 — стольких вечеров становится не хватать и требуется подключение сил других разработчиков.
Что заложено в скрипты и стили?

Динамические графики на основе highstock

Время на прочтение4 мин
Охват и читатели24K
Здравствуйте. Я представляю одну из ведущих танцевальных онлайн-радиостанций в России — FreshBeat Radio.

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

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

В этой статье, я расскажу вам о том, как это визуализировать и периодически обновлять с помощью Highstock. На Хабрахабре уже было несколько статей про этот набор инструментов, но все они описывали работу только со статическими данными.
Читать дальше →

Самовызывающийся конструктор Джона Резига и размышление о том, почему это решение не прижилось

Время на прочтение7 мин
Охват и читатели13K
Настала пора мысленно вернуться на четыре с небольшим года назад ко блогозаписи «Simple “Class” Instantiation» из блога Джона Резига, прославленного создателя необыкновенно удобной библиотеки jQuery. И вернёмся.

Однако же, так как я вовсе не вижу её в результатах поиска на Хабрахабре по слову «Resig», то поневоле приходится думать, что эту полезную блогозапись никто не удосужился перевести (или хотя бы пересказать) за четыре прошедших года — мне придётся, стало быть, самостоятельно пересказать блогозапись Резига прежде, чем я исполню моё главное намерение: поразмыслить вслух, почему же предложенный Резигом способ решения указанной им проблемы так и не сделался общераспространённым. И перескажу. (Сам этот пересказ ужé был бы полезен читателю, даже кабы я к нему ничего от себя не прибавил. А я прибавлю.)



Шестого декабря 2007 года Резиг рассмотрел, что получается, когда в джаваскрипте используется операция «new» для создания объекта (в языках с классами мы сказали бы «экземпляра класса»):

function User(first, last){
   this.name = first + " " + last;
}

var user = new User("John", "Resig");

Резиг справедливо подметил, что для начинающих программистов на джаваскрипте не вполне очевидно, что появление «this» в коде функции указывает на то, что перед нами конструктор объекта. (Я от себя в скобках прибавлю: если функция находится в недрах некоторой библиотеки, то это обстоятельство нуждается также и в документировании — а не то пользователь библиотеки не многим будет отличаться от новичка: исходный код с телом функции читают не все, тем более что он нередко применяется в минифицированном, не читаемом виде.)

Поэтому, рассудил Резиг, рано или поздно кто-нибудь попробует вызвать «User()» без «new» и тем получит на свою голову сразу две неприятные проблемы. Во-первых, переменная «user» останется неопределённою: функция «User()» задумана ведь как конструктор, а значения она никакого не возвращает. Во-вторых, что ещё хуже, попытки обращения к «this» изнутри такого (некорректно вызванного) конструктора неизбежно приведёт к засорению глобального пространства имён — а это чревато зловещими и трудноуловимыми последствиями. Обе проблемы Джон Резиг продемонстрировал на примере:

var name = "Resig";
var user = User("John", name);
// здесь переменная «user» не определена
// БОЛЕЕ ТОГО: значение «name» теперь ужé не «Resig»!
if ( name == "John Resig" ) {
   // фигассе!…
}

Читать дальше →

Эмуляция события вызова функции

Время на прочтение2 мин
Охват и читатели5.7K
Около полугода назад мне задали примерно такой вопрос: “Я использую крупный фреймворк, запускающий некую функцию по действию пользователя. Хочу, не меняя кода этой функции, выполнить по событию вызова этой функции свой код.”. Практика далеко не лучшая, события вызова функции не существует, я просто покрутил пальцем у виска и сказал, что это жуткий говнокод, так делать не стоит, да и это, просто-напросто, — невозможно.

Пару дней назад, направляясь домой относительно тёплым зимним вечером, не типичным для Одессы, у меня возникла нетипичная мысль: “А что если попробовать сделать то, что спрашивал Богдан полгода назад?”. Придя домой, я включил компьютер, и, в течении пары минут, сделал то, что задумал. В первую очередь, меня интересовало то, как будут себя вести встроенные методы, если их переопределить, и можно ли после этого как-нибудь вызвать прежнее их состояние, бывшее до переопределения. Я знал, что, если объект переопределяют, то ссылки на него не уничтожатся, сохраняя прежний вид. Что касается встроенных функций, имелись сомнения. Оказывается, можно.

Скорее всего, мне даже никогда не придется воспользоваться таким инструментом, но, чисто гипотетически, возможно, у кого-то возникнет задача проследить вызов той или иной функции, получив отчет о каждом вызове, состоящий из:
  1. Результата выполнения
  2. Переданных аргументов
  3. Контекста вызова (что есть this при вызове)
  4. Количества вызовов функции после создания обработчика

(Этот список полностью соответствует аргументам, передающимся в обработчик)
Очень мало буков