Обновить
128K+

JavaScript *

Прототипно-ориентированный язык программирования

140,23
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности
Формат публикации

Самовызывающийся конструктор Джона Резига и размышление о том, почему это решение не прижилось

Время на прочтение7 мин
Охват и читатели13K
Настала пора мысленно вернуться на четыре с небольшим года назад ко блогозаписи «Simple “Class” Instantiation» из блога Джона Резига, прославленного создателя необыкновенно удобной библиотеки jQuery. И вернёмся.

Однако же, так как я вовсе не вижу её в результатах поиска на Хабрахабре по слову «Resig», то поневоле приходится думать, что эту полезную блогозапись никто не удосужился перевести (или хотя бы пересказать) за четыре прошедших года — мне придётся, стало быть, самостоятельно пересказать блогозапись Резига прежде, чем я исполню моё главное намерение: поразмыслить вслух, почему же предложенный Резигом способ решения указанной им проблемы так и не сделался общераспространённым. И перескажу. (Сам этот пересказ ужé был бы полезен читателю, даже кабы я к нему ничего от себя не прибавил. А я прибавлю.)



Шестого декабря 2007 года Резиг рассмотрел, что получается, когда в джаваскрипте используется операция «new» для создания объекта (в языках с классами мы сказали бы «экземпляра класса»):

function User(first, last){
   this.name = first + " " + last;
}

var user = new User("John", "Resig");

Резиг справедливо подметил, что для начинающих программистов на джаваскрипте не вполне очевидно, что появление «this» в коде функции указывает на то, что перед нами конструктор объекта. (Я от себя в скобках прибавлю: если функция находится в недрах некоторой библиотеки, то это обстоятельство нуждается также и в документировании — а не то пользователь библиотеки не многим будет отличаться от новичка: исходный код с телом функции читают не все, тем более что он нередко применяется в минифицированном, не читаемом виде.)

Поэтому, рассудил Резиг, рано или поздно кто-нибудь попробует вызвать «User()» без «new» и тем получит на свою голову сразу две неприятные проблемы. Во-первых, переменная «user» останется неопределённою: функция «User()» задумана ведь как конструктор, а значения она никакого не возвращает. Во-вторых, что ещё хуже, попытки обращения к «this» изнутри такого (некорректно вызванного) конструктора неизбежно приведёт к засорению глобального пространства имён — а это чревато зловещими и трудноуловимыми последствиями. Обе проблемы Джон Резиг продемонстрировал на примере:

var name = "Resig";
var user = User("John", name);
// здесь переменная «user» не определена
// БОЛЕЕ ТОГО: значение «name» теперь ужé не «Resig»!
if ( name == "John Resig" ) {
   // фигассе!…
}

Читать дальше →

Эмуляция события вызова функции

Время на прочтение2 мин
Охват и читатели5.7K
Около полугода назад мне задали примерно такой вопрос: “Я использую крупный фреймворк, запускающий некую функцию по действию пользователя. Хочу, не меняя кода этой функции, выполнить по событию вызова этой функции свой код.”. Практика далеко не лучшая, события вызова функции не существует, я просто покрутил пальцем у виска и сказал, что это жуткий говнокод, так делать не стоит, да и это, просто-напросто, — невозможно.

Пару дней назад, направляясь домой относительно тёплым зимним вечером, не типичным для Одессы, у меня возникла нетипичная мысль: “А что если попробовать сделать то, что спрашивал Богдан полгода назад?”. Придя домой, я включил компьютер, и, в течении пары минут, сделал то, что задумал. В первую очередь, меня интересовало то, как будут себя вести встроенные методы, если их переопределить, и можно ли после этого как-нибудь вызвать прежнее их состояние, бывшее до переопределения. Я знал, что, если объект переопределяют, то ссылки на него не уничтожатся, сохраняя прежний вид. Что касается встроенных функций, имелись сомнения. Оказывается, можно.

Скорее всего, мне даже никогда не придется воспользоваться таким инструментом, но, чисто гипотетически, возможно, у кого-то возникнет задача проследить вызов той или иной функции, получив отчет о каждом вызове, состоящий из:
  1. Результата выполнения
  2. Переданных аргументов
  3. Контекста вызова (что есть this при вызове)
  4. Количества вызовов функции после создания обработчика

(Этот список полностью соответствует аргументам, передающимся в обработчик)
Очень мало буков

Последовательный вызов асинхронных функций

Время на прочтение3 мин
Охват и читатели34K
Как известно, язык JavaScript преследует парадигму событийно-ориентированного программирования. Это, безусловно, хорошо, но что делать, если за одной асинхронной функцией должна вызываться другая асинхронная функция, а затем еще одна, и еще… Иногда такой код очень запутывает, и не только человека привыкшего к синхронному и поочередному вызову функций. Это касается сложных анимаций, таймаутов, аякса, когда за одним должно следовать другое, и так дальше.

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

