ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Разделение html и js
25 сообщений из 26, страница 1 из 2
  1  все
Разделение html и js
    #38339802
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Всем привет.
Пытаюсь научиться отделять html от js. Привожу упрощенный пример:

Пусть есть web-страница, на которой выводится список товаров. В блоке каждого товара выводится также кнопка "Купить", при нажатии на которую данные отправляются в ajax-файл (какие действия в нем производятся - не суть важно). В этот файл в качестве параметра нужно отправить id товара. В скрипте (php) он естественно известен. Я всегда делал так: в цикле формируем блок с товаром (для каждого выбранного из БД товара вызываем нижеописанную функцию, которая генерит html):

Код: php
1.
2.
3.
4.
5.
6.
7.
function prod_block_html($product_id) {
  return ' 
  <div class="product_block">
    <img src="some_src" alt="Фото товара"><br>
    <a href="#" onclick="return js_func({\'product_id\': $product_id});">Купить</a>
  </div>'; 
}


А вот JS-функция, которая отправляет данные в ajax-файл:

Код: javascript
1.
2.
3.
4.
5.
function js_func(params)
{
  // Выводим что-нибудь в блок с корзиной. В html выше его нет.
  $('#cart_div').load('ajax_file', params, function() { /* some actions ... */ });
}


Что получается: небольшая сместь html и js. В функции вывода html присутствует onclick="...". Сейчас, смотрю, модно отделять html от js. Переписав вышеописанное, должно получиться что-то типа того:

Код: php
1.
2.
3.
4.
5.
6.
7.
8.
#Тут уже нету onClick()
function prod_block_html($product_id) {
  return ' 
  <div class="product_block">
    <img src="some_src" alt="Фото товара"><br>
    <a href="#">Купить</a>
  </div>'; 
}

Дальше в JS:
Код: javascript
1.
2.
3.
$('.product_block a').click(function) {
  // --- Как тут получить идентификатор товара?
}

Понятное дело, можно самому придумать решение данной задачи. Но мне хотелось бы понять, как делать правильно в таких случаях. Первое, что приходит в голову, это в каждом блоке с товаром вывести дополнительно скрытое поле, которое будет содержать идентификатор товара. Дальше в js получить массив объектов с классом product_block, пробежаться по ним в цикле,
получить для каждого свой идентификатор товара и сформировать функцию, которая будет передавать его куда нужно.

Но может есть какие-то другие и более правильные способы решения?
PS: а вообще, для чего это все нужно, это разделение? Это просто мода, или это чем-то объективно лучше? И как по скорости, никто не проверял? Просто если таких блоков с подобными js будет много, на клиенте может настать тупняк. Или я ошибаюсь?

Все заранее спасибо)
...
Рейтинг: 0 / 0
22.07.2013, 23:44
| Ответить | Цитировать | Написать  
Разделение html и js
    #38339904
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
urukhayНо может есть какие-то другие и более правильные способы решения?Использовать атрибут id или атрибут data-*.
...
Рейтинг: 0 / 0
23.07.2013, 08:37
| Ответить | Цитировать | Написать  
Разделение html и js
    #38339916
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Например:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
<!DOCTYPE HTML>
<html>  
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <style>
    ul.product-list {
      list-style: none outside none;
      overflow: hidden;
    }
    ul.product-list li {
      float: left;
      margin-right: 10px;
      width: 300px;
    }
  </style>
</head>  
<body>
  <ul class="product-list">
    <li data-product-id="77">
      <img alt="" src="http://www.gojoy.ru/media/product_pictures/300x230/77.jpg" height="231" width="300">
      <br/>
      <a href="javascript:jQuery.noop()">Купить</a>
    </li>
    <li data-product-id="67">
      <img alt="" src="http://www.gojoy.ru/media/product_pictures/300x230/67.jpg" height="231" width="300">
      <br/>
      <a href="javascript:jQuery.noop()">Купить</a>
    </li>
  </ul>
  <script>
    $('ul.product-list > li').each(function() {
      // Get the product ID.
      var productId = parseInt($(this).data('product-id'));
      
      // Adds the product to the shopping cart.
      $('a', this).click(function() { alert(productId); });
    });
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
23.07.2013, 08:56
| Ответить | Цитировать | Написать  
Разделение html и js
    #38339923
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayдолжно получиться что-то типа того:

Код: php
1.
2.
3.
4.
5.
6.
7.
8.
#Тут уже нету onClick()
function prod_block_html($product_id) {
  return ' 
  <div class="product_block">
    <img src="some_src" alt="Фото товара"><br>
    <a href="#">Купить</a>
  </div>'; 
}

