Прокси — это новые объекты JavaScript для которых программист должен определить своё поведение. Стандартное поведение всех объектов определено в движке JavaScript, который чаще всего написан на C++. Прокси позволяют программисту определить практически любое поведение объекта JavaScript, они полезны для написания базовых объектов или оберток функций или для создания абстракций виртуальных объектов и предоставляют API для мета-программирования. Сейчас Прокси не входит в стандарт, но его стандартизация запланирована в ECMAScript Harmony. Чтобы избежать путаницы уточню, что эти Прокси не имеют ничего общего с прокси серверами.

Где их можно использовать

1. Общие промежуточные абстракции
2. Создание виртуальных объектов: обертки существующих объектов, удаленные(от слова далекий) объекты, ленивое создание объектов (Пример ORM — Ruby ActiveRecord, Groovy GORM)
3. Прозрачное ведение логов, трассировки, профилирования
4. Внедрение предметно-ориентированных языков
5. Динамический перехват несуществующих методов, создание отсутствующих методов (__noSuchMethod__)
6. База для специфичных итераторов

От переводчика: Я думаю многие читали статью Rey Bango — What to Read to Get Up to Speed in JavaScript, но до хабра обсуждение так и не докатилось. Предлагаю закрыть этот пробел и поговорить о хороших книгах, блогах, тренингах и конференциях, посвященных в первую очередь клиентскому JavaScript и клиентской веб-разработке. Чтобы не копипастить оформляю статью в виде перевода.

Сейчас в рассылке JSMentors JavaScript идет обсуждение книг, который стоит прочитать, чтобы улучшить свои знания. Там было много позитивных отзывов и предложений. Я хочу показать вам те книги и интернет-ресурсы, который я считаю важными и которые помогут вам в обучении. На этой странице я перечислил большое количество источников, разделенных по уровням.

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

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

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

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

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

Сегодня в рассылке DayliJS я открыл для себя одно прекрасное расширение — jQuery Sausage, которое позволяет добавлять на страницу очень удобную схему навигации — блоки, разделенные заголовками, масштабируются относительно высоты контента и отображаются как diff-аннотации в WebStorm или NetBeans (нечто подобное можно видеть слева поста).


Картинка кликабильна ведет на пример jQuery Sausage

Это очень удобный способ навигации по большим спискам статей и по параграфам статей. Эксперимента ради я решил воссоздать этот плагин отдельно от jQuery и jQuery UI и заточить его под хабр (оригинальный плагин тянет за собой несколько Кб лишних скриптов). Моё расширение сканирует блоки статей или блоки заголовков и отображает их в виде цепочки блоков. При наведении на блок отображается заголовок, по клику на блок страница скроллится на соответствующий заголовок страницы. К сожалению, не все посты хорошо отформатированы, поэтому такой способ навигации не всегда эффективен. Т.к. это эксперимент, то некоторые фичи jQuery Sausage пока урезаны.

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

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

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

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

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



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

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

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

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

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

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

В статье пойдет речь о Must Have тулзе для удаленной отладки Node.js приложений либо кода на WebKit браузерах node-inspector.

Для отладки кода в браузере, впринципе удаленная отладка и не нужна, не считая мобильных устройств, где она фактически не возможна потому что крайне не удобна. Совсем другое дело с серверным JavaScript. Node.js имеет несколько отладчиков, восновном продвигают ndb Node Debugger — консольная утилита для дебага Node.js приложений. Подходит только для фанатов консоли либо для мазохистов. Работать не удобно, отлаживать долго, по сравнению с отладкой кода в том же FireBug.

Что же умеет node-inspector:
1. Удаленная отладка
2. Отладка в графическом интерфейсе WebKit-debugger (На клиент ничего не нужно ставить — у вас все уже есть)
3. Редактирование runtime-кода!
4. Использует WebSockets, и никакого polling'а!
5. Удаленное профилирование блоков кода c использованием v8-profiler

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

Что такое requestAnimationFrame?

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

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

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

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



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

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



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

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

Deferred объекты появились в jQuery 1.5. Они позволяют отделить логику, которая зависит от результатов выполнения действия от самого действия. Для JavaScript Deferred объекты не новы, они уже были в MochiKit и Dojo, но с изменениями логики jQuery ajax от Julian Aubourg, внедрение Deferred объектов было неминуемо. С Deferred объектами несколько callback могут быть связаны с результатом задачи и любые из них могут быть привязаны к действию даже после начала его выполнения. Выполняемая задача может быть асинхронна, но не обязательно.

Deferred объекты теперь встроены в $.ajax() таким образом вы будете получать их автоматически. Обработчики теперь могут быть связаны с результатом следующим образом:

// $.get, ajax запрос, он асинхронный по умолчанию
var req = $.get('foo.htm')
   .success(function( response ){
      // что-нибудь делаем с ответом
   })
   .error(function(){
      // делаем что-нибудь если запрос провалился
   });
 
