Мелкие хитрости и полезности при написании JS-кода - Каталог статей - Уроки по html/css - Разное www.Sefirut.ru - разработка шаблонов, сайтов, иконок, скриптов, создание сайтов набережные челны, студия веб-дизайна в Набережных Челнах, раскрутка и продвижение сайтов в интернете
| Сегодня Суббота 10.12.2016

Мелкие хитрости и полезности при написании JS-кода


Для того чтобы создать JSON-объект вместо new Object надо использовать {}, а вместо конструкции для создания массива
new Array() — [].
Также этот способ может быть удобен для формирования небольшой библиотеки, хранящей сгрупированные методы (функции). Например:


profile = {
"name": 'Joe',
"surname": 'Black',
"age": 23,
"skills": ['coding', 'layout', 'design', 'other'],
"friends": [
{"name": "Alex", "info": "Best friend"},
{"name": "Ann", "info": "Girl friend"},
]
}
// profile.friends[0].name - выдаст нам "Alex"

myLib = {
'ts': Date.parse(new Date),
'rand': function(min, max)
{
min = min || 0;
return Math.floor((Math.random() * (max - min))) + min;
},
'getvar': function( varname ) { return this.varname }
}
// myLib.rand(25, 100) - выдаст нам рандомное число от 25 до 100
// myLib.ts - свойство объекта, возвращающее отметку времени (UNIX TIMESTAMP) в секундах


Переменные по умолчанию внутри функций можно создать при помощи логического «ИЛИ».
Логическое «ИЛИ» можно использовать не только один раз при выставлении значения для переменной. Присвоение значения производиться слево на право. Пример:


function greetings() {
name = arguments[0] || window.username || 'Guest'
alert( 'Welcome back, ' + name + '!' )
}


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

alert( Number(10).toString(16) ) // конвертируем десятичное число 10 в 16-тиричную систему, в итоге имеем "A"
alert( parseInt('FF', 16) ) // конвертируем шестнадцатиричное число FF в 10-тичную систему, в итоге получаем "255"


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


function sayHello( msg ) { alert( msg ) }
function welcome( text, handler )
{
text = text || null;
if( text ) handler( text )
}

// в итоге будет вызвана функция sayHello с аргументом 'Hello world'
welcome( 'Hello world', sayHello );

// в этом случае мы также не привязаны к конкретной функции, и в качестве аргумента создаем едино кратно
свою функцию со специфическими действиями
welcome( 'Mission failed', function( msg ){
window.onload = function(){
document.body.innerHTML = msg;
}
});


При работе с AJAX-ом, чтобы при отдаче страницы сервером мы получали не только строку в JS, а например объект, но нам внутри запрашиваемой страницы (например AJAX_handler.php)
нужно формировать JSON-объект, как в описанном выше примере, и уже полученный ответ от сервера внутри JavaScript присваивать через
выражение eval, которое обработает валидную JS-строку как код.
Если вы не уверены что строка всегда будет валидной, то лучше все выражение «запихнуть» в конструкцию try-catch. Пример:


simpleAjax({'action': '/AJAX_handler.php', 'method': 'POST'}, function( json )
{
try { json = eval( json ) }
catch(e){
alert( 'Ошибка получения объекта: ' + e.message )
return false;
}
if( typeof json == 'object' ){
// выполняем необходимые действия с полученным объектом
}
});


Выражения Javascript также могут использоваться внутри CSS-файлов в выражении expression, но это касается только Internet Explorer.
Для примера, т.к в IE 6 в CSS не реализовано наследование свойств родителя через ключевое слово inherit, то можно его симулировать при помощи expression:


<style type="text/css">
div { color:red; }
div a {
color:inherit; /* это для Opera, Firefox, итд. */
color:expression( this.parentNode.currentStyle.color ); /* работает только в IE */
}
/* В результате, цвет ссылок будет таким же, как цвет текста в div-е */
</style>


Чтобы узнать все существующие свойства и методы объекта, достачно их перебрать циклом for, как приведено в примере ниже:

dump = '';
obj = document;
for( i in obj ) dump += i +' => '+ obj[i] +"\n";
alert( dump );


Уже существующие объекты JS можно «расширять» при помощи их свойства prototype. Так, например, мы можем расширить объект Number для конвертации десятичного числа в 16-тиричное, как в уже приводилось выше. Пример:

Number.prototype.toHEX = function() { return this.toString(16) }
// в дальнейшем, если мы вызовем метод объекта Number таким образом: alert( Number(10).toHEX() ),
на выходе мы получим 16-тиричное число "A"


При создании функции JS, мы её можем использовать не по прямому назначению, а в качестве конструктора объектов и наследования.
Тогда внутри функции можно будет использовать ключевое слово «this», а объект создавать через ключевое слово «new». Для лучшего понимания взглянем на простой пример:


// создаем конструктор с характеристиками класса животных
function animal( color )
{
this.eyes = 2;
this.color = color || 'black';
this.features = ['wool'];
}

// создаем конструктор, который наследует свойства класса животных и дополняет его
function cat()
{
this.constructor = animal;
this.constructor.apply(this, arguments)
this.features[ this.features.length ] = 'claws';
this.features[ this.features.length ] = 'legs';
}
// создаем объект класса (конструктора) "cat", в итоге, например, обращение к свойству объекта "bars" вроде этого:
bars.features вернет нам массив ['wool', 'claws', 'legs']
bars = new cat('white');
alert( bars.features );


Используйте ключевое слово «var» для объявления переменных. Если вы еще не знали, то при объявлении переменной без этого ключевого слова в любом месте программы, в том числе внутри функций — переменная объявляется в глобальной области видимости (т.е видимости объекта window), что может привести к неожиданным последствиям. Объявление при помощи var — создает переменную в той области (scope), в которой она была объявлена, причем эта область будет существовать всегда, пока существует хотя бы одна ссылка на объект или метод, который также имеет доступ к этой области видимости. Чтобы было понятнее приведу несколько строк кода:
например, если мы объявляем переменную в пределах window, то..

// Объявляем переменную в области window, что также эквивалентно window.x = 1 или var x = 1;
x = 1;
// Но если объявление переменной идет внутри функции, дело обстоит совсем иначе:
function test(){
var x = 1; // если бы мы инициализировали переменную без var, то после вызова test() она бы «вывалилась» в window.x
return function(){ return x++; }
}
// Таким образом мы можем создать "статическую переменную функции":
var counter = test();
// Каждый вызов counter() будет возвращать увеличенное значение локальной переменной x
alert( counter() ) // x = 1
alert( counter() ) // x = 2


Также, дополнительным плюсом объявление переменных при помощи var (даже если не было присвоено значение) - при попытке обратится к переменной, она возвратит значение внутренней переменной window.undefined, когда без var - была бы инициалирована ошибка RunTime Error и выполнение дальнейшего сценария было бы прекращено. Для лучшего ознакомление с данной темой советую почитать информацию про замыкания в JS в других источниках.
Категория: Разное | Добавил: Admin (10.10.2010)
Просмотров: 1156 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]