Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
$('.my_app').each(function(){
var $app = $(this);
});Этим мы избавляемся от инициализации, формируем для каждого экземпляра свой контекст и получаем возможность использовать несколько приложений на странице.$('.my_app').each(function(){
var $app = $(this);
var $button1 = $app.find('.button');
var $slider = $app.find('.slider');
// навешивание событий, другие вычисления.
});$(document).ready(function() {
if($('.element').length) {
$('.element').myUserFunction(200,23);
}
if($('.element2').length) {
$('.element2').myUser2Function(24332,123);
}
});
* This source code was highlighted with Source Code Highlighter.scriptsFor("/Home/", function() {
// ...
});
function scriptsFor(pageName, initFn) {
if (window.location.pathname == pageName)
initFn();
}
$(function (){
window.UI = (function() {
return {
dom : {
//Сюда складываем все элементы которые в большинстве своем есть на всех страницах.
Menu : $('#menu'),
cCont : $('#content-container')
},
init: function () { //Функция инициализации UI страницы. Приложения, как правило, я выношу отдельно, чуть ниже.
var _dom = this.dom, argLength = arguments.length, i = 0, Content = $('.content', _dom.cCont);
//Делаем что-нибудь с контентом\блоком, который есть на всех страницах
Content.css({opacity:0.3, background:'red'});
_dom.Menu.fadeOut();
$('.active', _dom.Menu).css({"opacity":0.8});
//Шерстим входные параметры и делаем строго то, что надо
for ( ; i < argLength; i++ ) {
switch(arguments[ i ]) {
case 'index' : //К примеру, только главная страница - UI.init('index');
$('.button', _dom.cCont).click(function(){
location.href="/products/";
});
break;
case 'content' : //Заголовок в блоке контент получит красную рамку - UI.init('content');
$('h1', _dom.cCont).css({'border':'1px solid red'});
break;
}
}
}
}
})();
});
* This source code was highlighted with Source Code Highlighter.//Несмотря на то, что весь этот паттерн лежит в js файле он обернут в стандартный jquery
//метод $(document).ready, $(function () { бла бла бла }) это краткая его запись.
$(function (){
//Далее, мы создаем объект для всей страницы (window.UI) фактически это инкапсулированная функция которая возвращает объект.
//Иными словами,когда случается документ реади запускается эта функция и возвращает вкусный и красивый объект по заданным параметрам.
window.UI = (function() {
return {
/*Этот элемент, это некий сторадж, где мы можем предварительно указать дефалтные значения обязательных блоков страниц,
таких как меню, подменю, всякие холдеры, контэйнеры и т.д. Эти элементы будут найдены и закэшированны первым делом.
В дальнейшем, эти элементы могут быть использованы как отправные точки для поиска более частных блоков. Кэш в элемент
необходим для того чтобы можно было их использовать а) как внутри объекта this.dom.Menu, так и за его пределами
UI.dom.Menu б) мы избегаем лишних запросов jquery на поиск элемента. вызывать 20 раз $('#menu') не айс.*/
dom : {
Menu : $('#menu'),
cCont : $('#content-container')
},
/*Это основная фишка. Функция инициализации UI страницы. Аргументами мы передаем функции команды на то, что надо сделать со
страницей. Например, вызываем этот паттер с параметром index - UI.init('index') и будьте уверены, что выполнится все что
находится в кейсе index и все что находится в корне функции init. Параметров можно передавать несколько -
UI.init('index', 'content', 'banner'); Я ее слегка запилил и она ничего не возвращает, но лучше бы она хоть что-нибудь
да возвращала, например, еще один объект :). */
init: function () {
var _dom = this.dom, // тут все понятно, это наш сторадж
argLength = arguments.length, //кол-во элементов переданных этой функции
i = 0, //изюминка
//Кэшируем блок контента (таки опять чтобы его не искать 300 раз) область поиска закешированный ранее content-container.
//Обратите внимание что это приват.
Content = $('.content', _dom.cCont);
//Какие-либо манипуляции с элементами. Примеры внизу я написал от балды, главное то, что эти манипуляции лежат над циклом
//перебора аргументов и будут выполнены независимо от того какие параметры были переданы.
Content.css({opacity:0.3, background:'red'});
_dom.Menu.fadeOut();
$('.active', _dom.Menu).css({"opacity":0.8});
//Этот цикл переберает переданные аргументы, ну, и, делает то, что сказано.
for ( ; i < argLength; i++ ) {
switch(arguments[ i ]) {
//Собственно навешивание определенных действий на входной параметр.
case 'index' : //К примеру, только главная страница - UI.init('index');
/*Тут небольшой затык - если следовать правилам хорошего тона, то мы не можем тут объявлять переменные
(var button = $('.button', _dom.cCont); ), но наверно, это не ООП, а его пародия :) так что можно и забить. По правилам
хорошего тона var внутри функции должен быть 1 раз, и он несколько выше, но это сильно усложняет поддержку кода и
вызывает путаницу. Короче, тут надо еще подумать :) */
$('.button', _dom.cCont).click(function(){
location.href="/products/";
});
break;
//Команда на другую последовательность действий
case 'content' : //Заголовок в блоке контент получит красную рамку - UI.init('content');
$('h1', _dom.cCont).css({'border':'1px solid red'});
break;
}
}
}
}
//Вот как-то так. Тут используется инкапсуляция, замыкания во все поля, пародия на ооп. Если вы знаете что все это такое,
//то разберетесь быстро, придумаете усовершенствования, найдете хлипкие места и предложите свои поправки в комментариях ниже
})();
});
* This source code was highlighted with Source Code Highlighter.<!--В html вызов всей этой фигни выглядит так:-->
<!--Файлик с нашим хрен-разберешся-паттерном-->
<script type="text/javascript" src="/j/index.js"></script>
<script type="text/javascript">
$(function (){ //$(document).ready
UI.init('index'); //Вызов того, что надо сделать.
//или так - UI.init('index', 'content'); т.е. выполнить и то, и это, и все общее.
});
</script>
</body>
* This source code was highlighted with Source Code Highlighter.$('#my_div').find('a').css('color','red')$('a').each(function(){
if ($(this).parents('div#my_div').length)
$(this).css('color','red')
});$(function(){
if (!$('#my_app').length)
return false;
/*Продолжаем*/
});
if(document.getElementById("results_table") &&
document.getElementById("results_table").tagName=="TABLE")) {
foobar();
}
Простой способ немного разгрузить инициализацию javascript на странице