I’ ве писал JavaScript кода гораздо дольше, чем я хочу помнить.Я очень взволнован по поводу language’ недавний успех с; it’ хорошо, чтобы быть частью этого успеха.I’ ве написаны десятки статей, глав в книгах и одна полная книга по этому вопросу, и тем не менее я продолжаю находить новые вещи.Вот некоторые из “ ага ”! Моментов I’ нас было в прошлом, которые вы можете попробовать, а не ждать, когда они придут к вам на chance.
Переход Notations
Одна из вещей, которые я люблю больше всего в наличие в настоящее время является контекстное обозначений для создания объектов и массивов.Так, в прошлом, когда мы хотели создать объект, мы писали:
var car = new Object(); car.colour = 'red'; car.wheels = 4; car.hubcaps = 'spinning'; car.age = 4;
То же самое может быть достигнуто с:
var car = {
colour:'red',
wheels:4,
hubcaps:'spinning',
age:4
}
Гораздо короче, и вы don’ т необходимо повторять имя объекта.Прямо сейчас, car это хорошо, но что происходит, когда вы используете invalidUserInSession?Основными Гоча в этом обозначение IE.Никогда не оставит завершающую запятую перед закрывающей фигурной скобкой или you’ будете в trouble.
Другие удобные обозначения ярлык для массивов.Старой школы определении массивов был такой:
var moviesThatNeedBetterWriters = new Array( 'Transformers','Transformers2','Avatar','Indiana Jones 4' );
Сокращенный вариант это:
var moviesThatNeedBetterWriters = [ 'Transformers','Transformers2','Avatar','Indiana Jones 4' ];
Другая вещь, о массивах в том, что не существует такой вещи, как ассоциативный массив.Вы найдете много примеров кода, которые определяют выше car Например вот так:
var car = new Array(); car['colour'] = 'red'; car['wheels'] = 4; car['hubcaps'] = 'spinning'; car['age'] = 4;
Это не Спарта, это madness— don’ T возиться с этим.“ Ассоциативные arrays” является запутанным имя objects.
Еще один очень здорово контекстном обозначения троичной системе счисления для условий.Таким образом, вместо следующее …
var direction;
if(x < 200){
direction = 1;
} else {
direction = -1;
}
... Вы могли бы написать короткую версию использованием троичной системе счисления:
var direction = x < 200 ? 1 : -1;
true случае условие после знака вопроса, и в другом случае следует colon.
Как JSON данных Format
Прежде, чем я обнаружил JSON для хранения данных, я сделал все виды сумасшедшие вещи, чтобы положить содержимое в JavaScript-готовый формат: массивы, строки с контрольными символами, чтобы разделить и другие мерзости.Создание JSON Дуглас Crockford все изменилось.Использование JSON, вы можете хранить сложные данные в формате, который является родным для JavaScript и не нуждается в каких-либо дополнительных преобразования, которые будут использоваться immediately.
JSON является сокращением от "обозначения объектов JavaScript" и использует обе клавиши мы рассмотрели earlier.
Таким образом, если бы я хотел, чтобы описать группу, например, я мог бы сделать следующее:
var band = {
"name":"The Red Hot Chili Peppers",
"members":[
{
"name":"Anthony Kiedis",
"role":"lead vocals"
},
{
"name":"Michael 'Flea' Balzary",
"role":"bass guitar, trumpet, backing vocals"
},
{
"name":"Chad Smith",
"role":"drums,percussion"
},
{
"name":"John Frusciante",
"role":"Lead Guitar"
}
],
"year":"2009"
}
Вы можете использовать JSON непосредственно в JavaScript и, когда обернутый в вызове функции, как и возвращение формат API.Это называется JSON-P и поддерживается большим количеством интерфейсов API там.Вы можете использовать данные конечной точки, возвращение JSON-P непосредственно в узел сценария:
<div id="delicious"></div><script>
function delicious(o){
var out = '<ul>';
for(var i=0;i<o.length;i++){
out += '<li><a href="' + o[i].u + '">' +
o[i].d + '</a></li>';
}
out += '</ul>';
document.getElementById('delicious').innerHTML = out;
}
</script>
<script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script>
Это вызывает Вкусные веб-службу, чтобы получить мой последний наличие закладок в формате JSON, а затем отображает их в виде неупорядоченного list.
В сущности, JSON, вероятно, наиболееЛегкий способ описания сложных data— и работает в браузере.Вы можете даже использовать его в PHP использовании json_decode() function.
Неуправляемых функций JavaScript (математика, массив и String)
Одна вещь, которая поразила меня в том, насколько легче моей жизни есть только я прочитал полностью на математических и строковых функций JavaScript.Вы можете использовать их, чтобы избежать большого количества циклов и условий.Например, когда у меня была задача найти наибольшее число в массиве чисел, я использовал, чтобы написать цикл, вот так:
var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;i<numbers.length;i++){
if(numbers[i] > max){
max = numbers[i];
}
}
alert(max);
Это может быть достигнуто без цикла:
var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);
Обратите внимание, что вы не можете использовать sort() на ряд массивов, потому что он сортирует лексически.Там в хороший учебник по sort() here в случае, если вам нужно знать more.
Другой интересный метод Math.max().Это одна возвращает наибольшее число из списка параметров:
Math.max(12,123,3,2,433,4); // returns 433
Потому что это тесты для чисел и возвращает самый большой, вы можете использовать его для тестирования браузера поддержкой определенных свойств:
var scrollTop= Math.max( doc.documentElement.scrollTop, doc.body.scrollTop );
Это работает около проблема Internet Explorer.Вы можете прочитать scrollTop текущего документа, но в зависимости от DOCTYPE документа, одного или другого имущества присваивается значение.При использовании Math.max() вы получаете правильный номер, потому что только одно из свойств возвращает одно, другой будет undefined.Вы можете прочитать больше о сокращении JavaScript с математическими функциями here.
Другие очень мощные функции для обработки строк составляют split() и join().Вероятно, наиболее наглядным примером этого является написание функции приложить CSS классы elements.
Дело в том, что при добавлении класса к элементу DOM, вы хотите добавить его либо в качестве первого класса или уже существующие классы с пространством перед ним.При удалении классов, вам также необходимо удалить пробелы (который был намного более важно в прошлом, когда некоторые браузеры не удалось применить классы с конечными пробелами)
Итак, исходная функция будет что-то вроде:
function addclass(elm,newclass){
var c = elm.className;
elm.className = (c === '') ? newclass : c+' '+newclass;
}
Вы можете автоматизировать это с помощью split() и join() методы:
function addclass(elm,newclass){
var classes = elm.className.split(' ');
classes.push(newclass);
elm.className = classes.join(' ');
}
Это автоматически обеспечивает классы пробел и ваше получает пристегивается на end.
События Delegation
События сделать работу веб-приложения.Я люблю событий, особенно пользовательские события, которые делают вашу продукцию расширяемой без вашего необходимости прикасаться к основной код.Основная проблема (и на самом деле одна из его сильных сторон), что события будут удалены из HTML— установки приемника событий для определенного элемента, а затем он становится активным.Ничто в HTML показывает, что дело обстоит именно так, хотя.Возьмите эту абстракцию вопрос (который трудно для новичков, чтобы обернуть вокруг головы) и тот факт, что "браузеры", такие как IE6 есть все виды проблемы с памятью и слишком много событий, применяемые к ним, и вы увидите, что не используют слишком многообработчиков событий в документеwise.
Это где события delegation приходит дюйма Когда событие происходит на определенный элемент и все элементы выше в иерархии DOM, вы можете упростить обработку событий с помощью одного обработчика на родительский элемент, ачем при использовании многих handlers.
Что я подразумеваю под этим?Допустим, вы хотите список ссылок, и вы хотите вызвать функцию, а не загружать ссылки.HTML будет выглядеть так:
<h2>Great Web resources</h2> <ul id="resources"> <li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li> <li><a href="http://sitepoint.com">Sitepoint</a></li> <li><a href="http://alistapart.com">A List Apart</a></li> <li><a href="http://yuiblog.com">YUI Blog</a></li> <li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li> <li><a href="http://oddlyspecific.com">Oddly specific</a></li> </ul>
Нормальный способ применить обработчики событий здесь будет цикл по ссылкам:
// Classic event handling example
(function(){
var resources = document.getElementById('resources');
var links = resources.getElementsByTagName('a');
var all = links.length;
for(var i=0;i<all;i++){
// Attach a listener to each link
links[i].addEventListener('click',handler,false);
};
function handler(e){
var x = e.target; // Get the link that was clicked
alert(x);
e.preventDefault();
};
})();
Это также можно сделать с помощью одного обработчика события:
(function(){
var resources = document.getElementById('resources');
resources.addEventListener('click',handler,false);
function handler(e){
var x = e.target; // get the link tha
if(x.nodeName.toLowerCase() === 'a'){
alert('Event delegation:' + x);
e.preventDefault();
}
};
})();
Потому что мыши происходит на всех элементов в списке, все, что вам нужно сделать, это сравнить
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров