В своём фреймворке AtomJS я активно использую аксессоры — геттеры и сеттеры:

Foo = atom.Class({
    get bar () {
        return this._bar;
    },
    set bar (bar) {
        this._bar = bar;
    }
});

Я уже описывал теорию, но в топике я расскажу о том, как заставить их работать во всех современных браузерах, а именно — как разрулить ситацию с тем, что Internet Explorer 9 ничего не знает о __defineSetter__ и подобных методах.

За нахождение хорошей фотографии спасибо ant99 а также фотографу.
Некоторое время назад я писал о том, как блокировать видимость в JavaScript с помощью конструкции let. Как оказалось из комментариев, let (как и JavaScript 1.7-1.8.5) поддерживается только браузерами на основе обезьянок и Rhino. Меня постигло разочарование, но минут 15 назад я придумал (хотя это громко сказано, наверное, и до меня было уже придумал кто-то) костыль для не такого красивого, но тем не менее рабочего кода. Он использует конструкцию with (да, я знаю, что она причислена к Bad Parts из-за ненужности и неэффективности, но вот прямо сейчас я опровергну первое утверждение).

Представьте, у вас есть проект, состоящий из нескольких модулей и, например, jQuery или любая другая библиотеки в CDN. У вас есть огромное желание не показывать пользователю ваши глобальные переменные и по возможности не показывать jQuery и $. Ну и, конечно, сделать все без изменения кода проекта.
Причины для сокрытия глобалов могут быть разные: для красоты, из соображений безопасности, для затруднения анализа кода и другие. Пользователь взаимодействует с вашим кодом, используя события, которые он не сможет сломать — больше ему ничего и не нужно.

Самый очевидный способ — создать единственный namespace в который пассивно экспортировать прочие объекты, а jQuery и $ в конце удалить.

После сборки код будет какой-то такой:

(function(window, undefined){
    // include ./js/YourNamespace.js
    var YourNamespace = (function () {
        // что-то ещё
        return {};
    }());
    // include ./js/YourNamespace/SomeObject.js
    YourNamespace.SomeObject = (function () {
        // что-то ещё
        return function () {

        };
    }());
    // Cleanup
    delete window.$;
    delete window.jQuery;
}(window));

Это идеальный вариант, но чаще бывает не так. Посмотрите ваш код, такой ли он?

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

Модульный подход довольно распространённая техника программирования в JavaScript. Обычно его понимают довольно хорошо, но продвинутые техники описаны недостаточно. В этой статье я рассмотрю основы и затрону некоторые сложные приёмы, включая один, по моему мнению, оригинальный.

Основы

Мы начнём с несложного обзора модульного подхода, хорошо известного с тех пор, как Эрик Миралья (Eric Miraglia) из YUI впервые об этом написал. Если вам уже знаком модульный подход, переходите сразу к «Продвинутым техникам».

Анонимные замыкания

Как гласит статья из Википедии, Песочница — механизм для безопасного исполнения программ. Песочницы часто используют для запуска непротестированного кода, непроверенного кода из неизвестных источников, а также для запуска и обнаружения вирусов.

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

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

Сегодня попробуем написать небольшую игру Понг используя html5 тег canvas. Те кто не хочет читать пост тот может сразу ИГРАТЬ.
Если верить Википедии, то можно узнать что Pong является простейшим симулятором настольного тенниса. Небольшой квадратик, заменяющий пинг-понговый мячик, двигается по экрану по линейной траектории. Если он ударяется о периметр игрового поля или об одну из нарисованных ракеток, то его траектория изменяется в соответствии с углом столкновения.
Геймплей состоит в том, что игроки передвигают свои ракетки вертикально, чтобы защищать свои ворота. Игрок получает одно очко, если ему удаётся отправить мячик за ракетку оппонента…

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

Практически все Javascript-программисты пользуются консолью в браузерах. Консоль встроена в Хром, Оперу, IE и устанавливается с Firebug в Фоксе.
Но у неё есть пару неудобств, которые можно очень легко исправить. Это:

• Ошибки, когда консоль не определена
• Невозможность использовать вне контекста
• Невозможность отключить во время production
• некроссбраузерность

Исправим эти проблемы легко и быстро!

