JavaScript F.A.Q: Часть 1

[@Anexroid]

Спасибо. Чем больше таких топиков — тем меньше тем на форумах и в гуглоответах вида «А как ...?».

[@cbone]

Огромное Вам Спасибо с Большой Буквы!

[@int03e]

Спасибо, действительно большая работа.

[@SowingSadness]

17. Как корректно получить глобальный объект без его прямого указания, без eval и при 'use strict'?

перепроверил, все корректно работает.

«use strict»;
var global = (function( global) { return global; })( this );

[@azproduction]

Уточню, что именно такой код не корректно запускать в консоли ("use strict" не сработает).

(function () {
    "use strict";
    var global = (function(global){ 
        return global;
    })(this);
    return global; // undefined
}());

Почему так происходит можно узнать в статье JavaScript Strict Mode § Почему я не могу включить Strict Mode в консоли моего браузера?

[@SowingSadness]

Есть одно но. В вопросе никто не говорил про консоль.

[@azproduction]

Все верно. Я на всякий случай написал ;)
Если выполнить вот этот код в глобалах, то мы получим ссылку на глобальную переменную:

"use strict";
(function(global){
    // global
})(this);

Но такой трюк нельзя провернуть внутри другого scope: this будет undefined. Добавлю этот 4-й почти идеальный вариант.

[@TheShock]

Есть одно «но». В вопросе шла речь про универсальное решение.

[@SowingSadness]

К тому же, запуская из консоли, можно сделать вот так:

(function ( global ) {
…
}( this ));

[@SowingSadness]

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

(function( global ) {
«use strict»;
function getGlobal() {
return global; //потом, при запуске в другой среде, где не нужно внешнее замыкание, здесь нужно будет проставить this
}
…
})( this );

[@SowingSadness]

блин, торопился, вот верный код:

(function( global ) {
«use strict»;
var global = (function getGlobal ( global ) { return global; })( global ); //тут в аргументе вместо global проставить this
…
})( this );

[@TheShock]

shock@localhost:~> cat global.js
'use strict';
(function (glob) {
        console.log(glob == GLOBAL);
})(this);

shock@localhost:~> node global.js
false

[@azproduction]

Если что GLOBAL в Node.js называется global (с маленькой буквы) ;-)

$ node
> 'use strict'; (function (glob){console.log(glob === global)}(this));
true

И в Node.js v0.4.7(8) нет Strict Mode, код в пруф:

$ node
> console.log(function(){'use strict'; return (this === global) }());
true

[@TheShock]

Ну, у меня, конечно, 0.3 версия, но:

[@TheShock]

'use strict';
(function (glob) {
	console.log(global == GLOBAL); // true
	console.log(glob   == global); // false
	console.log(glob   == GLOBAL); // false
})(this);

Может, в новой версии это поменялось…

[@azproduction]

0.3.х не стабильная обнови до 0.4.х Мои приборы на v0.4.7 показывают false, true, false

[@azproduction]

Сейчас в Node.js cмысла от 'use strict' нет потому, что Strict Mode нет. И на самом деле в node.js GLOBAL называется global, если исправить код, то все получится ;-)

[@azproduction]

Какой-то полтергейст. Написал предыдущий комент, рефрешнул страницу пару раз — комента нет. Подумал, что нажал «предпросмотр» и забыл нажать «написать», всякое бывает. Написал ещё раз, но короче, но оказалось проблема не с памятью :)

[@TheShock]

Кажется, проблема с Хабракешем.

[@Remitmaster]

Большое спасибо. Почему нет функции избранного в избранном, я бы добавил :)?

[@ArtemS]

> 13. Можно ли сделать обработку бинарных данных? Если да, то как?
>…
> Сейчас нет нормальной возможности работать с двоичными данными.

А как же typed arrays?

[@azproduction]

Отчасти верно, но как используя его записать двоичное число (big-endian, little-endian, middle-endian)?!

[@ArtemS]

Хм… ну это прерогатива ОС, с каким типом работает программа.
Ну, а если требуется передача по сети, то у нас же массив байтов, пишем туда либо от 0 до lengh, либо от length до 0

[@azproduction]

Это понятно. Проблема не в типе записи двоичного числа, а в возможности преобразовать массив в двоичную строку — нет метода toBinaryString() или подобного.

[@datacompboy]

> element.setAttribute('srtle', 'color:green;left:150px');
должно быть style

[@Evgin]

Большое спасибо за фак =)
Хочу задать вопрос — какие IDE порекомендуете? Может есть что-то на платформе клипсы?

[@azproduction]

Использовал Eclipse+Plugins, Aptana, Netbeans. Сейчас остановился на WebStorm.

[@Evgin]

Я в js дубовый нуб =) поэтому можно поинтересоваться, какие именно плагины? м?

[@azproduction]

В WebStorm ничего ставить не нужно, он хорош из коробки. Единственный плагин, который я добавил — idea-markdown (подсветка markdown синтаксиса, рандер HTML) очень упрощает жизнь при написании README.md для гитхаба.

[@Evgin]

Спасибо.

[@KAdot]

Самое лучше что встречал для JS это JetBrains WebStorm.

[@SowingSadness]

www.hobius.com/?post=4d978f6bb91c1b5564000001
Читать с комментариями все.

Я дополнял тесты для IDE.

[@azproduction]

