вторник, 2 июля 2013 г.

JavaScript Полезные подсказки

Оперетор delete выполняет попытку удалить свойство объекта или элемент массива.
При удалении элмента массива ему присваивается значение переменной undefined, но сам элемент из массива не удаляется.
Некоторые встроенные свойства объектов в JavaScript не могут быть удалены.
Также не могут быть удалены через delete переменные, объявленные с помощью инструкции var.
Также невозможно с помощью delete удалить функции, объявленные с помощью инструкции function F(){}, а также объявленные аргументы функции.

======================================

Оператор запятая , всегда вычисляет все выражения в цепочке, написанной через запятую, но возвращает всегда только результат последнего выражения.

======================================

throw выражение

Результатом выражение может быть значение любого типа, например число, строка или текст сообщения.

try {

} catch(error) {
    // разбор типа error происходит здесь
} funally {

}

Написание блока catch или finally после try является обязательным!!!

Имитация цикла For через цикл While и Try - Finally.

while (выражение сравнения) {
    try {
        тело цикла
    } finally {
        выражение инкремента цикла
    }
}

======================================

Наследование и перезапись свойств в объектах.

Предположим, что программа присваивает некоторое значение свойству x объукта o.
Если объект o уже имеет собственное свойство (не унаследованное через prototype) с именем x, то операция присваивания просто изменит значение существующего свойства x.
Если в объекте o нет свойства x, то в объекте o будет создано новое свойство x и присвоено ему значение.
Если объект o имеет унаследованное через prototype свойство x от другого объекта, то унаследованное свойство окажется скрытым вновь созданным собственным свойством объекта o с тем же именем x.
Если объект o наследует свойство x, доступное только для чтения, но не для записи, то присваивание выполняться не будет.
Однако, если присваивание доступно, то всегда создается или изменяется собственное свойство в оригинальном объекте и никогда в цепочке прототипов.

function inherit(parent){
    function F() {}
    F.prototype = parent;
    return new F();
}

var obj = {a: 1}; // Объект родитель, от которого наследуется свойство a.
var child = inherit(obj); // Объект child наследует свойств a родителя obj.
child.b = 2; // Объект child определяет собственное свойство b.
child.a = 3; // Объект child переопределяет внутри себя унаследованное свойство a.

console.log(child.a); // 3
console.log(obj.a);   // 1 - объект прототип не изменился.

Существует одно исключение, когда операция присваивания значения свойству терпит неудачу или приводит к созданию или изменению свойства объекта прототипа.
Если объект o наследует свойство x от объекта прототипа и доступ к этому свойству осуществляется через метод доступа (get, set), то вместо создания свойства x в объекте o производится вызов метода записи новго значения.
Однако обратите внимание, что метод записи вызывается относительно объекта o, а не относительно прототипа, в котором определено это свойство.
Поэтому , если метод записи определяет какие-либо свойства, то они будут созданы в объекте o, а цепочка прототипов останется неизменной.

Обращение к несуществующему свойству объекта вернет undefined.
Обращение к несуществующему объекту вызовет ошибку.
Свойства встроенных конструкторов недоступны для изменения.
Object.prototype = {a: 1}; // Значение Object.prototype не изменится.

Оператор delete удаляет собственные свойства из объекта. Для удаления унаследрованного свойства надо удалить свойство в prototype Объекта родителя.
Удаление или изменение свойства в объекте прототипе затронет все объекты, наследующие этот прототип.

Оперетор in проверяет наличие в объекте собственного или унаследованного свойства с заданным именем.
Метод hasOwnProperty() проверяет имеет ли объект собственное свойство с данным именем.
Метод propertyIsEnumerable() проверяет является ли собственное свойство объектов перечисляемым в цикле for-in.

Значение prototype функции конструктора можно получить в объекте потомке через obj.contructor.prototype.

Пример

function inherit(parent){
    function F() {}
    F.prototype = parent;
    return new F();
}

var obj = {a: 1}; // Объект родитель, от которого наследуется свойство a.
var child = inherit(obj); // Объект child наследует свойств a родителя obj.
child.a = 3; // Объект child переопределяет внутри себя унаследованное свойство a.

