@maxprof
Студент

Как правильно писать код на jquery?

Здравствуйте, подскажите как правильно писать код на Jquery. Точнее помогите разобраться с правилами.
Есть код, он рабочий, но меня оочень смущает, что я делаю несколько раз document.ready и несколько других вещей.
Подскажите как правильно организовать этот код пожалуйста.
И да, понимаю что я говно-кодю, по этому и задаю тут вопрос.

$(document).ready(function(){  
	$('.main-menu,.white-text-bgc').hover(function(){ 

	// Считаю высоту подлжки
	kilkElemGlavnogoMenu = $(".main-menu>li").length;
	vusotaGlavnogoMenu = kilkElemGlavnogoMenu * 30;
		$(".white-text-bgc").height(vusotaGlavnogoMenu);
		$(".white-text-bgc").css("display","block");
		$(".white-text-bgc").css("background-color","#fff");
		$(".white-text-bgc").css("border","1px solid #a6a6a6");
	//Конец подложки
		$(".img_block-white_podlozka").css("display","block");
	//Наведение на пункты
}, function(){
	$(".white-text-bgc").css("display","none");
	$(".img_block-white_podlozka").css("display","none");
}); 
	$(".myRoom").click(function(){
		$(".myEmptyRoom").show();
		$(".myEmptyCart").css();
		$(".myEmptyWish").css();
	}, function(){
		$(".myEmptyRoom").css("display", "block");
	});

	$("li.mainLi").on('click',function(){
		$("ul.dropdown-inside").toggle();
	});

	$(".mycart").click(function(){
		$(".myEmptyCart").show();
		$(".myEmptyRoom").hide();
		$(".myEmptyWish").hide();
	}, function(){
		$(".myEmptyCart").css("display", "block");
	});

	$(".myWish").click(function(){
		$(".myEmptyWish").show();
		$(".myEmptyRoom").hide();
		$(".myEmptyCart").hide();
	}, function(){
		$(".myEmptyWish").css("display", "block");
	});

	$("span.rememberMe").click(
		function () {
			$("#rememberMe").attr('checked',true) 
		});



	// практически футер
	var top_show = 150; // В каком положении полосы прокрутки начинать показ кнопки "Наверх"
	  var delay = 1000; // Задержка прокрутки
	  $(document).ready(function() {
	    $(window).scroll(function () { // При прокрутке попадаем в эту функцию
	    	/* В зависимости от положения полосы прокрукти и значения top_show, скрываем или открываем кнопку "Наверх" */
	    	if ($(this).scrollTop() > top_show) $('#top').fadeIn();
	    	$('footer').css("height",435);
	    });
		// Скрываем этот блок
		$(".hide-this-block").click(function(){
			$("#hidden-block-about-works").fadeOut("slow");
			$('footer').css("height",350);
			$('.show-this-block').css("display", "block");
		});
				$(".show-this-block").click(function(){
			$("#hidden-block-about-works").fadeIn("slow");
			$('footer').css("height",435);
			$('.show-this-block').css("display", "none");
		});
	});  




	// Кнопка на верх
	var top_show = 500; // В каком положении полосы прокрутки начинать показ кнопки "Наверх"
	  var delay = 1000; // Задержка прокрутки
	  $(document).ready(function() {
	    $(window).scroll(function () { // При прокрутке попадаем в эту функцию
	    	/* В зависимости от положения полосы прокрукти и значения top_show, скрываем или открываем кнопку "Наверх" */
	    	if ($(this).scrollTop() > top_show) 
	    		{
	    			$('#back').css("display","block");
	    			$('#show').fadeIn();
	    		} else {
	    			$('#back').fadeOut();
	    		}
		    });

	    if ($(this).scrollTop() < top_show) $('#back').fadeOut();
	    $('#back').click(function () { // При клике по кнопке "Наверх" попадаем в эту функцию
	    	if ($(this).scrollTop() < top_show) $('#back').css("display","none");
	    	/* Плавная прокрутка наверх */
	    	$('body, html').animate({
	    		scrollTop: 0
	    	}, delay);
	    });
	});  
});



$(document).mouseup(function (e) {
	var container = $("ul.dropdown-inside");
	if (container.has(e.target).length === 0){
		container.hide("slow");
	}
});

$(document).mouseup(function (e) {
	var container = $(".myEmptyRoom");
	if (container.has(e.target).length === 0){
		container.hide("slow");
	}
});
$(document).mouseup(function (e) {
	var container = $(".myEmptyCart");
	if (container.has(e.target).length === 0){
		container.hide("slow");
	}
});
$(document).mouseup(function (e) {
	var container = $(".myEmptyWish");
	if (container.has(e.target).length === 0){
		container.hide("slow");
	}
});
  • Вопрос задан
  • 1661 просмотр
Решения вопроса 2
like-a-boss
@like-a-boss
Признайся,тебяТянетНаКодМужика,ты—программный гей
1. Прекратите писать транслитом.
2. Кешируйте элементы DOM в переменных.
3. Вы трижды(и это только в одном куске кода) выбираете один элемент и применяете к нему метод .css(). Это делается одним обращением. А ещё лучше давать ему заранее заготовленный класс, вместо .css() метода
4. Имена переменных пишете в camelCase
5. Переменные с объектом jQuery предваряйте $
Ответ написан
Комментировать
@dmitryKovalskiy
программист средней руки
Много $(document).ready ? Этому есть, как минимум, одно оправдание. Если страница формируется динамически из разных компонентов(view) и заранее неизвестно какие из них будут отображены. Хотя можно придумать механизм и в этом случае. Если у вас на одной view - 4 $(document)ready - это косяк, собирайте в одну. Всякие парные show/hide часто можно заменить на toggle/toggleClass. .hover если кроме проставления стилей не делает ничего - наверно тоже стоит вынести в css
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы