Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2018, 17:13
Новичок на форуме
Отправить личное сообщение для Eugeniy Посмотреть профиль Найти все сообщения от Eugeniy
 
Регистрация: 19.06.2018
Сообщений: 2

Оптимизация одного большого костыля.
Доброго времени суток форумчане!) Сразу говорю только недавно начал изучение и прошу помощи !. Это рабочий пагинатор с переключением. Вот хотелось бы что бы Господа по умнее подсказали где можно оптимизировать , как сделать по лучше.
P.S. чур не кидаться ссаными тряпками. я пишу тут не для обсуждения качества моего кода а для помощи его доработки и улучшения. спасибо за понимание.
//	пагинатор на комментарии
	
	var LengthMessageComments = jQuery('.vbMessageChildren').length;
	var ObjMessageComments = jQuery('.vbMessageChildren');
	var q;
	for (q = 0; q < LengthMessageComments; q++){
		
	var GetLength = jQuery(ObjMessageComments[q]).children('.vbMessage').length;
	if(GetLength > 3){
	var paginatorStep = Math.ceil(GetLength / 3);
	var ObjComment = jQuery(ObjMessageComments[q]).children('.vbMessage');
	var r;
	for (r = 0; r < GetLength; r++){
		jQuery(ObjComment[r]).attr('id', r);
		if(jQuery(ObjComment[r]).attr( "id") > 2){
			jQuery(ObjComment[r]).hide();
		}
		};
	var leftPg = "<img class='prew' src='путь к файлу'>"
	var rightPg = "<img class='next' src='путь к файлу'>"
	jQuery(ObjMessageComments[q]).append( leftPg + "<ul class='paginator'></ul>" + rightPg);
	var e;
	var id = 1;
	for(e = 0; e < paginatorStep; e++){
	jQuery(ObjMessageComments[q]).children('.paginator').append( "<li id="+ id +">"+ id +"</li>" );
	id++;
	}
	};		
	}
	
	//	Переключение пагинатора
	
	jQuery('.paginator').children('li').click(function(){
	  jQuery(this).parent().children('li').removeClass('here');
	  jQuery(this).addClass('here');
	  var Qnty = jQuery(this).attr( "id");
	  var ObjCheckId = jQuery(this).parents( ".vbMessageChildren" ).children('.vbMessage');
	  var LengthObjCheckId = jQuery(this).parents( ".vbMessageChildren" ).children('.vbMessage').length;
	  jQuery(this).parents( ".vbMessageChildren" ).children('.vbMessage').hide();
	  var OneQnty = Qnty * 3 - 1;
	  var SecQnty = Qnty * 3 - 2;
	  var ThsQnty = Qnty * 3 - 3;
	  var s;
	  for (s = 0; s < LengthObjCheckId; s++){
		  if(jQuery(ObjCheckId[s]).attr( "id") == OneQnty ||
			 jQuery(ObjCheckId[s]).attr( "id") == SecQnty ||
			 jQuery(ObjCheckId[s]).attr( "id") == ThsQnty){	ObjCheckId[s].show();  }
	  }
	});
	jQuery('.vbMessageChildren').children('.prew').click(function(){
	var getId = jQuery(this).next().children('.here').attr( "id");
	if(getId != 1){
	  jQuery(this).next().children('.here').removeClass('here').prev().addClass('here');
	  var Qnty = getId - 1;
	  var ObjCheckId = jQuery(this).parents( ".vbMessageChildren" ).children('.vbMessage');
	  var LengthObjCheckId = jQuery(this).parents( ".vbMessageChildren" ).children('.vbMessage').length;
	  jQuery(this).parents( ".vbMessageChildren" ).children('.vbMessage').hide();
	  var OneQnty = Qnty * 3 - 1;
	  var SecQnty = Qnty * 3 - 2;
	  var ThsQnty = Qnty * 3 - 3;
	  var s;
	  for (s = 0; s < LengthObjCheckId; s++){
		  if(jQuery(ObjCheckId[s]).attr( "id") == OneQnty ||
			 jQuery(ObjCheckId[s]).attr( "id") == SecQnty ||
			 jQuery(ObjCheckId[s]).attr( "id") == ThsQnty){	ObjCheckId[s].show();  }
	  }
	}
	});
	jQuery('.vbMessageChildren').children('.next').click(function(){
	var getId = jQuery(this).prev().children('.here').attr( "id");
	var LastId = jQuery(this).prev().children('li:last-child').attr( "id");
	if(getId != LastId){
	  jQuery(this).prev().children('.here').removeClass('here').next().addClass('here');
	  getId++;
	  var Qnty = getId;
	  console.log(Qnty);
	  var ObjCheckId = jQuery(this).parents( ".vbMessageChildren" ).children('.vbMessage');
	  var LengthObjCheckId = jQuery(this).parents( ".vbMessageChildren" ).children('.vbMessage').length;
	  jQuery(this).parents( ".vbMessageChildren" ).children('.vbMessage').hide();
	  var OneQnty = Qnty * 3 - 1;
	  var SecQnty = Qnty * 3 - 2;
	  var ThsQnty = Qnty * 3 - 3;
	  var s;
	  for (s = 0; s < LengthObjCheckId; s++){
		  if(jQuery(ObjCheckId[s]).attr( "id") == OneQnty ||
			 jQuery(ObjCheckId[s]).attr( "id") == SecQnty ||
			 jQuery(ObjCheckId[s]).attr( "id") == ThsQnty){	ObjCheckId[s].show();  }
	  }
	}
	});
		
	var LngInptHere = jQuery('.paginator').length;
	var InptHere = jQuery('.paginator');
	var t;
	for(t = 0;t < LngInptHere; t++){
		jQuery(InptHere[t]).children('li:first').addClass('here')
	}
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2018, 08:07
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Для начала выполнить базовые вещи:

