GM2mars

Если на сервере запрос обрабатываете php, то так получайне put данные:

parse_str(file_get_contents('php://input'), $request);

Если у тебя не все данные грузятся аяксом, а только некоторые блоки, лучше при изменении состояния страницы, менять url. Типа открыли боковое меню, в url дописали /?sidebar=1. По нему и определять какие изменения есть на странице. Отлюда же и бекэнд нужно переделать, чтоб он учитывал параметры при отдачи ответа. Если же one page app, то тут немного другая история...

karmazzin.gitbooks.io/eloquentjavascript_ru Выразительный JavaScript

Во всем коде не стал разбираться, слишком много всего. Но у вас вначале (где js в html'e) логика правильная.
Как открыли форму, подписываемся на события клика на документе. При каждом клике выполняем функцию проверки: от event.target проверяем всех родителей на совпадение, например id с нашей формой (отслеживаем кликнули мы в область формы или нет). Если родитель так и не был найдет, то закрываем форму, и не забываем отвязаться от события, чтоб зря функции не гонял.
https://jsfiddle.net/hfuLrpqo/1/

p.s. пример на jQuery

Без HTML тут сходу и не разобраться что нужно, но ясно одно, код нужно переписывать, слишком много ненужных манипуляций.

Update:
На сколько я понял, у вас есть меню с элементами. Если элементов больше maxCountShow, то мы их скрываем и показываем кнопку "Показать больше".
Я бы сделал через css скрытие (такую задачу по моему можно всю сделать через css):
https://jsfiddle.net/xj8s68ws/1/
CSS

.fold {
    display: none;
}

HTML

<ul class="main-menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
</ul>

JavaScript

function Folding() {
    var maxShowCount=7,
        main_menu=document.querySelector('.main-menu'),
        items= (main_menu) ? main_menu.querySelectorAll('li') : false,
        i,
        show_more,
        fold=0;
    
    if (!items) return;
    
    for (i in items) {
        if (i >= maxShowCount) {
            items[i].className='fold';
            fold++;
        }
    }
    if (fold) {
        show_more=document.createElement('a');
        show_more.appendChild(document.createTextNode('Показать больше'));
        main_menu.appendChild(show_more);
        show_more.addEventListener("click", show_all);
    }
    
    function show_all(e) {
        var fold_items=main_menu.querySelectorAll('.fold'),
            a;
        
        show_more.removeEventListener("click", show_all);
        e.target.remove();
        for (a in fold_items) {
            fold_items[a].className='';
        }
    };
}
Folding();

Я бы назвал это препроцессором, как LESS или Sass для css. Те же яйца, только в профиль. Хотя по сути это язык, компилируемый в другой язык (как бы другой язык ;-P)

1. Событие потери фокуса focusOut/blur (jQuery)
2. Ставить счетчик когда фокус на элементе и сбрасывать его при событии нажатии клавиши keypress (jQuery).
К примеру счетчик ставим на 3 сек. Если за это время пользователь не нажал клавишу на поле ввода, считаем что он закончил ввод.

Допустим у нас сцена из нескольких элементов.
Создаем объект сцены "var DrawScene=function() {}" в котором объявляем все параметры для отрисовки, в приватных функциях делаем разные вспомогательные вычисления.
Потом через "DrawScene.prototype.drawElement1=function() {}" рисуем каждый объект на сцене.
Последней функцией делаем инициализацию, в которой запускаем все функции отрисовки объектов и добавляем вызов в наш конструктор. (так же не забываем про функцию очистки холста)
Пример можете глянуть https://github.com/GM2mars/GM_gauge/blob/master/gm... отрисовка круговой шкалы.

Так мы получили объект отрисовки сцены, где каждый объект мы может отрисовать со своими параметрами.
Но мы используем canvas, поэтому изображение растровое (выводится по пикселям) и отдельно масштабировать элемент на сцене не получится. Каждый раз придется перерисовывать сцену полностью.

Для динамических сцен лучше использовать svg, там вы можете управлять отдельно каждым объектом, не затрагивая других.

p.s. Или же для каждого элемента создавать отдельный canvas и им манипулировать.

background: url(icon.png) no-repeat 0 0 transparent;

react-like микрофреймворк riot (https://muut.com/riotjs/) очень легкий и очень быстрый. Не содержит в себе кучу ненужного хлама, который вы никогда не используете.
Я у себя его использовал в проекте для построения интерфейсных блоков.

input:focus {
  box-shadow: 1px 1px 2px 0 red;
}

:-P

var radiobutton={
    radios: document.querySelectorAll('input[type="radio"]'),
    
    getSelect: function(event) {
        var el=event.target, 
            val=el.value;
        el.parentNode.parentNode.querySelectorAll('span')[0].textContent=val;
    },
    
    init: function() {
        Array.prototype.forEach.call(this.radios, function (el, i) {
            el.addEventListener('click', this.getSelect);
        }.bind(this));
    }
};

radiobutton.init();

https://jsfiddle.net/4svkk2j4/

Самый действенный и проверенный способ, это версионность js файлов. То есть выпустили новую версию веб приложения, меняем название файлов app_1.2.js
Как менять название подключаемых файлов автоматически, это уже другой вопрос, зависит от архитектуры, да и вообще нужно смотреть каждую ситуацию отдельно.

Некоторые скажут что можно менять версию через параметры app.js?v=1.2, но такая схема работает не на всех браузерах.

Поищите плагины со словами "lazy load" и "отложенная загрузка" или "ленивая загрузка". Есть готовые решения, но конкретно не могу ссылку скинуть.
Её легко можно самому написать.

Как вариант

function shuffle(arr) {
	var newArr=[],
		count=arr.length
		i=null,
		rnd=null;

	for (i=0; i<count; i++) {
		rnd=~~(Math.random() * arr.length);
		newArr.push(arr[rnd]);
		arr.splice(rnd,1);
	}
	return newArr;
}
console.log(shuffle(m));

Не совсем по вашему вопросу, но посмотрев на код, подумал что вам это пригодится momentjs.com

Если кому ещё нужно, вот готовое решение:

var checkIfFlashEnabled = function() { 
	var isFlashEnabled = false; 
	// Проверка для всех браузеров, кроме IE 
	if (typeof(navigator.plugins)!="undefined" && typeof(navigator.plugins["Shockwave Flash"])=="object") isFlashEnabled = true; 
	else if (typeof  window.ActiveXObject !="undefined") { 
		// Проверка для IE 
		try { 
			if (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) isFlashEnabled = true; 
		} catch(e) {}; 
	}; 
	return isFlashEnabled; 
};