1 Яваскрипт появился в 95 году. В декабре вышла "стабильная" версия, которую и презентовали Нетскейп и прочие СанМикросистемсы. Изначально скриптовый языка назывался LiveWire. Тупо, где в названии слово "скрипт". Переименованый LiveScript недолго просушествовал, тк было чуть менее чем очевидно, что козырная Java привлечет клиентов и позволит воспользоваться славой АППЛЕТОВ писаных на Java`e.(Вы про них знаете? Я удивлен) Но в то время это работало.
Итак, в 96 году можно спокойно кодить на JavaScripte. К сожелению, не все браузеры одинаково полезны и некоторые старожилы говорят, что функция substring() работала не совсем корректно. А уж скорость яваскрипта и использование памяти!!
К счастью сейчас многие проблемы уже решены.
Но не все, далеко не все...
И вот что я хочу вам сообщить свои советы. Особые, уличные советы:
1 Используйте фреймворки.
Избавьтесь от document.getElementById(). Замените на dojo.byId. или $(). Да не только приятные сокращения функций. Фреймворки позволяют избавиться от кодинга под определенный браузер. Пишите сразу на все, будучи кросплатформеннее и лаконичнее. Вызов Ajax`овый средствами голого яваскрипта займет у вас много строчек, добавление кроспалтформенности заставит добавить еще несколько строк. Если это действительно хороший Ajax, то у вас строчек 20 уйдет на его написание. Не проще ли написать dojo.xhr(). Вся мощь аякса в 3 буквах. (Что такое xhr? Да это же XMLHTTPRequest, по русски, запрос XML`а по протоколу HTTP).
2 Поймите смысл эвент бублинга.
Когда вы вешаете обработчик на onclick, то происходит event(событие в жизни странички). Но это событие всей страницы. <div onclick="alert('achtung!!11!')"> поделится событием в своей жизни со своими родителями(body и промежуточные мамы-папы)
Что это значит? Да просто <body onclick="alert('True body, sexy body')"><div onclick="alert('achtung!!11!')"></body> будет работать так как надо. То есть сначала вылетит ахтунг, а потом секси боди. Вряд ли вы этого захотите в реальном проекте, поэтому используйте решения наподобии dojo.stopEvent() и dojo.preventDefault(). Просто и экономично вам помогут те же фреймворки. Про всякие dojo.connect(), dojo.publish(), dojo.hitch() и им подобные я пока говорить не буду.
3 Осознайте кривость аттрибутов.
HTML развивается. Появился XHTML. что же значит Ха впереди? Может экстрим? может экскремент? может экскаватор?
Все проще. Это значит, что наш HTML приблизился к XML`у. А XML не любит аттрибуты. Злые они. Что вообще такое аттрибуты? Это style и id в <div id="div" style="div">Div too</div>. Конечно можете писать хоть <div superAttr="wow!"></div>. В целях обратной совместимости браузер и не такое говно проглотит, но валидатор вас обосрет. А что делать если валидатор ругается на dojoType? Создавайте их программно. Не поняли? Тогда нафиг вам доджо. Ну потом может быть расскажу.
4 Циклы и анонимные функции, которые ждут, чтобы их выполнили.
Как вы думаете, что покажет функция
for (var i=0; i < 3; i++) {
var foo = dojo.byId("foo"+i);
var handle = dojo.connect(foo, "onclick", function(evt){alert(i);
dojo.disconnect(handle);
});
}
Поясню, dojo.connect присобачивает к элементу с id=foo+i на каждое событие onclick по функции с переменной. Все это лирика. Суть в том, что покажут алерты. А покажут они 2 раза цыфру 3. На всех 3 элементах. И все это потому что i вычислится в момент выполнения функции. Надо заставить функцию работать так как мы хотим, а не она может. В этом нам помогут скобочки и еще одна переменная.
for (var i=0; i < 10; i++) {
(function() {
var foo = dojo.byId("foo"+i);
var current_i = i; //обьявим для того чтобы воспользоваться ею. Именно она будет жертвой анонимной функции.
var handle = dojo.connect(foo, "onclick",
function(evt) {
alert(current_i);
dojo.disconnect(handle);
}
);
})(); // Выполнить анонимные функции немедленна
}
Кстати, можете поинтересоваться Flapjax`ом, тоже поможет решить некоторые проблемы.
5 Банальщина про CSS.
Надеюсь, все знают, что таблицы созданы для отображения информации. Что тег font, сцуко, устарел. Что CSS должно заменить инлайновые декларации стилей. Все знают про разделение содержания(HTML), дизайна(CSS), и программных фигулин(JavaScript). Это банальные веши и все их знают.
6 Дивитис и Класситис.
Че за латынь? спросите вы. Все гораздо проще дивитис(америк"divitis") засранность кода дивами(не теми которые в опере). Пример
<div class="numbers">
<ul>
<li>Адын</li>
<li>Дыва</li>
<li>Тры</li>
</ul>
</div>
Внимание, вопрос! А нахрена нам первый див? Убираем смело.
<ul class="numbers">
<li>Раз</li>
<li>Два</li>
<li>Три</li>
</ul>
Класситис(староангл "classitis") обозначает загруженность class`ами.
<ul>
<li class="model">Мерседес</li>
<li class="model">БМВ</li>
<li class="model">БМП</li>
<li class="model">Тачка крутого стритрейсера</li>
</ul>
И брюки превращаются...
<ul class="car">
<li>Лада</li>
<li>Калина</li>
<li>Лучшая</li>
<li>Машина</li>
</ul>
7 Чтите доктайп.
Это такая странная надпись вроде
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
Это та самая вещь, которая определит, что же вы шлёте в браузер, да будут долги дни его! Ничего не понятно? Хммм...
Такая маленькая подборочка