1. Форматирование: с нормальными отступами http://jsbeautifier.org/
2. Переменные: с маленькой буквы, jquery c приставкой $.
3. HTML: c двойными кавычками.
4. jQuery: с минимумом поисковых запросов.

Например, строки 1-30:
var $messageComments = $('.vbMessageChildren');
$messageComments.each(function(index, element) {
    var $messageComment = $(element);
    var $comments = $messageComment.children('.vbMessage');
    if ($comments.length > 3) {
        $comments.each(function(index, element) {
            var $comment = $(element);
            $comment.attr('id', index);
            if (index > 2) $comment.hide();
        });
        var step = Math.ceil($comments.length / 3);
        var html = '<img class="prew" src="путь к файлу"><ul class="paginator">';
        for (var id = 1; id <= step; id++) html += '<li id="' + id + '">' + id + '</li>';
        html += '</ul><img class="next" src="путь к файлу">';
        $messageComment.append(html);
    }
});

Теперь можно подумать что здесь не так...

Последний раз редактировалось Rise, 20.06.2018 в 09:45.
Ответить с цитированием
  #3 (permalink)  
Старый 20.06.2018, 09:27
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Я бы еще и избавился по возможности от написания кода в блоке if, это, по-моему, улучшает его чтение.
var $messageComments = $('.vbMessageChildren');
$messageComments.each(function(index, element) {
    var $messageComment = $(element);
    var $comments = $messageComment.children('.vbMessage');
    if ($comments.length <= 3)
        return;


    $comments.each(function(index, element) {
        var $comment = $(element);
        $comment.attr('id', index);
        if (index > 2)
            $comment.hide();
    });
    var step = Math.ceil($comments.length / 3);
    var html = '<img class="prew" src="путь к файлу"><ul class="paginator">';
    for (var id = 1; id <= step; id++)
        html += '<li id="' + id + '">' + id + '</li>';

    html += '</ul><img class="next" src="путь к файлу">';
    $messageComment.append(html);
});


PS. у Rise в строке 11 используется переменная $comment, вероятно опечатка и должно быть $comments. +не понял, почему значение переменной step не было округлено до большего.
Ответить с цитированием
  #4 (permalink)  
Старый 20.06.2018, 09:47
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Nexus,
да, перепутал большее с меньшим)
Ответить с цитированием
  #5 (permalink)  
Старый 20.06.2018, 23:42
Новичок на форуме
Отправить личное сообщение для Eugeniy Посмотреть профиль Найти все сообщения от Eugeniy
 
Регистрация: 19.06.2018
Сообщений: 2

Благодарю за ответы)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
передача большого количества переменных из PHP в JS dasser Элементы интерфейса 51 29.03.2017 15:49
как с помощью javascript взять данные из одного файла html и закинуть в другой? rusik Общие вопросы Javascript 10 08.08.2016 12:11
Оптимизация большого приложения danik.js Общие вопросы Javascript 9 03.07.2012 19:30
fade маленького div внутри большого div kenwo0d jQuery 17 19.05.2012 16:27
Как изменить свойство css у всех элементов одного класса AlexJ Events/DOM/Window 7 19.03.2011 06:25