Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Разделение html и js / 25 сообщений из 26, страница 1 из 2
  1  все
22.07.2013, 23:44
    #38339802
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разделение html и js
Всем привет.
Пытаюсь научиться отделять 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
| Ответить | Цитировать | Написать  
23.07.2013, 08:37
    #38339904
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разделение html и js
urukhayНо может есть какие-то другие и более правильные способы решения?Использовать атрибут id или атрибут data-*.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.07.2013, 08:56
    #38339916
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разделение html и js
Например:
Код: 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, 09:02
    #38339923
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разделение html и js
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:19
    #38339941
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разделение html и js
skyANA
Код: javascript
1.
$('a', this).click(function() { alert(productId); });



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

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

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

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

Код: html
1.
data-<идентификатор>='<нужное_значение>'
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.07.2013, 13:38
    #38340444
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разделение html и js
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:45
    #38340457
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разделение html и js
urukhayВ результате, убираем JS код из HTML, но увеличиваем объем HTML :)JS убирают не для уменьшения объема, сказали же уже
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.07.2013, 13:47
    #38340463
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разделение html и js
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:57
    #38340484
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разделение html и js
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, 14:00
    #38340491
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разделение html и js
ПаганельJS убирают не для уменьшения объема, сказали же уже
Смотря как реализовывать...
В путевой реализации и объём может быть уменьшен...

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

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

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

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

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


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