Javascript.RU

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

прошу code review
задача: нужно по нажатии на кнопку разворачивать остальной кусок текста

<div class="showmore">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>


function showmore() {
	var string_divs = $$('.showmore')
			
	string_divs.length.times(function(n){
		var div = string_divs[n]
		text = div.textContent
		wordArr = $w(text);
		firstPart = wordArr.splice(0,30).join(' ')
		secondPart = wordArr.join(' ')
		console.log(firstPart)
		div.update(firstPart+
				' <span style="display:none;" id="more">'+secondPart+
				'</span><a id="link_more" href="" onclick="moretoggle();return false;">...show more</a>'+
				'<a id="link_hide" style="display:none;" href="" onclick="moretoggle();return false;">hide</a>')
	})
}

function moretoggle() {
	$('more').toggle()
	$('link_more').toggle()
	$('link_hide').toggle()
}

Event.observe(window, 'load', showmore)


вот код решает эту задачу, но мне кажется что можно красивее сделать, есть советы?
Ответить с цитированием
  #2 (permalink)  
Старый 18.07.2010, 01:04
Новичок на форуме
Отправить личное сообщение для mrslndr Посмотреть профиль Найти все сообщения от mrslndr
 
Регистрация: 18.07.2010
Сообщений: 2

Цикл times лучше заменить на each или на обычный for (работает быстрее).

Проставить везде ";" где нужно. Это хорошо для ИЕ и вобще хорошая практика, когда-нибудь спасет от неуловимых ошибок.

div.update лучше заменить на div.innerHTML = *; — prototype дает много лишней функциональности в этом методе, в вашем случае лучше обойтись без update, работать будет значительно быстрее. И строки лучше объединять через массив методом join.

Событие onclick лучше поставить на сам .showmore и отслеживать target. Чем меньше событий зарегистрировано в dom, тем лучше.

В итогде получится такой код:

document.observe('dom:loaded', function() {
	var items = $$('.showmore'), item, words, first, second;
	for (var i=0, len=items.length; i<len; i++) {
		item = items[0];
		// Тут ваш код, формирующий разбивку с сылками
		item.innerHTML = [firstPart, '...', second, '...', '...'].join('');
		item.observe('click', moretoggle);
	}
});

function moretoggle(e) {
	var element = Event.element(e);
	if (element.nodeName == 'A' && element.readAttribute('href') === '') {
		Event.stop(e);
		element.select('#more, #link_more, #link_hide').invoke('toggle');
	}
}
Ответить с цитированием
  #3 (permalink)  
Старый 18.07.2010, 01:07
Новичок на форуме
Отправить личное сообщение для mrslndr Посмотреть профиль Найти все сообщения от mrslndr
 
Регистрация: 18.07.2010
Сообщений: 2

забыл посмотреть дату поста и написал ответ на сообщение почти годовалой давности)
Ответить с цитированием
  #4 (permalink)  
Старый 29.07.2010, 17:21
Новичок на форуме
Отправить личное сообщение для retif Посмотреть профиль Найти все сообщения от retif
 
Регистрация: 25.10.2009
Сообщений: 2

ничего, с удовольствием почитал Ваши комментарии
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
прошу помощи у знающих скриптовый язык Feson Общие вопросы Javascript 2 14.10.2009 00:09
Прошу прощения за грубость N_L Оффтопик 7 07.10.2009 01:45
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Прошу помочь с проверкой формы ввода Гость Общие вопросы Javascript 2 08.03.2008 12:10