Метка «javascript» - 84

knockoutmvcНа Хабре уже много писали про Knockout.js (раз, два, три, четыре, пять, видео). Для тех кто не в курсе, Knockout.js — это популярная JavaScript библиотека, позволяющая реализовать Model-View-View Model (MVVM) паттерн на клиенте. Освоить Knockout.js можно очень быстро — ведь есть система интерактивного обучения, куча живых примеров (можно потыкать и посмотреть исходный код) и прекрасная документация.

Очень часто Knockout.js используют в связке с ASP.NET MVC — ведь библиотека существенно упрощает написание клиентской логики. Однако, возникает много типичных проблем для клиент-серверной разработки: основную модель и часть логики её обработки приходится описывать как на клиенте (JavaScript), так и на сервере (C#/VB). Кроме того, есть рутинная часть, связанная с обращением клиента к серверным методам и передачи им модели для обработки. Но не стоит печалиться! Теперь у нас есть Knockout MVC — это .NET оболочка для Knockout.js, которая генерирует весь нужный JavaScript-код за нас. Нам остаётся только описать нашу модель на C# и в MVVM-стиле указать для каждого нужного html-элемента к какому свойству модели нужно привязаться (а можно указать и целые выражения — они будут транслированы в js). Таким образом, можно получить полноценное кроссбраузерное клиентское веб-приложение без единой строчки JavaScript!
Читать полностью »

Кластеризация на клиенте или как показать 10000 точек на картеСуществует несколько типов проектов,
для которых вывод геоинформации является
необходимым: сайты по недвижимости, каталоги компаний,
каталоги достопримечательностей, доски объявлений и другие.
Для этих сайтов я решил разработать плагин к goolge API 3 и Яндекс API 2.

Основные требования:

  1. Возможность подключения без глубокой подготовки данных на сервере, а именно, используя только уже имеющиеся географические координаты объектов.
  2. Простой протокол подготовки и передачи данных.
  3. Быстрый клиентский кластеризатор с ДВУМЯ типами меток: кластер и группа. Кластер — несколько объектов, расположенных рядом. При клике кластер “раскрывается”, то есть увеличивает зум пока объекты будут на расстоянии, большем чем расстояние кластеризации. Группа — несколько объектов в одной точке (на минимальном расстоянии). При клике на группу на любом зуме выводится список объектов в группе.
  4. Отображение до 10000 точек с использованием кластеризатора.
  5. Отображение в ie7, на мобильных устройствах (iPad первого поколения).
  6. Шаблонизация на клиенте двух инфоокон — группового кластера и самого объекта.
  7. Использование спрайта для меток.
  8. Возможность использования неограниченного количества типов меток (иконок) для разных типов объектов.
  9. Возможность использования нескольких размеров иконки для разного диапазона зума.

В статье я опишу несколько подходов, которые были использованы для реализации этого плагина.
Читать полностью »

I. Суть проблемы.

В список основных предназначений XMLHttpRequest, конечно, не входит запрос HTML, чаще этот инструмент взаимодействует с XML, JSON или простым текстом.

Однако связка XMLHttpRequest + HTML хорошо работает при создании расширений к браузеру, которые в фоновом режиме опрашивают на предмет новостей сайты, не предоставляющие для этого почтовую подписку, RSS или другие экономные API или предоставляющие эти сервисы с какими-то ограничениями.

При создании нескольких расширений для Firefox я сталкивался с такой необходимостью. Работать с полученным от XMLHttpRequest кодом HTML при помощи регулярных расширений — способ очень ненадёжный и громоздкий. Получить DOM от XMLHttpRequest можно было лишь для правильного XML. Поэтому приходилось следовать хитрым советам на сайте разработчиков. Однако начиная с Firefox 11 появилась возможность непосредственного получения DOM от XMLHttpRequest, а в Firefox 12 была добавлена обработка таймаутов.

Я испытал новую возможность на создании мини-индикаторов новых топиков для двух небольших форумов, и это оказалось очень удобным (50 строчек кода плюс расширение CustomButtons — вот и готовый индикатор за пять минут, с опросами по таймеру и четырьмя состояниями: нет новостей, есть новости, ошибка и таймаут). Всё работало как часы.

Поэтому я попытался убрать из кода своих расширений все прежние костыли и ввести туда новый удобный парсинг. Однако при работе с сайтом rutracker.org возникла странная проблема (тестирование проходит на последней ночной сборке под Windows XP; очень прошу прощения за все косяки в коде и формулировках: у меня нет программистского образования и опыт мой в этой сфере, к сожалению, очень невелик.).

Читать полностью »

Привет, читатели!
По следам недавно прошедшей конференции DevConf 2012 хочу поделиться записями из своего блокнота, которые показались лично мне наиболее интересными и полезными. Возможно, кому-то все это хорошо известно. Поскольку доклады шли одновременно в нескольких залах, то все их посетить было невозможно, поэтому ваши дополнения с удовольствием почитаю в комментариях.
Темы, которые прежде всего интересовали меня, это:
— развертывание системы и непрерывная интеграция (Continuous Integration)
— PHP 5.4, PHPUnit, Yii
— тестирование в javascript
Читать полностью »

Folding для объектов JavaScript в TextMate

TextMate умеет сворачивать куски кода — это удобно, т.к. позволяет окинуть код взглядом целиком. К сожалению по умолчанию в JavaScript он сворачивает только функции, а иногда хочется свернуть и другие большие структуры (условия/циклы/объекты/списки)

Чтобы это было возможно, нужно подправить условия нахождения границ блоков.
Для этого нужно открыть редактор настроек (Bundles → Bundle Editor → Show Bundle Editor)
Там находим узел с нужными настройками языка (JavaScript → JavaScript)
Заменяем значения foldingStartMarker на '^.*({|[)s*$', а foldingStopMarker на '^s*(}|])'Читать полностью »

В частности модули ajax, css, dimensions, effects, offset. Новость уже появилась давно. Коммит с анонсом данной возможности на github-е появился еще 7 июня.
Не так часто, но встречал спор насчет размера и лишнего функционала, да и я сам был бы не проч исключить модули для некоторых проектов. Надеюсь возможность исключить модули появятся и на популярных CDN. Как это можно собрать — под катом или на github-е.
Читать полностью »

Внимание, отчёт!

.toster: Javascript supportado!

Кто первым найдёт все «пасхальные яйца», тому плюс в карму ;)
Читать полностью »