Продолжаем тему операторов, на этот раз вас ждет рассказ об операторе запятая.

Начнем с забавного твита:



'c' в конце — это оператор запятая. Последняя в списке значимых операторов, мало документированная, но очень полезная. Она не так распространена, но она мне очень нравится. Она проста, элегантна, и с ней лучше быть в хороших отношениях.

Что она делает?

Оператор запятая выполняет оба операнда (слева направо) и возвращает значение второго оператора. (MDC)

var a = (7, 5);
a; //5

var x, y, z
x = (y=1, z=4);
x; //4
y; //1
z; //4

PhantomJS это все плюшки WebKit из консоли с управлением на JS и поддержкой различных стандартов и технологий: DOM, CSS, JSON, Canvas и SVG.

Внутри несколько примеров использования

Проблема

Иногда нам необходимо протестировать скрытые (closure) функции или интерфейс, изолировав использование скрытых функций. Также порой требуется задать исходное состояние скрытых переменных или наоборот считать их состояние после теста. В этом случае мы строим дополнительный набор функций, обеспечивающий доступ внутрь объекта. Часто этот набор бывает очень громоздким и направлен только для обеспечения тестируемости модуля.

Но есть простой способ избежать написания этого кода.

Сегодня начал писать проект частью которого были неубиваемые таймеры с Воркерами, выдерживающие полный перебор clearTimeout/clearInterval. Одним из условий было, что воркер или прочие функции/объекты могут подменить перед запуском скрипта. Для этого я написал функции isNativeObject(), isNativeFunction(), каждая имеет с десяток условий и определяют подмену/не подмену функции/объекта и косвенных признаков указывающих на «мухлёж».

Но тут дело не в этих функциях и тем более не в моём проекте. Прогоняя всевозможные нативные объекты я наткнулся на вопиюще разное поведение браузеров при обработке объектов с typeof и toString.

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

Worker.prototype + "";
// FF 3.6 [xpconnect wrapped native prototype]
// Op 11 [object DedicatedWorkerPrototype]
// Sa 4 [object WorkerPrototype]
// Ch 10 [object Object]

Сафари во все нативные конструкторы и прототипы подсовывает Prototype, Constructor — [object WorkerConstructor], [object WorkerPrototype]

В статье описаны другие интересные случаи поведения браузеров с typeof и toString.

JSARToolkit это JavaScript библиотека, портированная с FLARToolkit (Flash) и предназначенная для отслеживания AR Маркеров на видео. ARToolKit преобразует данные из маркеров в 3D-координаты, используя их можно наложить изображения или 3D-объекты на плоскую поверхность.

Вы уже наверно видели JSARToolkit в действии на демке Ilmari Heikkinen — Remixing Reality.
Демо Ilmari это часть Мозилловской “Web O’ Wonder”, — сайт, демонстрирующий новые технологии, которые будут добавлены в Firefox 4.

Исследования HTML5 клипов

Заказчик поставил нам задачу — оценить возможность использования JSARToolkit для онлайн HTML5 клипов. (Нас попросили рассмотреть только тех пользователей, которые использовали последнюю версию Firefox и Chrome)
Вот некоторые из вопросов, на которые мы бы хотели ответить:
— Будет ли обработка быстрой на медленных компьютерах?
— Сколько AR Маркеров мы можем отследить одновременно?
— На сколько быстро можно двигать маркер, чтобы он стал не отслеживаемым?
— Какое наибольшее расстояние на котором камера может отследить маркер?

Ответы на эти вопросы, исходный код и демки можно найти ниже.

Уже второй год я участвую в JS1k, в прошлом году был пробный скрипт, сейчас я решил подойти основательно. Приложения я уже написал и отправил. В статье я хочу поделиться своим опытом: как стоит писать приложение для JS1k, чем сжимать, как сократить код в 4 раза и вообще как впихнуть что-то интересное в 1 Кб.

Тема текущего JS1k "Oregon Trail" — классическая игра для Apple II (что это можно нагуглить). Поэтому рекомендуется написать что-то в этом духе, но это не обязательно.

Начало

