Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 30.07.2010, 16:37
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от Маэстро
Реальный пример я показать не могу
да при чем тут этот сайт? Просто делаете скриншот с описанием, из каких элементов это будет состоять (если не очевидно). Причем чтобы это было похоже на что-то реальное, а не таблица 100x100. Нужно динамически сгенерировать верстку. Вы и я делаем два варианта и сравниваем производительность
Ответить с цитированием
  #22 (permalink)  
Старый 30.07.2010, 18:40
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от x-yuri Посмотреть сообщение
да при чем тут этот сайт? Просто делаете скриншот с описанием, из каких элементов это будет состоять (если не очевидно). Причем чтобы это было похоже на что-то реальное, а не таблица 100x100. Нужно динамически сгенерировать верстку. Вы и я делаем два варианта и сравниваем производительность
Хорошо. Попробую описать. Только навряд ли Вы захотите это сделать из спортивного интереса.
Понимаете, у меня как бы в принципе нет HTML-вёрстки в привычном понимании этого слова при разработке сайта.
Все объекты хранятся в базе. Предположим их два типа: автомобили и контейнеры (морские). Каждый объект обладает набором свойств. Часть свойств одинакова (например, координаты и название), а часть свойств разные. Причём те свойства, которые разные - это не свойства DOM-объектов, а бизнес-свойства. Например, у машины есть марка и кубометраж. У контейнера есть тоннаж и условия инкотермс (FOB, CIF, DDP,...) которых нет у автомобиля. Все бизнес-свойства должны в конечном итоге отображаться на экране в виде картинок, текстов, таблиц, полей ввода.... То есть, каждый объект на экране - это комплект из table, div, img и т.д.
Свойства объектов не верстаются (как на типичных сайтах), а добавляются самими пользователями, для чего имеется набор "стандартных" заготовок.

Как это реализовать?
Вариант первый:
формировать весь html-текст на сервере (например, PHP) и отправлять клиенту. Объем получится не менее 1 Мегабайта. Все объекты прийдётся снабдить уникальными id, для дальнейшего оперирования ими.

Вариант второй:
Формировать DOM-объекты всего этого пространства с помощью javascript на клиенте; клиенту отправлять только массив чисто данных (любым транспортным механизмом).

В заключение добавлю, что все объекты отображаются на некой "карте местности", размер которой 30000х30000 пикселей. И не думайте, что я ошибся в ноликах
Ответить с цитированием
  #23 (permalink)  
Старый 01.08.2010, 23:48
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

ну так это же совсем другой случай, в отличие от указанного в первом сообщении топика. Есть три вида компонентов: карта, автомобили, контейнеры. У каждого минимум разметки, судя по описанию, т.е. по сути каждый из них - это один абсолютно-спозиционированный div. Причем карта просто содержит коллекцию автомобилей/контейнеров, т.е. нету никакого сложного шаблона, по которому автомобили/контейнеры включаются в карту. Создавать разметку каждого компонента проще создавать с помощью createElement, потому что каждый элемент - это один div

в общем, чем сложнее шаблон, тем лучше подходит innerHTML

p.s. мы собирались сравнивать innerHTML vs createElement/appendChild...
Ответить с цитированием
  #24 (permalink)  
Старый 02.08.2010, 16:36
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от x-yuri Посмотреть сообщение
... т.е. нету никакого сложного шаблона, по которому автомобили/контейнеры включаются в карту.
ну да

Сообщение от x-yuri Посмотреть сообщение
Создавать разметку каждого компонента проще создавать с помощью createElement, потому что каждый элемент - это один div
так а я о чём говорю? именно о том, что лучше createElement, а не innerHTML.
подчеркну только, что что каждый элемент - это не один div, а один div, содержащий в себе ещё кучу div_ов и других элементов.

а главное, я утверждал, что при использовании innerHTML приходится снабжать элементы идентификаторами, а потом обращаться к ним с помощью GetElementByID(). и при их большом количестве начинается торможение
Ответить с цитированием
  #25 (permalink)  
Старый 02.08.2010, 17:18
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от Маэстро
так а я о чём говорю? именно о том, что лучше createElement, а не innerHTML
а я говорю, что чем сложнее шаблон, тем лучше подходит innerHTML

Сообщение от Маэстро
подчеркну только, что что каждый элемент - это не один div, а один div, содержащий в себе ещё кучу div_ов и других элементов
если там еще куча div'ов и других элементов и вы говорите, что с innerHTML медленнее, давайте картинку с описанием, сравним производительность генерации разметки