console.log(child.constructor.prototype.a); // 1

constructor - это как бы parent или super.

======================================

Строки поддерживают 4 метода, использующих регулярные выражения.

'string'.search(pattern); // возвращает позицию первого символа найденной подстроки, либо -1, если соотвествие не найдено. Метод search() не поддерживает глобальный поиск и игнорирует флаг g.
'string'.replace(patter, 'a'); // выполняет операцию поиска всех значений с заменой. Без флага g метод заменяет только первое совпадение. Найденные подстроки могут использоваться в качестве замены через знак $.
'string'.replace(patter, '$1');
'string'.match(pattern); // возвращает массив со всеми результатами поиска. Без флага g метод возвращает массив с первым совпадением.
'string'.split(pattern); // разбивает строку по разделителю и возвращает массив значений.

Паттерны поддерживают 2 метода, использующих строки.

pattern.exec('string'); // метод похож на match. Он возвращает массив со всеми результатами поиска, как метод match без флага g или null, если совпадение не найдено. Метод exec(0 возращает только одно первое соотвествие. Метод exec(0 можно вызывать посторно для продолжения поиска совпажений в том же тексте.
pattern.test('string'); // возвращает true, если совпадение найдено и false, если совпадение не найдено.

======================================

Работа с DOM

document.getElementById('id');
document.getElementsByTagName('tag');
document.getElementsByName('name');
document.querySelector('.first');
document.querySelectorAll('.first');
document.getElementsByClassName('.first');

el.parentNode;

el.firstChild;
el.lastChild;

el.nextSibling;
el.previousSibling;

el.innerHTML = '';

el.textContent = '';
el.innerText = ''; // для IE

el.cloneNode();
el.importNode(); // для IE

document.createElement('h1');
document.createTextNode('some text');
document.createDocumentFragment();

el.applendChild(other_element);
docFragment.appendChild(other_element);

el.insertBefore(other_element, parent);
document.body.insertBefore(div, input);

document.body.removeChild(div);
el.removeChild(child_element);
el.replaceChild(child_element);

el.style.color = '#ff0000';
el.className = 'first';

document.styleSheets[0].disabled = true;

el.setAttribute('zipcode', 'moscow');
el.getAttribute('zipcode');

======================================

Работа с событиями

el.onclick = function() {alert(this.innerHTML);};
el.addEventListener('click', function(){alert(this.innerHTML);}, false);
el.addEventListener('scroll', function(){alert(this.innerHTML);}, false);

el.removeEventListener('click', function(){alert(this.innerHTML);}, false);
el.removeEventListener('scroll', fucntion(){alert(this.innerHTML);}, false);

// Для IE
el.attachEvent('click', function(){alert(this.innerHTML);});

el.detachEvent('click', function(){alert(this.innerHTML);});

el.onclick = function(e){
    e.preventDefault();
    e.stopPropagation();
    e.cancelBubble =  true;
    return false;
};

for (var i = 0; i < 10; i++) {
    (function(value){
        var el = document.createElemetnt('button');
             el.onclick = function(){alert(value);};
             document.body.appendChild(el);
    })(i);
}

if (el.addEventListener) {
    el.addEventListener('click', handlerFunction, false);
} else if (el.attachEvent) {
    el.attachEvent('click', handlerFunction);
} else {
    el.onclick = handlerFunction;
}

======================================

alert(document.cookie);
doucment.cookie = 'name=value; path=/; expires=' + date.toUTCString();

======================================

DOMContentLoaded и onload

window.addEventListener('load', load, false);
document.addEventListener('DOMContentLoaded', load, false);

onload срабатывает когда все файлы CSS, JavaScript и картинки полностью загружены и индикатор загрузки страницы в браузере перестал вращаться.
DOMContentLoaded срабатывает раньше (всегда до onload), то есть когда все HTML-тэги браузером разобраны, и дерево DOM построено, но файлы картинок и файлы JavaScript, загружаемые асинхронно могут быть еще не загружены.

======================================

Комментариев нет:

Отправить комментарий