Вам необходимо придумать небольшое приложение или демку, которое по вашему мнению может влезть в 1кб (продумать детали и управление). Если вы сомневаетесь в своих прикидках, то можно посмотреть, что впихнули в прошлом году: Legend Of The Bouncing Beholder, Tiny chess. Прочитайте правила и используйте html шаблон — тогда ваше приложение будет 100% работать в демо среде.
Начните писать скрипт, без каких-либо оптимизаций, но следите за его размером. Если он стал больше 4-5Кб — вам стоит придумать другую тему или в будущем придется попотеть (у меня было 4393 байт).

Я думаю каждый, кто хотя бы раз сталкивался с Canvas в встречал на своем пути одну не крайне не удобную вещь. При работе с Canvas для изменения любого параметра контекста или вызова метода, приходится обращаться сперва к контексту, а потом к методу/свойству — это очень напрягает.

Всегда хочется вот такой код:

var ctx = document.querySelectorAll('canvas')[0].getContext('2d');
ctx.fillStyle = '#eee';
ctx.strokeStyle = 'blue';
ctx.beginPath();
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.lineTo(10, 100)
ctx.lineTo(10, 10)
ctx.closePath()
ctx.stroke()
ctx.fill();

Превратить в цепочку:

ctx
.fillStyle('#eee')
.strokeStyle('blue')
.beginPath()
.moveTo(10, 10)
.lineTo(100, 10)
.lineTo(100, 100)
.lineTo(10, 100)
.lineTo(10, 10)
.closePath()
.stroke()
.fill();

Sausage.js — 1268 байт (скоро будет меньше килобайта), решающие ваши проблемы.
«Luke, use __noSuchMethod__» — и все дела, скажете вы. А как же поддержка доисторических браузеров?
Все кто не равнодушен к Canvas, цепочками вызовов и к Lisp прошу под кат

JavaScript Garden — справочник на английском, посвященный тонкостям JavaScript.

Из него я, например, узнал, что массивам можно задавать length:

var list = [1, 2, 3, 4, 5];
list.length = 3;
console.log(list); // => [1, 2, 3]

В этой статье раскрыто, как можно сделать очень простой аплоадер, с кодом только на клиенте, используя API хостинга картинок. Если вас интересует более продвинутый аплоадер с такими штуками, как ресайз, кроп, рисование и т.п. — читайте статью How to develop a HTML5 Image Uploader. Содержимое статьи примечательно использованием FormData() и Cross-Domain XHR.

В конкурсе браузерных игр Mozilla Labs Gaming победила игра Marble Run (github). Каждый участник рисует трассу для шарика, падающего под действием гравитации. По мере увеличения количества трасс становятся доступными новые строительные фигуры. Народ уже нарисовал около десяти тысяч трасс (см. галерею на сайте).



В разработке использовались PrototypeJS, cookies-js-helper и box2d-js.

Моя последняя тема про “минус ноль” вызвала много интереса. По этому сегодня я собираюсь описать ещё одну особенность JavaScript, на что меня так же вдохновил твит:

Без попытки повторить это в браузере, что вернет следующий код?

["1", "2", "3"].map(parseInt);

Метод console.log() — отличный способ вывести отладочную информацию, не мешая пользователю. Но знаете ли Вы, что объект console имеет еще уйму других не менее полезных методов? Очень редко разработчики используют этот функционал, ограничиваясь неблокирующим alert'ом. Что-ж, давайте исправим это положение.

Если вы никогда не писали код для выполнения анимаций, то вы можете дальше не читать :)

Что такое requestAnimationFrame?

Во всех ваших функциях анимаций вы используете повторяющийся таймер для применения изменений каждый несколько миллисекунд. Хорошие новости: производители браузеров решили «почему бы нам не дать вам API для этого потому, что мы, возможно, сможем оптимизировать некоторые моменты для вас». Итак, это основное API для создания анимаций на основе изменения DOM стилей, перерисовки canvas или WebGL

Зачем я должен это использовать?

Браузеры могут оптимизировать анимации идущие одновременно, уменьшив число reflow и repaint до одного, что в свою очередь приведет к повышению точности анимации. Например анимации на JavaScript синхронизированные с CSS transitions или SVG SMIL. Плюс ко всему если выполняется анимация в табе, который невидим, браузеры не будут продолжать перерисовку, что приведет к меньшему использованию CPU, GPU, памяти и как следствие снизит расход батареи в мобильных устройствах.