Написать чистый JQuery

Question

Рассмотрим этот HTML

<div id="container"> 
    <ul id="someID"> 
    <li id="someID1"> 
     <div id="someID2"> 
     <div class="someClass"> 
      <label>labelText</label>  
     </div> 
     </div> 
    </li> 
    <li>2</li> 
    <li>3</li> 
    </ul> 
</div> 

и его сценарий

<script> 
$(function(){ 
$("#container label").click(function(){ 
    $(this).text("labelTextChanged"); 
}); 
}) 
</script> 

Пусть этот код, написанный кем-то еще. И теперь я хочу изменить текст labelTextChanged на что-то новое, например labelTextChangedThen (Это просто пример, иногда мне нужно было бы изменить много функциональности). Но теперь трудно найти прилагаемое событие от DOM? Как я могу избежать таких проблем при написании кода в jQuery?

Хороший подход к использовать только атрибуты (самонастраиваемые атрибуты) для выбора элементов? (как в Angularjs)

NB: На самом деле это может быть лучше или хуже.

Answer 1

Существует много способов написания чистого кода. Я предпочитаю отделять методы обработчика (используя именованные функции) от кода обработки, использовать атрибуты данных для запроса и использования event delegation . для примера, код может быть переписан что-то вроде:

function changeLabelText(e){ 
    var self = $(this); 
    self.text(self.attr('data-changeOnClick')); 
} 

$(document).on('click', '[data-changeOnClick]', changeLabelText); 

Где <label> станет <label data-changeOnClick="[changed text]">

В этом случае изменение текста надписей позже будет таким же простым, как изменение атрибута data-changeOnClick в html. Кроме того, легко добавить атрибут к любому элементу вашего html, который все вызовет обработчик кликов.

Написание отдельных методов обработчика также показывает методы в вышеупомянутом букмаркере «визуальное событие 2».

Кроме того, я всегда загружаю свои сценарии в конце документа (прямо перед закрытием </body> -tag), чтобы избежать необходимости связать назначение метода в пределах $(function() {/*...*/}) или, как правило, использовать обработку загрузки документов.

Смотреть это jsFiddle

Answer 2

<script> 
$(function(){ 
$("#container").on("click","label",function(){ 
    $(this).text("your desired text"); 
}); 
}) 
</script> 

и я думаю, чтобы избежать этого tyoe кода используется visual event 2

Visual Event является открытым исходным кодом Javascript букмарклета, который обеспечивает отладочную информацию о событиях, которые были прикреплены к DOM элементам

ссылка on()

Answer 3

Вы всегда можете использовать букмарклет visual event 2, чтобы отобразить прослушиватели событий, прикрепленные к любому элементу DOM.

Answer 4

Для второго вопроса. На мой взгляд, использование атрибута Id для выбора dom является хорошим подходом. Поскольку для элементов на одном уровне они не должны применяться к одному и тому же идентификатору. И фильтр класса будет хорош для выбора группы элементов с тем же стилем. например, вы можете использовать $ ('div [id = "xxx"]'), чтобы сделать код значимым, что означает «div с id равно xxx». По первому вопросу, код непросто читать, вы можете попробовать что-то вроде этого $ ('# container'). найти ('.someClass "). Children (' label '). Click (...). Возможно, это еще непросто для чтения кода. Но для более сложного кода использование плагина поможет вам сделать проект более удобочитаемым и поддерживаемым.