Лучшие практики Javascript - onclick против ненавязчивых - PullRequest
Новая
       17

Лучшие практики Javascript - onclick против ненавязчивых

0 голосов
/ 13 июля 2010

в нашем проекте в настоящее время у меня есть следующая проблема.Я должен привязать некоторые клики к списку элементов, блокирующих, как показано ниже: 

  <ul>
    <li class="listeelement" id="load-content-id-1"><div>listcontent</div></li>
    <li class="listeelement" id="load-content-id-2"><div>listcontent</div></li>
    <li class="listeelement" id="load-content-id-3"><div>listcontent</div></li>
    <li class="listeelement" id="load-content-id-4"><div>listcontent</div></li>
  </ul>

Клик на .listelement должен отправить запрос на конкретное действие с конкретными параметрами, такими как element-id и что-то в этом роде (-> модуль / действие? id = 1 & что-то = что-то).

Я хочу написать общий класс запроса, который отправляет запрос и обрабатывает все, что связано с кликом и запросом, и я неуверен, что это хороший способ привязать клик ненавязчиво к классу .listelement и сохранить информацию о действии и параметре где-нибудь в моей разметке ИЛИ если гораздо лучше связать щелчок с помощью onclick = "sendRequest (action, params)".

Мне кажется, что решение навязчивого щелчка гораздо проще, но я не уверен, что это тоже ХОРОШЕЕ решение.

Был бы рад, если бы кто-то мог высказать свое мнениетот.Благодаря.

Ответы [ 2 ]

1 голос
/ 13 июля 2010

Я бы предложил использовать приличную разметку и не полагаться на onclick атрибуты. Основная причина в том, что она сохраняет вашу разметку в чистоте, а также значительно уменьшает размер байта по проводу, если у вас много этих элементов.

Кроме того, я бы не стал кодировать значения в атрибуте id, поскольку теперь вы можете легально использовать атрибуты данных HTML5, а также они обратно совместимы. 

<ul id="container">
    <li class=".." data-action="login" data-id="1" data-params="a=b">..</li>
    <li class=".." data-action="logout" data-id="2" data-params="c=d">..</li>
    ...
</ul>

Когда у вас есть данные в разметке, довольно просто настроить обработчики щелчков и связать их с классом Request. 

var list = document.getElementById("container");
var items = list.getElementsByTagName("li");

for(var i = 0; i < items.length; i++) {
    items[i].onclick = (function(element) {
        return function() {
            var action = element.getAttribute('data-action');
            var id = element.getAttribute('data-id');
            var params = element.getAttribute('data-params');

            sendRequest(action, params);
        };
    })(items[i]);
}

Если у вас есть lot из <li> элементов, тогда делегирование событий может быть лучшим подходом вместо добавления одного обработчика для каждого элемента. Кроме того, рассмотрите возможность использования модели регистрации событий DOM для добавления обработчиков вместо свойства onclick, поскольку это ограничивает параметры максимум одним обработчиком.

0 голосов
/ 17 мая 2012

Вот вариант. Вместо этого сделайте ссылки li <a> и поместите контроллер / действие в виде строки запроса (или разделите пары ключ-значение разделителями, если ваш сервер может анализировать красивые URL-адреса). Предполагая, что вы делаете вызов AJAX, имейте некоторый простой javascript, который при загрузке страницы перехватывает событие click для всех <a> элементов с данным классом (вы можете выбрать что-то подходящее, например .ajax-link). В обработчике запретите действие по умолчанию, чтобы браузер не переходил к href, и извлеките href, проанализируйте его и настройте xhr с ним, и все - и все. Не уверен, используете ли вы такую ​​библиотеку, как jQuery, но это облегчит загрузку и код.

Если вам нужно, вы можете вложить <a> в существующий <li>.

Это может помочь: Внедрение параметров JQuery в привязку / клик по сравнению со встроенными обработчиками кликов с параметрами

...