Дальше в JS:
Код: javascript
1.
2.
3.
$('.product_block a').click(function) {
  // --- Как тут получить идентификатор товара?
}

Но может есть какие-то другие и более правильные способы решения?
Как уже предлагалось выше

Код: php
1.
2.
3.
4.
5.
6.
7.
function prod_block_html($product_id) {
  return ' 
  <div class="product_block">
    <img src="some_src" alt="Фото товара"><br>
    <a href="#" data-id="'+$product_id+'">Купить</a>
  </div>'; 
}


Код: javascript
1.
2.
3.
$('.product_block a').click(function) {
   alert($(this).data('id'));
}


urukhayЭто просто мода, или это чем-то объективно лучше?
Как вариант, меньше контента - меньше раздражений коже...

urukhayПросто если таких блоков с подобными js будет много, на клиенте может настать тупняк. Или я ошибаюсь?
Если блоков больше, да плюсом добавить контента (как в старом варианте) - будет только хуже.
При разделенном подходе скрипт грузится 1 раз, затем он в кеше. Если контент без скриптов - быстрее загрузка.
Т.ч. выигрыш вроде как на лицо даже в этом...

А далее все без разницы... Событие хоть "навешаное" скриптом, хоть "прописаное" в контенте, все равно отработает. По скорости все зависит только от алгоритма...
...
Рейтинг: 0 / 0
23.07.2013, 09:02
| Ответить | Цитировать | Написать  
Разделение html и js
    #38339941
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
skyANA
Код: javascript
1.
$('a', this).click(function() { alert(productId); });



У автора предполагается динамическая подгрузка контента, т.ч. ему больше подойдет
http://jquery-docs.ru/events/live/
...
Рейтинг: 0 / 0
23.07.2013, 09:19
| Ответить | Цитировать | Написать  
Разделение html и js
    #38339953
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
krvsa, динамически у него что-то в блок с корзиной подгружается, а не список товаров.

Метод .live() устарел, вместо него рекомендуется использовать .on() .
...
Рейтинг: 0 / 0
23.07.2013, 09:30
| Ответить | Цитировать | Написать  
Разделение html и js
    #38339989
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
skyANAМетод .live() устарел, вместо него рекомендуется использовать .on() .
Но суть-то у них одна...
...
Рейтинг: 0 / 0
23.07.2013, 10:01
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340005
monstrU
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
monstrU
Участник
urukhay,

для формирования динамического Html используй шаблонизатор типа EJS
...
Рейтинг: 0 / 0
23.07.2013, 10:11
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340295
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
автор$('.product_block a').click(function) {
alert($(this).data('id'));
}

Этот вариант мне подоходит. Но:
1. Что за атрибут data-id? Ранше таких вроде не было в стандарте. Это новый? Он пройдет валидацию на стандарт в3ц?
2. А если теперь усложнить пример. В первом случае мне нужен был только id товара. Пусть теперь мне нужно для каждого блока с товаром получить его id, а также id магазина, который продает этот товар и стоимость этого товара. Опять же, в скрипте это все известно, в php функцию я их передать могу.

автордля формирования динамического Html используй шаблонизатор типа EJS
Большинство шаблонизаторов работают на принципе замены. У меня - конкатенация. Она вразы быстрее замены. Это первый аргумент. А второй - не люблю я их, да и двиг мой весь на конкатенации :)
...
Рейтинг: 0 / 0
23.07.2013, 12:34
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340297
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
urukhay, сходите в гугл с запросом "атрибут data-*".
...
Рейтинг: 0 / 0
23.07.2013, 12:35
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340306
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Или лучше с таким запросом: "HTML 5 data- Attributes".
...
Рейтинг: 0 / 0
23.07.2013, 12:38
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340405
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhay1. Что за атрибут data-id? Ранше таких вроде не было в стандарте. Это новый? Он пройдет валидацию на стандарт в3ц?
На это уже ответили выше...

urukhay2. А если теперь усложнить пример. В первом случае мне нужен был только id товара. Пусть теперь мне нужно для каждого блока с товаром получить его id, а также id магазина, который продает этот товар и стоимость этого товара.
Делай еще больше атрибутов типа

Код: html
1.
data-<идентификатор>='<нужное_значение>'
...
Рейтинг: 0 / 0
23.07.2013, 13:19
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340444
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
skyANA,
Спасибо.

