Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.03.2013, 23:10
Кандидат Javascript-наук
Отправить личное сообщение для MininAS Посмотреть профиль Найти все сообщения от MininAS
 
Регистрация: 22.09.2009
Сообщений: 122

Как будет правильнее, два варинта обработки массива.
Здравствуйте!
Допустим имеем массив: поле в всем знакомой игре Сапер.
Данное поле состоит из элементов <img />. Необходимо, что бы при нажатии на пустую клетку - клетки стоящие рядом то же открывались если они пустые.
Вопрос: Как правильнее и где быстрее будет работать браузер
1. Представить массив игрового поля, в виде двумерного массива
for (x=0; x<=XxX; x++)
	{
		for (y=0; y<=YyY; y++)
		{
			var myElem = document.createElement('img');
			document.getElementById('game').appendChild(myElem);
			myElem.src = '......';
			myElem.onclick = f_keyPress;
			a_block[x][y] = myElem;
		}
	}

с таким соответственно легче работать и проще проверить, что бы при проверке не вылететь за края поля и не проверить несуществующего элемента.
2. Или одномерного
for (i=1; i<=(XxX * YyY); i++)
	{
		var myElem = document.createElement('img');
		document.getElementById('game').appendChild(myElem);
		myElem.src = '......';
		myElem.onclick = f_keyPress;
	}
	myElem = document.getElementById('game')
	a_block = myElem.getElementsByTagName('img');

Здесь что бы не мудрить с расчетами по проверке не выходит ли элемент за приделы поля я применил проверку на существование данного объекта:
if (typeof a_block[i-XxX-1] == 'object') {.......}
Ответить с цитированием
  #2 (permalink)  
Старый 15.03.2013, 08:21
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Думаю второй вариант быстрее, но первый удобнее.
Но это все экономия на спичках. Тормоза если и появятся, то не от таких мелочей, а от более грубых недочетов.
Ответить с цитированием
  #3 (permalink)  
Старый 15.03.2013, 22:12
Кандидат Javascript-наук
Отправить личное сообщение для MininAS Посмотреть профиль Найти все сообщения от MininAS
 
Регистрация: 22.09.2009
Сообщений: 122

Я так же думаю, просто бывали случаи с CSS или например построение HTML по поводу в таблицах или в блоках....
Вообщем вопрос как правильнее с точки зрения программного кода.
Ответить с цитированием
  #4 (permalink)  
Старый 15.03.2013, 22:41
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Оба варианта полное Г. Никогда не суйте в DOM, элементы в цикле. Сначала нужно подготовить данные, а уж потом выставлять их в DOM.

var container = document.createDocumentFragment();
for(var i = 0; i < XxX; i++) {
    var img = container.appendChild(document.createElement('img');
    img.src = '....';
    img.onclick = f_keyPress;
}
document.getElementById('game').appendChild(container);
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #5 (permalink)  
Старый 15.03.2013, 22:48
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Да и вобще, тут канвас нужен а не гора картинок. И если уж и на DOM делать, то почему картинки? Тут же налицо таблица.
Эффективней обработчик навешать на контейнер (делегировать обрабоку события)
Ответить с цитированием
  #6 (permalink)  
Старый 16.03.2013, 22:15
Кандидат Javascript-наук
Отправить личное сообщение для MininAS Посмотреть профиль Найти все сообщения от MininAS
 
Регистрация: 22.09.2009
Сообщений: 122

Сообщение от devote Посмотреть сообщение
Оба варианта полное Г. Никогда не суйте в DOM, элементы в цикле. Сначала нужно подготовить данные, а уж потом выставлять их в DOM.
Хорошо буду делать так, раннее такого метода не знал. Соображаю, что данный код будет работать быстрее.
1. А, это общепринятое правило?
2. С какой версии JS работает метод по созданию целого куска кода?

Последний раз редактировалось MininAS, 18.03.2013 в 23:26. Причина: Снял один вопрос
Ответить с цитированием
  #7 (permalink)  
Старый 16.03.2013, 22:22
Кандидат Javascript-наук
Отправить личное сообщение для MininAS Посмотреть профиль Найти все сообщения от MininAS
 
Регистрация: 22.09.2009
Сообщений: 122

Сообщение от danik.js Посмотреть сообщение
Да и вобще, тут канвас нужен а не гора картинок. И если уж и на DOM делать, то почему картинки? Тут же налицо таблица.
Эффективней обработчик навешать на контейнер (делегировать обработку события)
1. С канвас еще не пробовал работать.
2. С таблицей получится слишком грамостко и как без картинок если же все что мы видим на экране это и есть картинки??
3. А обработчик будет обрабатывать каждый элемент отдельно если его повесить на контейнер?

Последний раз редактировалось MininAS, 16.03.2013 в 22:26.
Ответить с цитированием
  #8 (permalink)  
Старый 17.03.2013, 07:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от MininAS
С таблицей получится слишком грамостко
Да ладно. Дополнительный контейнер <tbody> + элементы <tr> на каждую строку.Хотя может таблица - и не лучший вариант.
Сообщение от MininAS
все что мы видим на экране это и есть картинки
Откройте для себя css.
Сообщение от MininAS
3. А обработчик будет обрабатывать каждый элемент отдельно если его повесить на контейнер?
В свойстве event.target будет ссылка на объект, на котором возникло событие.
Ответить с цитированием
  #9 (permalink)  
Старый 18.03.2013, 08:59
Аватар для rgl
rgl rgl вне форума
Профессор
Отправить личное сообщение для rgl Посмотреть профиль Найти все сообщения от rgl
 
Регистрация: 28.02.2011
Сообщений: 322

Сообщение от MininAS Посмотреть сообщение
2. С какой версии JS работает метод по созданию целого куска кода?
Попробовал, в IE6 работает.
Ответить с цитированием
  #10 (permalink)  
Старый 18.03.2013, 23:30
Кандидат Javascript-наук
Отправить личное сообщение для MininAS Посмотреть профиль Найти все сообщения от MininAS
 
Регистрация: 22.09.2009
Сообщений: 122

Сообщение от danik.js Посмотреть сообщение
Да ладно. Дополнительный контейнер <tbody> + элементы <tr> на каждую строку.Хотя может таблица - и не лучший вариант.
Откройте для себя css.
Не могу понять ваше намерение применения таблицы, поясните подробнее.
CSS открыл как три года назад.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать два события на одно нажатие кнопки mixt Events/DOM/Window 11 30.09.2017 21:44
Как сделать селект из массива Axios Элементы интерфейса 6 15.01.2013 00:47
Как постваить в ряд два div с overflow:hidden? zebra741258963 (X)HTML/CSS 2 10.04.2012 14:08
Подскажите как будет правильнее? kuzroman AJAX и COMET 1 10.12.2010 13:42
Как будет правильнее и быстрее? Glook jQuery 9 12.11.2010 01:51