Сообщение от Маэстро
а главное, я утверждал, что при использовании innerHTML приходится снабжать элементы идентификаторами, а потом обращаться к ним с помощью GetElementByID(). и при их большом количестве начинается торможение
не обязательно снабжать их id

Последний раз редактировалось x-yuri, 02.08.2010 в 17:22.
Ответить с цитированием
  #26 (permalink)  
Старый 02.08.2010, 17:34
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

по вашему опсанию получается где-то так
var Map = new Class({
    initialize: function(){
        this._objs = [];
        this._el = new Element('div');
    },

    addObject: function( o ){
        this._objs.push( o )
        o.inject(this._el);
    }
});

var Car = new Class({
    initialize: function(){
        this._el = new Element('div');
    }
});

var map = new Map();
var car = new Car();
map.addObject(car);

если же там не просто div, то
this._el = new Element('div')

превращается в что-то типа
this._el = template(
    '<table>'+
        '<tr><td>Имя:</td>'+
            '<td><input type="text" name="name" id="name" /></td>'+
        '</tr>'+
        '<tr><td>Тема: </td>'+
            '<td><input type="text" name="subject" id="subj" /></td>'+
        '</tr>'+
        '<tr><td><textarea wrap="virtual" name="message" id="quickreplytxt" cols="60" rows="10"></textarea></td></tr>'+
        '<tr><td></td>'+
            '<td><input type="submit" value="Отправить" /></td>'+
        '</tr>'+
    '</table>');
Ответить с цитированием
  #27 (permalink)  
Старый 02.08.2010, 18:10
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от x-yuri Посмотреть сообщение
не обязательно снабжать их id
Вы это написали, а потом в своём примере все три поля input снабдили id!
(id="name", name="subject", id="quickreplytxt")
Зачем id? -затем, чтобы взять значение переменной, или прописать его туда.

теперь насчёт "this._el = ..."
Когда вся эта "Карта полётов" уже создана (а так её называет Заказчик), то все ссылки "this" уже забыты. И вот наступает момент, когда поступает информация, что груз номер 5 едет в автомобилях 7,8 и 15 (к примеру). Как обратиться к элементам 7,8 и 15? Очевидно, что либо снабдить их id_шками типа id=object_7, id=object_8, id=object_15. Либо, ещё при создании запомнить все созданные this._el в отдельном массиве например, map[...] (можно в объекте map{} ) и тогда при поиске элементов делать не
o=document.getElementById('object_7')
a
o=map[7]; - вот это я и называл прямым доступом к объектам.
Ответить с цитированием
  #28 (permalink)  
Старый 02.08.2010, 18:29
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от Маэстро
Вы это написали, а потом в своём примере все три поля input снабдили id!
это был копипаст из поста ТС

Сообщение от Маэстро
теперь насчёт "this._el = ..."
использование innerHTML не означает использование getElementById, и вполне совместимо с хранением ссылок на нужные DOM-объекты в javascript-объектах
Ответить с цитированием
  #29 (permalink)  
Старый 02.08.2010, 18:34
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

продолжая пример (если нужно обращаться к textarea)
var Car = new Class({ 
    initialize: function(){ 
        this._el = template( 
            '<table>'+ 
                '<tr><td>Имя:</td>'+ 
                    '<td><input type="text" name="name" id="name" /></td>'+ 
                '</tr>'+ 
                '<tr><td>Тема: </td>'+ 
                    '<td><input type="text" name="subject" id="subj" /></td>'+ 
                '</tr>'+ 
                '<tr><td><textarea wrap="virtual" name="message" id="quickreplytxt" cols="60" rows="10"></textarea></td></tr>'+ 
                '<tr><td></td>'+ 
                    '<td><input type="submit" value="Отправить" /></td>'+ 
                '</tr>'+ 
            '</table>');
    },

    _textarea: function(){
        if( ! this._textareaEl )
            this._textareaEl = this._el.getElement('textarea');
        return this._textareaEl;
    }
});
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое создание таблицы Arfey Общие вопросы Javascript 7 10.06.2010 13:14
Динамическое создание Iframe Арсений Элементы интерфейса 12 19.05.2010 14:03
Динамическое создание событий в цикле IcyBox Общие вопросы Javascript 2 01.06.2009 07:42
IE: создание элементов. Jurasmi Events/DOM/Window 12 28.11.2008 01:10
Создание элементов createElement в IE. Phoenix Общие вопросы Javascript 6 26.09.2007 18:43