3 js-фреймворка на личном опыте

Разрабатывая веб-приложение (не путать с веб-сайтом с интерактивным UI) на jQuery, Zepto или другом UI-ном фреймворке, довольно быстро приходишь к изобретению MV*-велосипеда, сначала  отделяя данные от UI-части приложения, а потом назначая ответственного за взаимодействием между ними. Резонный вопрос: а какие существуют готовые решения, облегчающие взаимодействие UI, данных и логики, поверх jQuery (Zepto)? И как ответ недавно мне попалась статья "A Collection Of Javascript MVC Frameworks That You Should Know About". Знаете, сколько там фреймворков? Больше 30! Как же сделать правильный выбор? Выбор фреймворка - это серьезное решение, от которого не последним образом зависит будущее проекта. На решение каких проблем большим образом ориентирован фреймворк? Какой из MV* подходов используется во фреймворке (и стоит ли на этом заморачиваться)? Сильно ли тяжеловесен фреймворк? Сколько дополнительных библиотек он тянет за собой? Насколько быстро и легко разобраться с устройством фреймворка? Насколько хороша документация? Есть ли дружное сообщество вокруг библиотеки? Как не ошибиться, ведь все фреймворки похожи друг на друга, и каждый обещает сделать всю работу за меня? Да никак. Есть лишь несколько подсказок и советов от умудрённых опытом людей и сделанные на основе собственного опыта выводы.

Философия AMD, RequireJs и модульная разработка веб-приложений на JavaScript

Разделяй и влавствуй - подход на все времена. Концепция модульного программирования не нова, и хорошо себя зарекомендовала. В мире разработки web-приложений на JavaScript существует подход Asynchronous Module Definition или AMD, который

specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded [1]

т.е. по сути определяет API, следуя которому можно реализовать асинхронную загрузку самих модулей и их зависимостей. Следуя этому подходу, непроизвольно создаешь более элегантные решения, но это всего лишь бонусный побочный эффект. Главное - уменьшается хаос js-кода, сложность разработки и поддержки приложения. Каждый модуль явно указывает свои зависимости и получает только их, работая изолированно, что означает минимум мусора глобальной области видимости.
Всё, что нужно, чтобы начать использовать AMD подход в проекте, - это загрузчик, который знает, что такое AMD-модуль, и умеет подгружать зависимости.  Итак,

Keypress event в Knockout.js

Столкнулась с проблемой в knockout.js: в текстовом нужно было отследить нажание кнопки Enter. Делов-то: привязываем к событию keypress нужный метод, и в нём уже смотрим, какая клавиша была нажата:
//html
<div>
    <input type="text" data-bind="value: someValue, event : { keypress = function(data, event) { handleKeyPress(data, event) } }" />
    <span data-bind="text: someValue"></span>
</div>

//view model
var ViewModel = function() {
    var self = this;
    self.someValue = ko.observable('');

    self.handleKeyPress = function(data, event)
    {
           if (event.keyCode == 13)
           {
               //сделать что-нибудь полезное
           }
    }
}   
ko.applyBindings(new ViewModel()); 
Но не тут-то было! После таких манипуляций текстовое поле перестало реагировать на нажатия всех клавиш, кроме enter. Помогло создание своего специализированного binding-а:
ko.bindingHandlers.enterKey = {
    init: function(element, valueAccessor, allBindings, vm) {
        ko.utils.registerEventHandler(element, "keyup", function(event) {
            if (event.keyCode === 13) {
                ko.utils.triggerEvent(element, "change");
//set "this" to the data and also pass it as first arg, in case function has "this" bound
                 valueAccessor().call(vm, vm);
            }
          
            return true;
        });
    }        
}; 
В html это отразится привязыванием на созданный байндинг нужного метода:
<div>
    <input type="text" data-bind="value: someValue, enterKey: doSomething } }" />
    <span data-bind="text: someValue"></span>
</div>
Спасибо stackoverflow

Компиляция CoffeeScript в JavaScript используя Sublime Text 2

CoffeeScript - рафинированный JavaScript, который хочется писать ещё и ещё. Цель этой заметки рассмотреть, как писать и компилировать код на CoffeeScript в js, используя Sublime Text 2.

Весь процес можно разбить на два этапа:
1. Подготовительный этап - установка компилятора CoffeeScript
2. Установка плагина CoffeeScript под Sublime Text 2
И так, приступим. 

3 плагина для Sumblime Text, которые облегчат работу с javascript и jQuery

Как ни крути, а Sublime Text 2 классный, удобный, гибкий за счет мощной системы плагинов и просто прекрасный. Хвалить его можно долго, лучше перейти сразу к делу.

Jquery.Inputmask

Jquery.Inputmask - крутой (да-да, именно) плагин, добавляющий гибкости в работу с обычным текстовым полем для ввода. Плагин является усовершенствованной версией Masked Input Plugin, полностью совместим с ui-datepicker и поддерживает кучу расширений. Этот плагин - настоящая находка для всех фанатов MaskedTextBox из Winforms.

Pickdate.js - удобный datetime picker

Знакомьтесь: Pickdate.js. Минималистичный, легковесный и просто классный datetime picker на javascript.

Прозрачный PNG в IE

Тема довольно старая и избитая, но все же расскажу о том, что я делаю, чтобы в ИЕ прозрачные PNG картинки отображались без ужасного серого фона, который "любимый браузер" прикручивает к ним. И так, все совершенно не сложно.
Нам потребуется прозрачный gif размером 1х1 пикселей, которую назовем blank.gif. Далее, в хтмл-файле в разделе <head> пишем следующее:

<!--[if lt IE 7]>
<![if gte IE 5.5]>
<script type="text/javascript">
function fixPNG(element)
{
if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
{
var src;

if (element.tagName=='IMG')
{
if (/\.png$/.test(element.src))
{
src = element.src;
element.src = "blank.gif";
}
}
else
{
src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i)
if (src)
{
src = src[1];
element.runtimeStyle.backgroundImage="none";
}
}

if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='none')";
}
}
</script>
<style type="text/css">
.iePNG, IMG { filter:expression(fixPNG(this)); }
.iePNG A { position: relative; }
</style>
<![endif]>
<![endif]-->
Не забудьте исправить путь к gif-изображению, иначе фокус не получится.
Собственно говоря, это все. Скрипт когда-то давно был честно скачан, откуда - не припоминается. Спасибо автору скрипта!

Защита контента с помощью javascript

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

<script language="JavaScript">
//autor tan4eg
function disableSelection(target)
{
if (typeof target.onselectstart!="undefined")
{
target = document;
target.onselectstart=function(){return false;};
}
else
{
if (typeof(target.style.MozUserSelect)!="undefined")
{
target.style.MozUserSelect="none";
}
else
{
target = document;
target.onmousedown=function(){return false;};
}
}
target.style.cursor = "default";
}
document.oncontextmenu = function() { return false; }
window.onload = function()
{
if (document.getElementById("maintable"))
{
disableSelection(document.getElementById("maintable"));
}
}
</script>

Для использования скрипта достаточно поместить его текст между тэгами <head>
Суть работы скрипта в том, что он запрещает выделение контента у конкретного элемента, id которого мы задаем в обработчике window.onload. Для большей уверенности скрипт также запрещает контекстное меню. Однако это далеко не панацея :(