JavaScript *

Я попытаюсь просто объяснить, как работают замыкания в Javascript, как работает this, как создавать конструкторы для своих классов и чем различаются различные подходы к их созданию.
Статья не претендует на новаторство, но достаточно доступные объяснения how it works для новичков я не видел, и на мой взгляд — это три самых узких места в Javascript (не привязанному к какому либо контексту, серверу или браузеру, например).

Разработчик Андерс Эвенруд (Anders Evenrud) сделал любопытный проект OS.js, который он называет «операционной системой на Javascript».



Название поменяется в ближайшее время, потому что оно не отражает реальность: на самом деле OS.js — не операционная система, а оболочка и оконный менеджер в стиле Linux, с комплектом приложений на HTML5 и CSS2+, с PHP-бэкендом. Из приложений есть часы (HTML5-SVG, CSS2), видеоплеер (HTML5-Video), аудиоплеер (HTML5-Audio), файловый менеджер, терминал, графический редактор (HTML5-Canvas), игры и прочее. Они разработаны, в основном, на Glade Interface Designer (GTK+3 XML).

Долгое время в своих проектах использовал Flash-графики, вместо обычных картинок. Они и красивее и более функциональны, да и серверу не нужно напрягаться для генерации картинок. Но в связи с тем, что некоторые фирмы не очень дружат с Flash, пришлось поискать замену без использования Flash.

До этого использовал AmCharts, первым делом глянул на их сайт, они уже выпустили JS версию своих графиков, но как-то не понравилось, по ощущениям — сыровато еще. После недолгого гугления был найден Highstock, от авторов Highcharts JS. Отличается в первую очередь возможностью выводить графики, привязанные к времени, с большим количеством точек, масштабированием, удобной навигацией. Да и чисто внешне понравился больше AmCharts.

Хочу представить вам функцию-конструктор классов createClass.
Чем хорош этот конструктор:
1. Сам код выглядит более читабельным и понятным
2. Поддержка множественного наследования
3. Поддержка абстрактных методов
4. Наследование статических методов и свойств класса
5. Умный метод instanceOf (проверяет по всей цепочке классов)

С давних времён использую декораторы в JavaScript. Недавно увидел хабротопик про примеси, который натолкнул меня на мысль поделиться собственным опытом, ибо технологии немного похожие.

Что меня не устраивает в известных реализациях?

Реализации, предлагаемые по первым ссылкам в Google, работают не тем образом, как это работает в Python. Во многих статьях предлагается создать объект, заполнить его поля функциями и осуществлять вызовы отдекорированных через эти поля.
На первой странице есть несколько ссылок, где используются методы, сходные с моими,
Есть ещё много реализаций, но они мне неинтересны.
Расскажу наиболее правильную с моей точки зрения.

Нормальный декоратор

Итак, что такое декоратор?
Декоратор, это функция, которая добавляет функции-аргументу функционала.

Moment.js это отличная библиотека для работы с датами в JavaScript. Примеры под катом.

Однажды вечером, сразу после того, как я закончил разбираться с наследованием в JS, мне пришла в голову идея, что пора бы заняться чем-нибудь посложнее — например паттернами. На столе внезапно оказалась книжка Gof, а на экране ноутбука появился труд с названием «JavaScript patterns».

В общем, спустя пару вечеров, у меня появились описания и реализации на JavaScriptе самых основных паттернов — Decorator, Observer, Factory, Mediator, Memoization (не совсем паттерн, а скорее техника, но мне кажется что она прекрасно в этот ряд вписывается) и Singleton.

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

Хотите использовать Observable Collections? Слышали про Reactive Extensions? Нравится LINQ? Не нравится писать спагетти-код? Нужны монады? И все это на JavaScript?

После того, как с классическим (от слова класс) наследованием в JS стало вроде-бы все понятно, я решил разобраться с реализацией другого способа повторного использвоания кода — примесями. Несмотря на довольно непривычное название, способ этот чертовски прост.

Приветствую!

Я JavaScript разработчик и последнее время занимаюсь разработкой приложений на Ext JS. Для наглядности интерфейсов, иногда необходимо вбить в них JSON данные. Сперва я писал небольшие скрипты на PHP для генерации необходимых данных, но вскоре это стало забирать все больше времени и я отказался от этого подхода. Потом я начал создавать *.json файлы с данными, но зачастую мне требовалось наличие в них полей с уникальным ID и, по возможности, уникальными данными для красоты. Правда, задавать уникальные значения для полей, особенно в массиве из 100+ объектов занятие не благодарное.

И я решил немного автоматизировать данный процесс.

Сделан скрипт, показывающий результаты голосования одним числом не только разностью «за» и «против», но и с показом соотношения противоборствующих сил. Силы показываются в виде круговой (кольцевой) диаграммы, верхняя часть которой с зелёным цветом показывает долю голосов «за» (или отсутствует), а нижняя — долю «против», красного цвета. Таким образом, наглядно показано соотношение сил и насколько спорным было общее решение. От общего количества голосов зависит толщина кольца и насыщенность, что показывает статистическую устойчивость результата.