UPD
image
Ниже моё решение, являющееся аналогом этой функции модуля async и кучи других подобных решений, представленных в комментариях. Спасибо всем комментирующим и sedictor в частности.
/UPD

Рассмотрим пример (который взят из головы и в нем возможны ошибки) гипотетического парсера сайта, который после парсинга заносит данные в БД, и, после занесения, вызывает некоторый код.

var html = '';
request.on('response', function (response) {

    response.on('data', function (chunk) {
        html = html + chunk;
    });

    response.on('end', function() {
        //какой-то парсер
        parse(html, function(data){  
                //какая-нибудь функция, добавляющая данные в базу
		addToDatabase(data, function() {  
			doSomething();
		})
	});

    });
});


Много вложенных колбеков — не есть гуд, пробуем по-другому.
Читать дальше →

Repaint для больших картинок

Время на прочтение3 мин
Охват и читатели2.1K
Repaint происходит средствами процессора, браузер тратит на это определенное время. При анимации это время негативно влияет на производительность. Я уперся в эту проблему, когда мне надо было анимировать листалку из картинок большого разрешения весом 100-200kB. Причем в ряде браузеров проблема выглядела совсем катастрофически.

Эта статья не претендует на строгость изложения и на окончательные выводы. Однако хотелось поделиться находкой с сообществом. Основной вывод такой: операции с картинками надо реализовывать средствами [canvas], которая нагружает видеокарту, не надо использовать обычные теги [img], которые служат простой презентации графики.
развернуть мысль

Esprima — парсер для javascript, написанный на javascript

Время на прочтение3 мин
Охват и читатели14K
В сети и на github появилась разработка парсера Esprima, позиционированного на парсинг вообще и для javascript в частности. Он написан на Javascript и переводит скармливаемый текст в структуру JSON, которую затем можно анализировать, например, для препроцессирования кодов, создания сахарных обёрток для JS, автоматизированного поиска ошибок без запуска кода, преобразования языков (кросс-компиляции), преобразования серверного JS в клиентский или наоборот, для минификации кода или наоборот, для разбора обфусцированного. Но это — всё идеи для будущего. Появился архив совсем недавно (в середине ноября — первый коммит с 2000 строк кода), но уже приобрёл своих иследователей, судя по форкам. Формат парсинга совместим с Mozilla SpiderMonkey Parser API.
Читать дальше →

Тест на скорость год спустя

Время на прочтение3 мин
Охват и читатели2.2K
imageЭта публикация является продолжением прошлогоднего моего поста и последующей заметки. Целый год тестовые скрипты валялись где-то на диске. Дело не дошло до сравнения JavaScript vs C#, которое напрашивалось после позорного провала JScript.NET. Не дошло, потому что я не чувствовал в себе силы адекватно перевести тесты с JavaScript, хоть и активно программирую на С#. Кроме того, я сделал пробный заход, и мне показалось, что чуда не будет. Сейчас я все-таки решил привести тестовый пакет в порядок, так, чтобы каждый мог его опробовать. Возможно, у кого-то хватит сил добавить адекватное сравнение с C#.
Под катом будут результаты тестов год спустя, ссылка на Github, и новый(старый) способ использования движка JScript от IE9 вне самого IE9.

Читать дальше →

Работа с бинарными данными с использованием типизированных массивов

Время на прочтение5 мин
Охват и читатели29K
Вместе с HTML5 в веб-разработку приходят новые API, расширяющие UX, привнося новые мультимедийные возможности и возможности взаимодействия в реальном времени. Зачастую этот функционал завязан на использование бинарных форматов файлов вроде MP3-аудио, PNG-изображений
или MP4-видео. Использование бинарных файлов крайне важно в данном контексте, так как позволяет уменьшить требования к ширине канала, добиться необходимой производительности и вместе с этим оставаться совместимым с имеющимися технологиями. Еще недавно у веб-разработчиков не было прямого доступа к содержимому этих бинарных файлов или любых других бинарных форматов файлов.

В этой статье мы рассмотрим, как веб-разработчики могут снять этот барьер, используя
Typed Arrays API для JavaScript, и использование нового API в демонстрационном примере Binary File Inspector на IE Test Drive.
Читать дальше →

Быстрый переезд с Google Translate API v1 на Bing Translate API

