Представьте, у вас есть проект, состоящий из нескольких модулей и, например, 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.

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

Сегодня начал писать проект частью которого были неубиваемые таймеры с Воркерами, выдерживающие полный перебор 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 байт).

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.

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

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

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

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

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



DOM Storage (localStorage sessionStorage) кроме потрясающей возможности хранения информации на клиенте имеет ещё одну документированную, но малоизвестную возможность — уведомление об изменении/удалении элемента DOM Storage для всех окон открытых из текущего домена.

Вступление

Здравствуйте, Хабрачеловеки.

В этой статье я хочу рассказать сообществу о такой полезной штуке, как DOM Events. Все, кто хоть как то связан с Javascript, знают, что в этом языке события и их обработка являются одним из важнейших и часто используемых свойств, но не многие знают, как эти события генерировать программно. Собственно, этому и посвящена статья: в ней рассказано, что это, зачем нужно, и как это использовать. О listener'ах речи идти не будет, хоть эта тема весьма тесто связана с рассматриваемой.

С появлением online, offline событий многие разработчики, особенно мобильных веб-севисов возложили на них большие надежды. Казалось бы online, offline говорят нам когда у пользователя есть доступ к интернету, но на самом деле это далеко не так. Подробности их поведения когда-то давно описал Резиг в своем блоге.



Кратко — online, offline сигнализирует нам, что пользователь вручную переключился в оффлайн либо у него нет ни одного соединения с сетью. Фактически эти 2 события бесполезны в том виде в котором они представлены — я не знаю кто будет вручную переключать таб в режим онлайн/оффлайн, и с сетевыми подключениями тоже все плохо. Ну и, конечно, доисторические бразуеры не знают эти события.

Под катом элегантное и 100% кросбраузерное решение, позволяющее получить настоящие online, offline события.

Всем доброго!
jCanvaScript — это, как видно из «картинки для привлечения внимания», JavaScript-framework. Не трудно, я думаю, догадаться из названия топика, что предназначение библиотеки — работа с элементом HTML5 canvas. Под катом всех заинтересовавшихся ждет небольшой рассказ о библиотеке и о том, как она создавалась.

Многие наверняка используют индикаторы процесса, например, когда передаете/получаете какие-нибудь данные через AJAX.

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

Делать специальный GIF под каждую ситуацию довольно глупо. Поэтому правильное решение — использовать Canvas.

Сегодня обнаружил, что функция Math.atan2 возвращает разный результат в зависимости от того, с каким знаком в нее передать 0.

> 0 === -0           // => true
> Math.atan2(0, -0)  // => 3.141592653589793
> Math.atan2(-0, -0) // => -3.141592653589793

Работает это потому, что JavaScript хранит числа по стандарту IEEE 754, в котором все числа, включая ноль, имеют знак. Буквально вчера на эту же особенность обратил внимание некий Аллен Вирфс-Брок. Его способ проверки еще проще:

function isNegative0(n) {
  return n === 0 && (1 / n) === -Infinity
}

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