Pull to refresh

5 полезных приемов

Reading time 3 min
Views 7.2K
Эти маленькие куски кода я насобирал за весь свой стаж JavaScript-программирования. Они должны серьезно облегчить жизнь Web-разработчика, и научить решать проблемы проще, не прикручивая тяжеловесные JavaScript-библиотеки. Не спорю, иногда они могут оказаться весьма полезными, но подгружать JQuery для создания таймера — это, по-моему, дикость…



Прием №1:

В Интернете очень мало документации по удалению объектов средствами JavaScript. На одном из форумов мне так вообще сказали, что это невозможно. На самом деле — не только возможно, но и очень просто:

function Kill(object) {
object.innerText = null;
object.innerHTML = null;
object.outerHTML = null;
object = null;
}


Объект, передаваемый в первом и единственном аргументе функции, удаляется полностью. DOM это элемент, или переменная, все равно от объекта ничего не останется. Если, например, из функции убрать первые две строки, к объекту нельзя больше будет обратиться, но HTML элемент никуда не денется. К функции можно дописать что-то вроде этого:

if(typeof(object)=="string"){object=document.getElementById(object)};

Для автоматизации процесса. Тогда вместо самой ссылки на объект, можно передать в качестве аргумента id какого-нибудь HTML элемента.

Прием № 2:

Из предисловия взят. Таймеры. Ну, мне кажется, достаточное количество народу знают про функции setInterval() и clearInterval(). Но некоторые программисты заблуждаются, думая, что заставить циклически выполняться можно только независимый JavaScript код, написанный в кавычках:

i = setInterval("alert('Hello, World!')",3000)

Все не так плохо! В реальности, вместо строки туда можно засунуть объект-функцию, несмотря на то, что передавать функции в аргументы и не принято:

i = setInterval(abc(),3000)

Некоторые пытаются передать функцию в кавычках, как строку, и ничего у них не выходит. Поскольку JavaScript гибок, как русские гимнастки, можно вообще написать все так:

i = serInterval(function{код_здесь},3000)

Так что таймер сделать действительно несложно.

Прием № 3:

AJAX многие любят. И в JavaScript иногда полезно реализовать функцию через обращение к скрипту на сервере. То есть:

bin2hex(number)

Вычислится на стороне сервера, а мы просто получим ответ. Одна проблема: на выполнение задания и передачу данных нужно время. Кто же нашу функцию ждать-то будет? Да никто! Можно использовать синхронные HTTP-запросы, которые «повесят» всю Web-страницу, пока не придет ответ. Здорово и легко:

function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

function Get(url) {
var xmlhttp = getXmlHttp()
xmlhttp.open('GET',url, false);
xmlhttp.send(null);
if(xmlhttp.status == 200) {
//код здесь
}
}

Вот только у пользователя инфаркт случится, когда его страница перестанет реагировать на события клавиатуры и мыши. Плюс, добавит масла в огонь какой-нибудь Chrome ("ОПАНЬКИ! Страница не отвечает!"). Так что гораздо лучше использовать асинхронные запросы, которые вызовет другую функцию, как только ответ будет получен:

function Get(url,whattado) {
var xmlhttp = getXmlHttp()
xmlhttp.open('GET',url, true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
whattado(xmlhttp.responseText);
}
}
};
xmlhttp.send(null);
}



Опять же, никто не запрещает писать:

Get('file.txt',function(txt){alert(txt)})

И браузер не зависнет, и программист порадуется.

Прием № 4:

Обходите Runtime Errors! Рядовой пользователь не знает про существование консоли и будет обижен, если какая-то кнопка на странице перестанет выполнять свои действия, вообще никак не реагируя (а, ведь, именно так случится, если произойдет ошибка). Используйте конструкцию try..catch для ловли исключений:

try
{
document.write(junkVariable)
}

catch(e)
{
alert(e.message)
}

Можно, кстати, вызывать исключения самостоятельно, оператором throw(). Но тогда вместо объекта message следует обращаться к его родительскому объекту напрямую:

try
{
//код_здесь
throw «Error5»
}
}

catch(e)
{
if(e == «Error5»){alert(«Ошибка № 5»)}
}

Прием №5:

Однажды, мне понадобилось создавать Read-only переменную для хранения версии JavaScript библиотеки. Понятно, что проблема с этим не только у меня, но странно, почему все требуют «Read-only variables», а не «Constants in JavaScript». Так вот, констант в JavaScript нет. Есть в ECMAScript, но тогда наша страница перестает быть кроссбраузерной, а заказчик в ту же секунду перестает нас кормить. Read-only переменные создаются с помощью Getter:

var lib = {
get version() {return 5}
}

lib.version == 5, т.е. ведет себя как переменная, а не функция.

Кроссбраузерная версия приема выглядит так:

var lib = {
this.__defineGetter__(«version»,function(){return 5});
}

Это далеко не все полезные приемы, о которых мне хотелось бы вам поведать. До скорых встреч.
Tags:
Hubs:
+4
Comments 47
Comments Comments 47

Articles