Время на прочтение4 мин
Охват и читатели36K
Итак, позавчера Корпорация Добра все-таки закрыла свой бесплатный Translate API. Автор до последнего момента надеялся, что они образумятся и не станут уподобляться остальным так поступать. Поэтому не чесался и ничего не делал. Но вот гром грянул. И в CMS одного небольшого 3-х язычного проекта отвалился переводчик. Не страшно, но неприятно — раньше админ на форме редактирования контента 1 щелчком мыши переводил все поля еще на 2 языка. Переводчик я написал по своей милости, потратил на это минут 20 и не взял за это ни копейки. Тем не менее, клиент звонит, грозится физической расправой над любимым хомячком, просит, опять угрожает. Пришлось закрывать баш и искать альтернативы.

Под катом список (4 варианта, никаких откровений / открытий) чего нашел автор, а также рецепт Javascript-перевода от Bing.
Читать дальше →

Kendo UI — новейший UI-фреймворк от Telerik

Время на прочтение2 мин
Охват и читатели87K

Предлагаю краткий обзор свежего UI-фреймворка от Telerik под названием Kendo UI.

Предыстория



Совсем недавно я размещал тикет в поддержке Telerik и спрашивал у них, можно ли использовать компоненты (в частности MVC) в приложении, написанном на Classic ASP.

Конечно, ответ огорчил.
Читать дальше →

Практическое применение Backbone.View

Время на прочтение4 мин
Охват и читатели28K

В своем прошлом топике, я описал базовые принципы работы с фреймворком backbone.js, теперь предлагаю перейти к практике и сделать что-нибудь полезное.

Задача


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


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

Скачиваем backbone.js, jquery, jquery ui, underscore.js и
Вперед

JVM на JavaScript

Время на прочтение1 мин
Охват и читатели4.5K
Программист Артур Вентура (Artur Ventura) имеет весьма специфический взгляд на место JavaScript в веб-разработке. По его мнению, вместе с движком для рендеринга JavaScript в состав браузеров нужно включать виртуальную машину, которая позволит запускать программы на любом языке программирования. Чтобы продемонстрировать тезис, Артур потратил шесть месяцев на разработку виртуальной машины BicaVM, которая интерпретирует и исполняет байт-код Java, причём сама виртуальная машина написана на JavaScript.

BicaVM может обработать примерно 60% байт-кода и ещё не оптимизирована, но зато запускается на iPad/iPhone и поддерживает интерфейс JNI для DOM.

Как и многие другие JavaScript-эксперименты (см. «операционную систему» на JavaScript или декодер H.264 на JavaScript), BicaVM вряд ли имеет практическую пользу, это просто концептуальная разработка в доказательство идеи, что браузер нужно воспринимать как виртуальную машину для различных программ, ну а JavaScript как будто играет роль ассемблера в интернете.

В качестве шутки, Артуру можно посоветовать написать ещё браузер на Java и поэкспериментировать с обеими своими разработками.
Читать дальше →

DOM-shim для всех браузеров включая IE < 8

Время на прочтение4 мин
Охват и читатели13K
Доброе время суток уважаемые хабражители.

Многие javascript-программисты сталкивались с не поддерживанием некоторых функций DOM JS API в некоторых браузерах (не будем показывать пальцем). Наверняка, многие знакомы с замечательными библиотеками es5-shim и DOM-shim для решения проблем совместимости между разными браузерами, а DOM-shim к тому же, «подтягивает» браузер до уровня DOM4.

В данной же статье я расскажу, как сделать DOM-shim в IE6 и IE7, чтобы навсегда забыть о существовании этих браузеров.
Читать дальше →

Расстановка точек над onmousewheel и немного о луковом супе

Время на прочтение10 мин
Охват и читатели16K
Я уже писал о своих экспериментах со скроллбарами на сайтах и в веб-приложениях, но эти опыты удались не вполне. Поэтому я пока оставил идею кастомизации скроллбаров, но решил досканально разобраться с событиями, вызываемыми прокруткой колеса мыши.

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

Забегая вперёд, скажу, что этот экперимент удался вполне, а итоговый результат работает во всех десктопных браузерах, начиная с IE7 (по идее, должно работать и в шестом, но сейчас нет возможности это проверить). Также, хочу выразить благодарность поисковой системе Гугл. Без неё жизнь была бы соткана из уныния и отчаяния.
Читать дальше →

Ближайшие события

Ненормальный Javascript

Время на прочтение5 мин
Охват и читатели2.9K
В этом топике я хочу рассказать о необычных конструкциях js, а так же на наглядных примерах разобрать некоторые моменты, связанные с объектами и вызовами методов, которые, при использовании нетривиального синтаксиса могут вызывать вопросы у почти всех начинающих использовать js.

Цель топика (и сразу же дисклеймер) — помочь начинающим не впадать в кататонический ступор при виде чего-то вроде
user[(os[((user.microsoft_adept ? microsoft : apple).system || "linux")].install_carma <= user.carma) ? "install" : "cant_install"](os[((user.microsoft_adept ? microsoft : apple).system || "linux")].name);

