azproduction May 29 2011 at 17:31

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

15 min

73K

JavaScript*

+222

Comments 50

Anexroid May 29 2011 at 18:16

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

cbone May 29 2011 at 18:25

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

int03e May 29 2011 at 18:27

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

SowingSadness May 29 2011 at 18:57

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

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

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

azproduction May 29 2011 at 19:08

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

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

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

SowingSadness May 29 2011 at 19:13

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

-1

azproduction May 29 2011 at 19:30

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

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

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

TheShock May 29 2011 at 20:59

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

SowingSadness May 29 2011 at 19:19

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

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

SowingSadness May 29 2011 at 19:26

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

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

SowingSadness May 29 2011 at 19:32

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

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

TheShock May 29 2011 at 20:58

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

shock@localhost:~> node global.js
false

azproduction May 29 2011 at 21:09

Если что 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 May 29 2011 at 21:22

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

TheShock May 29 2011 at 21:23

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

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

azproduction May 29 2011 at 21:28

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

azproduction May 29 2011 at 21:18

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

azproduction May 29 2011 at 21:22

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

TheShock May 29 2011 at 21:23

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

Remitmaster May 29 2011 at 19:20

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

ArtemS May 29 2011 at 19:33

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

А как же typed arrays?

azproduction May 29 2011 at 19:45

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

ArtemS May 29 2011 at 20:01

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

azproduction May 29 2011 at 20:12

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

datacompboy May 29 2011 at 19:41

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

Evgin May 29 2011 at 20:32

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

azproduction May 29 2011 at 20:38

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

Evgin May 29 2011 at 20:51

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

-1

azproduction May 29 2011 at 20:55

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

Evgin May 29 2011 at 21:05

Спасибо.

KAdot May 29 2011 at 20:56

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

SowingSadness May 29 2011 at 22:22

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

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

azproduction May 29 2011 at 22:40

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

SowingSadness May 29 2011 at 22:51

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

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

SowingSadness May 29 2011 at 22:56

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

Scala May 29 2011 at 21:28

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

jiexaspb May 29 2011 at 21:38

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

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

azproduction May 29 2011 at 21:51

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

jiexaspb May 30 2011 at 01:37

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

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

azproduction May 30 2011 at 11:33

Впринципе это приемлемо, что со вторым сервером у нас не будет договоренности. 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 May 30 2011 at 07:08

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

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

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

azproduction May 31 2011 at 12:41

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

Demetros May 30 2011 at 09:35

По поводу моего 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 May 30 2011 at 10:22

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

qmax May 31 2011 at 01:33

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

azproduction May 31 2011 at 12:34

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

VolCh May 31 2011 at 02:17

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

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

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

VolCh May 31 2011 at 02:24

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

murr May 31 2011 at 12:18

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

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

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

azproduction May 31 2011 at 12:37

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

Show the best of all time