Если вы используете JavaScript, но при этом так до конца и не разобрались, что же это за чудная штука такая — замыкания, и зачем она нужна — эта статья для вас.
Андрей Ребров @mythmaker
Технический директор
Разбираемся с prototype, __proto__, constructor и их цепочками в картинках
2 мин
34KЕсть javascript код:
Затрудняетесь ответить?
Тогда вам стоит пройти под кат ;-) (Далее 600 Кб больших изображений)
- var A = function () {};
- A.prototype.b = 100;
- var a = new A();
- A.prototype.c = 101;
- a.c = -100;
- A.prototype = {};
- A.prototype.b = 536;
- /* 1 */ console.log(a.__proto__.constructor.prototype.b === 536);
- var b = new A();
- /* 2 */ console.log(a.__proto__.__proto__.constructor === a.__proto__.constructor.prototype.constructor);
- /* 3 */ console.log(b instanceof A);
- /* 4 */ console.log(!(a instanceof Object));
Вопрос. Что возвратят выражения 1-4 и почему?Затрудняетесь ответить?
Тогда вам стоит пройти под кат ;-) (Далее 600 Кб больших изображений)
+41
WebSockets — полноценный асинхронный веб
7 мин
346K Пару недель назад разработчики Google Chromium опубликовали новость о поддержке технологии WebSocket. В айтишном буржунете новость произвела эффект разорвавшейся бомбы. В тот же день различные очень известные айтишники опробовали новинку и оставили восторженные отзывы в своих блогах. Моментально разработчики самых разных серверов/библиотек/фреймворков (в их числе Apache, EventMachine, Twisted, MochiWeb и т.д.) объявили о том, что поддержка ВебСокетов будет реализована в их продуктах в ближайшее время.
Что же такого интересного сулит нам технология? На мой взгляд, WebSocket — это самое кардинальное расширение протокола HTTP с его появления. Это не финтифлюшки, это сдвиг парадигмы HTTP. Изначально синхронный протокол, построенный по модели «запрос — ответ», становится полностью асинхронным и симметричным. Теперь уже нет клиента и сервера с фиксированными ролями, а есть два равноправных участника обмена данными. Каждый работает сам по себе, и когда надо отправляет данные другому. Отправил — и пошел дальше, ничего ждать не надо. Вторая сторона ответит, когда захочет — может не сразу, а может и вообще не ответит. Протокол дает полную свободу в обмене данными, вам решать как это использовать.
Я считаю, что веб сокеты придутся ко двору, если вы разрабатываете:
— веб-приложения с интенсивным обменом данными, требовательные к скорости обмена и каналу;
— приложения, следующие стандартам;
— «долгоиграющие» веб-приложения;
— комплексные приложения со множеством различных асинхронных блоков на странице;
— кросс-доменные приложения.
Что же такого интересного сулит нам технология? На мой взгляд, WebSocket — это самое кардинальное расширение протокола HTTP с его появления. Это не финтифлюшки, это сдвиг парадигмы HTTP. Изначально синхронный протокол, построенный по модели «запрос — ответ», становится полностью асинхронным и симметричным. Теперь уже нет клиента и сервера с фиксированными ролями, а есть два равноправных участника обмена данными. Каждый работает сам по себе, и когда надо отправляет данные другому. Отправил — и пошел дальше, ничего ждать не надо. Вторая сторона ответит, когда захочет — может не сразу, а может и вообще не ответит. Протокол дает полную свободу в обмене данными, вам решать как это использовать.
Я считаю, что веб сокеты придутся ко двору, если вы разрабатываете:
— веб-приложения с интенсивным обменом данными, требовательные к скорости обмена и каналу;
— приложения, следующие стандартам;
— «долгоиграющие» веб-приложения;
— комплексные приложения со множеством различных асинхронных блоков на странице;
— кросс-доменные приложения.
+198
Анонс Ext JS 4: быстрее, проще, стабильнее
6 мин
2.7KПеревод
Создатели прекрасного фреймворка Ext JS/Sencha на одной из конференций посвященной Ext JS анонсировали выход 4-й версии. Эта статья является вольным переводом поста из блога разработчиков. В новой версии, очень много изменений, которые не оставят равнодушными разработчиков. Ждем публичной беты.
+69
Grails, jQuery, AJAX: делаем anchor-навигацию. Часть 1
5 мин
17KAJAX и все, все, все
В предыдущей серии мы делали простенькое Grails-приложение с использованием jQuery, а также решили для себя, что использовать jQuery в Grails можно и даже нужно. Обсудим более серьезные вещи, которые можно сделать с такой связкой.
Нетрудно заметить, что все больше сайтов используют AJAX и частичные обновления страниц, причем в невероятном количестве. В частности, «начиненные» AJAX ссылки могут использоваться для внутренней навигации по странице, переключения каких-то вкладок. Это хорошо тем, что
А) меньше данных нужно перегонять от сервера — только нужный кусок страницы и
Б) веб-страницы часто загружают просто гигантские CSS и JavaScript-файлы, которые при AJAX-обновлении можно повторно не загружать.
Итак, очень распространено построение приложений по сценарию: одна большая «стартовая» страница, загружающая весь JavaScript-код и CSS и более мелкие «внутренние» функциональные блоки, загружаемые через AJAX. С этим есть ряд проблем:
- В результате AJAX-действий внутреннее состояние страницы не отражено в адресной строке браузера.
- Как следствие, внутренние страницы не могут быть запомнены в закладки, нельзя «отправить ссылку другу».
- Не работает Back/Forward навигация в браузере, т.к. AJAX-ссылки не попадают в историю браузера.
+31
Асинхронная синхронность. JSDeferred
4 мин
6.7KВ последнее время на хабре появилось несколько статей про работу с асинхронными вызовами (После всех асинхронных вызовов, Синхронизация асинхронных вызовов. WaitSync). Но при ближайшем рассмотрении область их применения довольно узка так как эти способы не решают всех проблем.
Но для начала попробуем определить эти самые проблемы, с которыми мы сталкиваемся при работе с асинхронными вызовами.
Но для начала попробуем определить эти самые проблемы, с которыми мы сталкиваемся при работе с асинхронными вызовами.
+40
Два в одном: spring-mobile & spring-android
2 мин
11KПродолжая тему новых проектов SpringSource хотел бы в одном посте рассказать сразу о двух новых проектах: Spring Mobile & Spring Android.
+22
+27
Dice Wars на App Engine + Twisted
4 мин
1.6KС августа в свое свободное время я занимаюсь разработкой занятной risk-подобной игрушки, в мире известной под названием Dice Wars. Гениальный японский гейм-дизайнер Таро Ито придумал замечательные правила этой игры и создал ее на флеше (однопользовательскую), и она породил множество вариаций на эту тему, до сих пор плохо известных в России.
В этой статье я хотел бы проанализировать мой первый fail с risk-подобной игрой, о которой я писал в марте, рассказать, почему я отказался от идеи использовать App Engine везде и вся, показать связку из App Engine + Twisted к которой я пришел и которая, как мне кажется, довольно полезна для приложений с постоянным соединением. Кроме того, хотелось бы рассказать о своем опыте с Actionscript 3, что-то вроде взгляда back end разработчика на эту чуждую для меня технологию, а также поискать здесь на хабре компаньонов и единомышленников.
В этой статье я хотел бы проанализировать мой первый fail с risk-подобной игрой, о которой я писал в марте, рассказать, почему я отказался от идеи использовать App Engine везде и вся, показать связку из App Engine + Twisted к которой я пришел и которая, как мне кажется, довольно полезна для приложений с постоянным соединением. Кроме того, хотелось бы рассказать о своем опыте с Actionscript 3, что-то вроде взгляда back end разработчика на эту чуждую для меня технологию, а также поискать здесь на хабре компаньонов и единомышленников.
+28
Синхронизация асинхронных вызовов. WaitSync
3 мин
8.7KЗадача
Допустим вы хотите выполнить два или более AJAX запроса на сервер и вызвать функцию после того, как все они будут закончены.
Небольшая загвоздка в том, что вы не знаете, какой из этих запросов будет закончен первым и не знаете, на кого вешать callback.
Можно завести глобальную переменную и по окончании каждого запроса проверять, завершился ли другой запрос.
Собственно, этим и занимается мой небольшой класс WaitSync =)
WaitSync.js
Пользоваться элементарно просто:
1. Создаем объект типа WaitSync, передав в конструктор callback функцию, которая будет вызвана после того, как отработают нужные задачи.
var vulture = new WaitSync(function () {
console.debug('Start eating: ', arguments);
});
2. Вместо простого
$.getJSON(
'savannah/get_prey',
function (data) {
console.log('... prey found: ' + data);
}
);
$.getJSON(
'savannah/get_other_predators',
function () {
console.log('... predators are done eating');
}
);
«заворачиваем» задачи в метод .wrap
$.getJSON(
'savannah/get_prey',
vulture.wrap(
function (data) {
console.log('... prey found: ' + data);
}
)
);
$.getJSON(
'savannah/get_other_predators',
vulture.wrap(
function () {
console.log('... predators are done eating');
}
)
);
3. Все =) Как только будут выполнены оба AJAX запроса, стервятник начнет есть.
+30
База GeoIP – страны и города
1 мин
74KПри разработке одного проекта встала задача – определить по IP-адресу посетителя его страну и город, на русском языке. Поиск готового решения оказался безуспешным – русскоязычные базы стран можно найти (например, wipmania.com), но баз городов нет. Помощь пришла из-за границы, в лице англоязычного maxmind.com. База была приведена к нормальному состоянию (MySQL) и частично переведена на русский язык с помощью нескольких справочников (~6,000 названий, с учетом городов-тезок ~15,500). Результат этой работы доступен для свободного скачивания.
+82
Отладка Javascript на мобильных устройствах
2 мин
13KКак я уже недавно писал, в настоящее время я занимаюсь разработкой мобильной версией одного сервиса. Вчерашняя статья про особенности дизайна сайта для мобильных устройств показала, что у аудитории есть интерес к разработке сайтов, адаптированных под телефоны, коммуникаторы и т.д.
+31
Числа, которые должен знать каждый программист
1 мин
17KПеревод
Чтобы было понятно, на чём следует концентрироваться при оптимизации, слайд из доклада «Создание программных систем в Google и его уроки»:
+52
Особенности дизайна сайта для мобильных устройств
3 мин
8.7KРечь пойдет о мобильных устройствах, которые на данное время занимают большой % на рынке WAP’a (телефоны без ОС, Symbian и прочие), об Android и iPhone сегодня говорить не будем
+36
Highload на дешевом хостинге: хэш-таблица в MySQL
3 мин
21KВысоконагруженный проект (web-сайт) — не обязательно популярная социальная сеть, видеохостинг или MMORPG. Простейший способ резко повысить требования сайта к железу — перенести хранение сессий в БД. В этой статье мы рассмотрим способ хранить данные в БД, и при этом не жертвовать производительностью. Пожертвовав небольшим объемом ОЗУ можно прилично сэкономить процессорное время. Мы говорим о стиуации, когда недоступны memcached и другие специальные средства кэширования.
+44
Обзор свежих материалов, октябрь 2010
5 мин
837Этот материал продолжает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель, май-июнь, июль, август, сентябрь.
+87
Геттеры и сеттеры в Javascript
5 мин
48KJavascript — очень изящный язык с кучей интересных возможностей. Большинство из этих возможностей скрыты одним неприятным фактором — Internet Explorer'ом и другим дерьмом, с которым нам приходится работать. Тем не менее, с приходом мобильных телефонов с актуальными браузерами и серверного JavaScript с нормальными движками эти возможности уже можно и нужно использовать прям сейчас. Но по привычке, даже при программировании для node.js мы стараемся писать так, чтобы оно работало в IE6+.
В этой статье я расскажу про интересный и не секретный способ указывать изящные геттеры и сеттеры и немножко покопаемся в исходниках Mootools. Частично это информация взята из статьи John Resig, частично лично мой опыт и эксперименты.
В этой статье я расскажу про интересный и не секретный способ указывать изящные геттеры и сеттеры и немножко покопаемся в исходниках Mootools. Частично это информация взята из статьи John Resig, частично лично мой опыт и эксперименты.
function Foo(bar){ this._bar = bar; } Foo.prototype = { get bar () { return this._bar; }, set bar (bar) { this._bar = bar; } };
+80
Серверный редирект на мобильную версию сайта
2 мин
37KПредлагаю вашему вниманию простое и дешевое (по ресурсам) решение для перенаправления пользователей мобильных устройств на легкую версию сайта. Решение ориентировано на highload сайты, оптимизация которых основана на кешировании гостевых запросов.
Проверка, является ли клиент мобильным устройством, производится веб-сервером nginx и в случае успеха клиент перенаправляется на поддомен или локейшн. Это существенно экономит ресурсы и позволяет добиться большей масштабируемости по сравнение с PHP методами.
+59
Web Dogma. 10 правил создания сайтов для пользователей
2 мин
11K Сегодня мне случилось побывать на лекции Эрика Райса (Eric Reiss), специалиста по вопросам информационной архитектуры, юзабилити и user experience.
И хоть термины эти звучат довольно страшно, а у последнего и вовсе нет перевода на русский язык, но описываемая ими предметная область важна для всех, работающих как со структурой и дизайном сайтов, так и их содержанием.
Лекция была посвящена набору правил (Эрик называет их догмой), следование которым позволит создавать сайты для пользователей, свободные от диктата технологий и моды.
Вот эти 10 правил.
И хоть термины эти звучат довольно страшно, а у последнего и вовсе нет перевода на русский язык, но описываемая ими предметная область важна для всех, работающих как со структурой и дизайном сайтов, так и их содержанием.
Лекция была посвящена набору правил (Эрик называет их догмой), следование которым позволит создавать сайты для пользователей, свободные от диктата технологий и моды.
Вот эти 10 правил.
+74
Интеграция с «Социальными» сервисами при помощи Spring-Social
2 мин
6.8KНе так давно копилка проектов SpringSource пополнилась еще одним проектом — Spring-Social, который призван упростить создание приложений интегрированных с различными социальными сетями. Данный проект никак не засветился на Habr-е, попробую восполнить этот пробел.
+25
Информация
- В рейтинге
- Не участвует
- Откуда
- Syosset, New York, США
- Зарегистрирован
- Активность