Проще посмотреть и оценить на примерах. Справа — примеры в списке топиков, взяты из разных анонсов, на одну оценку наведена мышь, открывающая арифметику суммарной оценки. Примеры из комментариев — далее.

Прочитав очередную умную книжку про javascript, стал разбираться в методах реализации в нём наследования. Ну, то есть всем конечно понятно, что в реальном, большом, проекте лучше всего для этого использовать функцию из какой-нибудь библиотеки( благо их много ), но ведь хочется понять, как это вообще работает.

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

Долгое время использовал в своих проектах, различные готовые JavaScript-календари для ввода дат, в частности Dynarch jsCalendar, и они полностью устраивали. Но в ходе разработки одного проекта, связанного с автострахованием, возникла необходимость довольно частого ввода дат из прошлого (дни рождения, дата выдачи паспорта и водительских прав, пенсионного и т.п.). Оказалось, что использовать календари в таких случаях не так уж и удобно, так как приходится отматывать несколько десятков лет назад и для этого приходится делать много действий мышкой.

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

Так например разработчики из команды Mozilla смеха ради сделали H.264 декодер на JavaScript. Любопытно, что скрипт при этом не был написан вручную.

Благодаря библиотеке jQuery примерно с 2006 года (то есть лет пять как) никому не надо объяснять, что такое method chaining: это та самая техника программирования, в которой методы объекта могут быть вызваны друг за другом по цепочке, как в jQuery.

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

obj.шмяк();
obj.тыдыжжь();
obj.ынц();

Вместо этого программист может вызвать все методы цепóчкою — в одну строку:

obj.шмяк().тыдыжжь().ынц();

Если же ему покажется, что такой вид записи хуже читается человеком, чем предыдущий (особенно когда у методов появляются параметры, иногда довольно обширные), то тогда программист может записывать имена методов с новой строки (JavaScript это позволяет), но всё равно экономить на имени объекта:

obj
   .шмяк(параметр1, параметр2, …)
   .тыдыжжь(параметр1, параметр2, …)
   .ынц(параметр1, параметр2, …);

На практике возможность такой техники обеспечивается тем, что ни один метод объекта не возвращает значение undefined. Вместо этого, если метод является командою, а не запросом (то есть выполняет некоторое действие, а не возвращает некоторое значение), то в конце его автор библиотеки пишет «return this» — этим-то и обеспечивается возможность записи вызова нескольких команд подряд в форме цепочки.

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

Удобство цепного вызова вызывает привыкание. Ну правда же: достаточно пару-тройку-другую недель попрограммировать на jQuery — и обыкновенные API начинают раздражать, даже бесить, своею допотопною невозможностью цепного вызова. Также недостаёт возможности задания их свойств в виде объекта, передаваемого методу, подобному .css({color: 'red', 'line-height': 1}) в jQuery.

Вообразите себе, например, как необыкновенно было бы удобно, кабы по холсту (<canvas>) можно было рисовать цепными вызовами в такой манере:

ctx.beginPath()
   .prop({
      lineWidth: 2,
      strokeStyle: '#333'
   }).moveTo(0,0)
   .bezierCurveTo(50,50, 80,80, 100,100)
   .stroke().closePath();

И средство для именно таких цепных вызовов появилось — благодаря Lea Verou. Вот оно:

Много воды утекло с тех пор когда я сел за написания своего файлового менеджера. В то время поддержка ИЕ6 считалась обычным делом, а про фичи HTML5 можно было только мечтать. В общем вот ссылка на версию 0.1.0 альфа. В конце первого топика, я написал, что планирую сделать в будущем, можно сказать я сдержал свое обещание и хочу представить Вам версию 1.0b. Из того, что планировалось, была отброшена идея внедрения авторизации в менеджер, потому что, как говорили здесь, это пятое колесо. Рассмотрим, что изменилось и что улучшилось, но для начала скрин

Компания Codecademy выполнила операцию Codecademy.add(investors) на сумму 2,5 миллиона долларов США. Кстати, одно из новых свойств объекта — Юрий Мильнер.

Напомним, что уникальный в своём роде стартап Codecademy обучает новичков JavaScript с помощью бесплатных интерактивных упражнений. Он открылся два месяца назад: за первые 72 часа работы сайт посетили 200 тыс. начинающих программистов, которые выполнили 2,1 млн уроков.

После получения такой значительной суммы инвестиций Codecademy может ещё долго работать бесплатно (в будущем они всё-таки планируют придумать какую-то бизнес-модель), а также может нанять контент-органайзеров и увеличить количество уроков на сайте. Новый контент будут добавлять силами коммьюнити по модели UGC. Например, недавно был запущен первый такой курс «Функции в JavaScript», написанный Альбертом Венгером.

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

Хотя про паттерн «Обозреватель (Наблюдатель, Observer)» сказано достаточно, в том числе и на Хабре, вкратце повторюсь. Суть паттерна в наблюдении за состоянием неких субъектов системы и соответствующей реакции наблюдателей на изменения этих состояний. За одним субъектом может следить несколько наблюдателей, причём сам он об этом не знает (слабое связывание), но исправно оповещает всех об изменении состояния.

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