И ещё один дисклеймер. Я ни в коем случае не призываю оформлять исходный код таким образом и даже прошу никогда так не делать. Но, ситуации в жизни бывают разные и, возможно, окажется полезным уметь читать разные монстроидальные конструкции. Врага, как говорится, нужно знать в лицо. Но, тем не менее некоторые ингредиенты этой кашки могут оказаться весьма полезными в определённых ситуациях.
Читать дальше →

JSZip Создаем .zip файлы

Время на прочтение3 мин
Охват и читатели27K
Очень хороший и простой способ отдать клиенту несколько файлов в zip архиве. Не нагружая и без того нагруженный сервер.
var zip = new JSZip();
zip.add("Hello.txt", "Hello World\n");
img = zip.folder("images");
img.add("smile.gif", imgData, {base64: true});
content = zip.generate();
location.href="data:application/zip;base64,"+content;

Итак давайте разберем, что тут происходит.
Создается экземпляр нашего zip архива, класс JSZip,.
Далее мы можем добавлять в него любые данные, допустим Hello.txt, также можно добавить папку images.
Далее положить в нее smile.gif, все это завернуть, и отдать вам как zip фаил.
Узнать вкусные подробности

Вертикальный скроллинг содержимого страницы в стиле Mac OS X Lion

Время на прочтение1 мин
Охват и читатели9.4K
Добрый день, Хабр!

Не так давно я оставлял весьма категоричный комментарий в топике о модернизации скроллбаров а, буквально, через пару дней был вынужден сам решать задачу о его (скроллбара) модернизации. Так уж сложились звёзды, что в пользовательском интерфейсе одного из проектов стандартной полосе прокрутки место было найти можно, но крайне нежелательно. Из всех возможных вариантов было выбрано нечто среднее между скроллбаром нового Gmail'а, благо задачи похожи и Mac OS X Lion, потому что «ох, они круты ». Я вооружился js и jQuery, и на свет было произведено это.
Читать дальше →

JavaScript для чайников. Всё что вы хотели знать о функциях но боялись спросить

Время на прочтение4 мин
Охват и читатели28K
Как-то незаметно для себя, я решил отойти от возни с классами и паттернами, и разобраться с самыми обычными Js функциями. Думал, что будет достаточно скучно, но ошибся — оказалось очень даже интересно.

В этой статье я расскажу об особенностях объявления функций, и некоторых полезных паттернах (кхе-хе, да, они есть и тут)

Читать дальше →

Попытка просто объяснить сложные, для новичков, вещи в javascript

Время на прочтение8 мин
Охват и читатели24K
Я попытаюсь просто объяснить, как работают замыкания в Javascript, как работает this, как создавать конструкторы для своих классов и чем различаются различные подходы к их созданию.
Статья не претендует на новаторство, но достаточно доступные объяснения how it works для новичков я не видел, и на мой взгляд — это три самых узких места в Javascript (не привязанному к какому либо контексту, серверу или браузеру, например).
Читать дальше →

OS.js: десктоп на JavaScript

Время на прочтение2 мин
Охват и читатели16K
Разработчик Андерс Эвенруд (Anders Evenrud) сделал любопытный проект OS.js, который он называет «операционной системой на Javascript».



Название поменяется в ближайшее время, потому что оно не отражает реальность: на самом деле OS.js — не операционная система, а оболочка и оконный менеджер в стиле Linux, с комплектом приложений на HTML5 и CSS2+, с PHP-бэкендом. Из приложений есть часы (HTML5-SVG, CSS2), видеоплеер (HTML5-Video), аудиоплеер (HTML5-Audio), файловый менеджер, терминал, графический редактор (HTML5-Canvas), игры и прочее. Они разработаны, в основном, на Glade Interface Designer (GTK+3 XML).
Читать дальше →

Highstock: мониторим Премию Рунета

Время на прочтение4 мин
Охват и читатели8.3K
Долгое время в своих проектах использовал Flash-графики, вместо обычных картинок. Они и красивее и более функциональны, да и серверу не нужно напрягаться для генерации картинок. Но в связи с тем, что некоторые фирмы не очень дружат с Flash, пришлось поискать замену без использования Flash.

До этого использовал AmCharts, первым делом глянул на их сайт, они уже выпустили JS версию своих графиков, но как-то не понравилось, по ощущениям — сыровато еще. После недолгого гугления был найден Highstock, от авторов Highcharts JS. Отличается в первую очередь возможностью выводить графики, привязанные к времени, с большим количеством точек, масштабированием, удобной навигацией. Да и чисто внешне понравился больше AmCharts.
Читать дальше →