krvsa,
Т.е. как то так?
Код: html
1.
<a href="#" data-prod="'.$product_id.'" data-shop="'.$shop_id.'">Купить</a>


и т.д? А если их там 10 штук?)

В результате, убираем JS код из HTML, но увеличиваем объем HTML :)
...
Рейтинг: 0 / 0
23.07.2013, 13:38
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340457
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
urukhayВ результате, убираем JS код из HTML, но увеличиваем объем HTML :)JS убирают не для уменьшения объема, сказали же уже
...
Рейтинг: 0 / 0
23.07.2013, 13:45
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340463
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
urukhayТ.е. как то так?
Код: html
1.
<a href="#" data-prod="'.$product_id.'" data-shop="'.$shop_id.'">Купить</a>


и т.д? А если их там 10 штук?)

В результате, убираем JS код из HTML, но увеличиваем объем HTML :)Почитайте про MVC в JavaScript и выберите сами свой путь.
...
Рейтинг: 0 / 0
23.07.2013, 13:47
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340484
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayТ.е. как то так?
Код: html
1.
<a href="#" data-prod="'.$product_id.'" data-shop="'.$shop_id.'">Купить</a>


и т.д? А если их там 10 штук?)

В результате, убираем JS код из HTML, но увеличиваем объем HTML :)
Не обязательно...
Можно сделать как с параметрами

Код: javascript
1.
<a href="#" data-prm="1,12,sum,12000,delta,Вася,end">Купить</a>



А потом прочитаное преобразовать в массив параметров... 8-Q
...
Рейтинг: 0 / 0
23.07.2013, 13:57
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340491
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ПаганельJS убирают не для уменьшения объема, сказали же уже
Смотря как реализовывать...
В путевой реализации и объём может быть уменьшен...

Т.ч., urukhay , если придумаешь фигню - будет фигня. А если поднапрячся, проявить смекалку - будет путний код и контент...
...
Рейтинг: 0 / 0
23.07.2013, 14:00
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340521
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
krvsaПаганельJS убирают не для уменьшения объема, сказали же уже
Смотря как реализовывать... А какие есть варианты?
...
Рейтинг: 0 / 0
23.07.2013, 14:14
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340566
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
skyANAА какие есть варианты?
Я привел пример...

Но честно не совсем понимаю для какой надобности нужно действительно много параметров... Мне пока хватало что-то в районе 5 на один элемент...

Но я не отрицаю, что если начать "мутить" можно нагенерить и больше! Вопрос только - зачем мутить?
...
Рейтинг: 0 / 0
23.07.2013, 14:31
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340685
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
авторНо честно не совсем понимаю для какой надобности нужно действительно много параметров
Все зависит от задачи.

Ладно, спасибо всем за участие. Буду изучать)
...
Рейтинг: 0 / 0
23.07.2013, 15:20
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340799
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
urukhay, ещё почитайте про ООП в JavaScript:
Код: javascript
1.
2.
3.
function Product() {
  // 100500 свойств, а в HTML при этом только data-product-id
}
...
Рейтинг: 0 / 0
23.07.2013, 16:02
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340832
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
С ООП в JS знаком. Сам его использую, просто приводил упрощенный пример.
Кстати, раз уж зашел разговор на тему ООП: раньше в php классы сыроваты были и работали значительно медленнее процедурки. Как сейчас?

Правда двиг весь на процедурке, тяжело будет перекочевывать на ООП, если что :) Да и надобности в принципе пока не вижу. Задал вопрос из любопытства)
...
Рейтинг: 0 / 0
23.07.2013, 16:15
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340840
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
Может, в форуме по php рассказали бы больше про ооп в php...
...
Рейтинг: 0 / 0
23.07.2013, 16:20
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340876
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
urukhay, не знаю что там в PHP было раньше. Лично у меня к PHP5 + Kohana Framework претензий нет.
...
Рейтинг: 0 / 0
23.07.2013, 16:35
| Ответить | Цитировать | Написать  
Разделение html и js
    #38340949
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
авторurukhay, не знаю что там в PHP было раньше. Лично у меня к PHP5 + Kohana Framework претензий нет.Главное, чтобы претензий не было у пользователь, которые посещают ресурс с высокой нагрузкой ;)
...
Рейтинг: 0 / 0
23.07.2013, 17:07
| Ответить | Цитировать | Написать  
25 сообщений из 26, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Разделение html и js
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38340685&tid=1448083]:
 0ms
get settings:
 8ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 54ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 66ms
get tp. blocked users:
 1ms
others: 201ms
total:  366ms
созд. / загр.: 366ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]