// это выполнится перед тем как $.get() будет выполнено
doSomethingAwesome();
 
// Делаем что-то ещё перед завершением запроса
req.success(function( response ){
   // делаем  что-то ещё с ответом
   // он будет выполнен когда запрос завершится, а если запрос завершен, то будет вызван немедленно
   // если запрос уже был выполнен
});

В статье собраны всем известные методы и предельно извращенные. Эту статью я решил написать после недавнего прочтения поста в блоге Badass JavaScript и решил её дополнить своими находками.

Первый способ

Он всем известен — обфускация минимизаторами такими как JS Packer, JSmin, YUI Compressor, Closure compiler или можно просто пугуглить «JavaScript Obfuscator» и найдется ещё сто штук разных обфускаторов.
Они превращают существующий код

function MyClass(){
    this.foo = function(argument1, argument2){
        var addedArgs = parseInt(argument1)+parseInt(argument2);
        return addedArgs;
    }
    var anonymousInnerFunction = function(){
        // do stuff here!
    }
}

В какой-то такой вид:

function MyClass(){this.foo=function(c,b){var d=parseInt(c)+parseInt(b);return d};var a=function(){}};

Или такой:

var _0xd799=["\x66\x6F\x6F"];function MyClass(){this[_0xd799[0]]=function (_0xefcax2,_0xefcax3){var _0xefcax4=parseInt(_0xefcax2)+parseInt(_0xefcax3);return _0xefcax4;} ;var _0xefcax5=function (){} ;} ;

Или вот такой:

eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('4 0="3 5!";9 2(1){6(1+"\\7"+0)}2("8");',10,10,'a|msg|MsgBox|Hello|var|World|alert|n|OK|function'.split('|'),0,{}))

Но ничего не стоит его восстановить с помощью jsbeautifier.org либо просто убрать eval и получить исходный код, многое потеряем, но смысл кода восстановим. Ну и с первого взгляда мы видим, что перед нами JavaScript.

Все это были цветочки под катом жесткие методы обфускации.

Если вы пишете документацию открытого исходного кода, то это не просто вежливые дополнение к проектам, она в определенной степени помогает вашему проекту взлететь. Хорошонаписаный README помогает, но полная документация по API делает проект более профессиональным. Даже если ваш проект с закрытым исходным кодом, документация поможет новым коллегам более быстро адаптироваться или поможет вам вспомнить как все работает в длительных проектах.

Давайте посмотрим как устроена документация в популярных JavaScript фрэймворках.

jQuery

Документация jQuery располагается по адресу docs.jquery.com и представляет из себя wiki в которой описана вся документация по API. Любая крупная область API включена в навигацию, каждая страница имеет список методов для этой области. Страница содержит примеры кода и комментарии на Disqus.
Комментарии исходного кода в основном связаны с багами или с необычным фрагментом кода, который требует пояснений.

Далее: Prototype, JSDoc и несколько специфических подходов к JavaScript документации

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

В статье: архитектура расширения, интересные моменты в процессе написания Habra Meter(далее HM) на Bexf, публикация расширения.

Недавно мне пришлось доточить одно расширение Оперы под себя, раньше я ими совершенно не занимался. Открываю код, о ужас! Куча непонятных цепочек пространств имен (window.opera.extension.tabs, window.opera.contexts.toolbar, window.opera.extension.broadcastMessage) которые с первого взгляда и не пойми что таят (я и не ждал легкого пути). Пришлось открыть dev.opera.com для дальнейшего изучения. Расширение я все-таки доточил и решил заодним написать фрэймворк, который значительно упрощает разработку расширений для Оперы.

jQuery очень мощная библиотека, но некоторые его богатые возможности неясны, если вы не изучали исходный код jQuery и не читали книгу jQuery Pocket Reference (автор пишет my new book), вы можете не знать о них. В этой статье представлены отрывки из этой книги — 5 полезных вещей о которых вы могли не знать.

1) Вы вы не обязаны использовать $(document).ready() Если вы хотите выполнить функцию, когда документ готов для манипулированию просто передайте её в $()

2) Вы, наверное, уже знаете, что вы можете передать тэг в функцию $() для создания элемента этого типа и, что вы можете передать атрибуты объекта (в качестве второго аргумента), которые будут установлены на созданный элемент. Вторым аргументом может быть любое свойство, который вы передаете в метод attr(). Кроме того, если какое-либо свойство имеет тоже самое имя, что и событие (click, mouseover), то значение свойства используется в качестве функции обработчика данного события.
Следующий код, например, создает новый элемент, устанавливает три HTML атрибута и регистрирует функцию обработчика события(click) на нем:

var image = $("<img>", {
                  src: image_url,
                  alt: image_description,
                  className: "translucent_image",
                  click: function() {$(this).css("opacity", "50%");}
               });