Когда только переходил с NetBeans на WebStorm смущало, что для каждого проекта открывается свое окно (критерий Projects). Потом проникся дао этой фичи — так удобнее работать с ветками/версиями проекта, и меньше путаницы. Сейчас я не считаю, что это минус.

[@SowingSadness]

Если взять тот же Eclipse + Mercurial(Git) и работать, предположим, с проектом с веткой hotfix и product одновременно — то Profit виден на лицо.

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

[@SowingSadness]

Зато большой минус, что Web\PHPShtorm плохо работает с полями объекта, который является полем другого объекта.

[@Scala]

По пункту 11: Крокфордовский стиль далеко не самый быстрый — jsperf.com/object-create-vs-crockford-vs-jorge-vs-constructor/10

[@jiexaspb]

Скажите, а возможно ли в JS имея ссылку на картинку отправить ее методом POST на сторонний сервер?

Т.е. Отправить саму картинку, а не ссылку.
По логике js ее должен считать, а потом отправить.

[@azproduction]

Если картинка лежит на вашем сервере или на кроссдоменном, который разрешил вам работать кроссдоменно (Same origin policy), то вы можете запросить картинку через обычный XHR GET и переправить её код (кодированный в Base64 или сырой) на ваш сервер или кроссдоменный (который тоже разрешил вам работать кроссдоменно) POST'ом.
Как сделать кроссдоменную коммуникацию написано в статье MDC HTTP Access Control
Если картинка лежит на другом домене(который не разрешил работать кроссдоменно), то трюк с canvas putImageData / getImageData не пройдет из-за Same origin policy.

[@jiexaspb]

Спасибо за ответ!
А на сколько это кроссбраузерно?

Вообще понятно, про access control при GET`e картинки. Но когда я ее отправляю POST`ом на другой сервер, зачем нужен access? Ведь это не чем не отличается от отправки формы постом на другой сервер, как здесь затрагивается политика безопасности, каким образом это может быть не безопасно?

[@azproduction]

Впринципе это приемлемо, что со вторым сервером у нас не будет договоренности. POST отправится(сервер получит данные), но статус отправки не будет успешным (status: 0). Придется ещё что-нибудь докрутить, чтобы узнать успешно отправился файл или нет. Вобщем проще сделать договоренность.

А на сколько это кроссбраузерно?

XDomainRequest Internet Explorer 8+
XmlHttpRequest CORS Firefox 3.5+, Safari 4+, Chrome, не уверен, что поддерживает Opera

Почитать
cors xmlhttprequest
Cross-domain Ajax with Cross-Origin Resource Sharing

[@bdiang]

У меня вопрос про функцию _cloner

this._clone({ it: it }).it;

Что дают эти операции?

[@azproduction]

Например, мы в оригинальную функцию клонирования засовываем строку cloner._clone("11111")
На выходе получаем объект {1: "1", 2: "1", 3: "1", 4: "1'} (такой алгоритм), а функция clone всегда отправляет в _clone объект, поэтому на выходе мы получим тоже строку.

[@Demetros]

По поводу моего 23 вопроса о repaint и reflow.
У меня есть некоторые сомнения на счет корректности 23.6:

Проводите анимации только с абсолютно позиционированными объектами (уменьшится reflow)

В качестве примера могу привести скролл в блоке «Что нового» на deti.mail.ru/
В скрипте deti.mail.ru/scripts/jquery.vscroll.js анимация выполняется через jQuery изменением свойства style.top у абсолютно позиционированного элемента. При этом если посмотреть в Firefox'е область перерисовки выясняется, что страница почти полностью перерисовывается при скроллировании и нагрузка на процессор при этом весьма значительна.

В качестве контрпримера могу привести слайдер в верхней части страницы showbiz.mail.ru/, где я использовал ручную анимацию через изменение атрибута scrollLeft, в результате чего перерисовывается только область непосредственно слайдера и нагрузка на процессор существенно ниже, нежели в случае анимации через style.left

Возможно, это справедливо лишь для FF4.0.1 и IE9, т.к. в хроме судя по всему с этим лучше.
Но всё же хотелось бы чуть более развернутого ответа.

[@quiet_drago]

Может будет уместно содержание?

[@qmax]

А вот что это за шрифт на КДПВ?

[@azproduction]

Consolas, с подогнанным межбуквенным расстоянием.

[@VolCh]

На действия пользователя в ajax-системе сервер присылает ответ «alert('Бум!!!');». На клиенте полученный ответ прогоняется через eval() и выполняется. Как называется такая передача данных? Это не JSON, не XML, не HTML.

Названия этому нет.

Вообще встречал где-то для такого подхода аббревиатуру AJAJ — Asynchronous Javascript and JSON. Подходя формально, это не является AJAX'ом, как и не является «ксерокс» любым копиром. Но кого это волнует :)

[@VolCh]

А JSON — это подмножество JavaScript и вполне можно AJAJ расшифровать как Asynchronous Javascript and Javascript :)

[@murr]

Спасибо за статью!

     // IE         0      1       2        3      4
     buttonMap = ['???', 'Left', 'Right', '???', 'Middle'];

Подозреваю, что это сделано для удобства получения бита состояний всех клавиш сразу:, т.е. при нажатых одновременно Left и Right мы получим 3, при нажатых Left и Middle — 6 и т.д. Нет под рукой ИЕ, что бы проверить. По крайней мере, мысль про битовые маски возникает первой.

[@azproduction]

Ещё в MSDN написано, что 0 — ни одна кнопка мыши не нажата