Привет!

Всем известно решение задачи загрузки скриптов.
Например Curl.JS, Require.JS, + популярные frameworks умеют это тоже.

Вот и недавно была статья про это от уважаемого azproduction.

Но все же интересно, есть ли альтернативы AJS, CJS, etc, учитывая ссылку.

Что если есть возможность загрузить JavaScript забыв про обыденные «мелочи» типа:

define( function(){
  return MyBeautifulObject;
});

Пример для самых нетерпеливых.

Далее небольшая заметка о том как это работает.

Читать полностью »

До сегодняшнего дня мне приходилось лечить сайты с зараженными .js файлами, в которых вредоносный код вставляется в конец файла и его можно легко очистить по сигнатуре. Пример программы для очистки.
Но вирусописатели не останавливаются на достигнутом, и разрабатывают новые способы заражения.
Опишу один из них:

  • вирус заходит по ftp на сайт
  • дописывает в конец кода свой кусок
  • шифрует обфускатором весь файл и сохраняет.
  • ждет 2 недели или месяц и в iframe появляется троян.

Читать полностью »

Эффективная веб разработка c Visual Studio 2012: нововведения в редакторы HTML/CSS и JavaScript

Новая версия Visual Studio 2012 предлагает значительное число нововведений в редакторы HTML/CSS/JavaScript. В этом обзоре я расскажу про основные нововведения, которые позволят веб-разработчикам писать код более быстро, удобнее и эффективнее.

Редактирование HTML5

Visual Studio 2012 полностью поддерживает HTML5 и все новые теги, которые предлагает новый стандарт. Это означает, что разработчики получают автодополнение новых тегов в редакторе (рисунок 1).

clip_image001
Рис.1. Автодополнение HTML5-тегов

Это так же означает встроенную поддержку валидации HTML5-кода в редакторе. Кроме того, для многих тегов механизм автодополнения создает кроссбраузерный код, например, автодополнение <video> на рисунке 1 приведет к автоматической генерации следующего кода (рисунок 2).
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js