Насколько это плохо — Встроенные вызовы js с определением внешних обработчиков ПРОТИВ полностью внешнего js

#javascript #inline-code

#javascript #встроенный код

Вопрос:

В моем проекте я сталкиваюсь со следующим кодом:

HTML:

 <input type="button" id="addmore" value="Add more" onclick="add_table(this)"/>
  

js:

 function add_table(elem){
    var current_id = jQuery("table.t1:last").attr("id");
  

Сначала я подумал, что этот код неправильный, и я должен переписать его во внешний код, т.Е.

 jQuery('#addmore)'.click(function add_table(elem){
    var current_id = jQuery("table.t1:last").attr("id");
  

Но затем я посмотрел на это снова и обнаружил, что этот html более удобочитаемый — я вижу, какие функции привязываются к каким элементам уже в html, и мне не нужно искать это в js.

Конечно, это не инкапсулировано внутри

 jQuery(document).ready( 
  

так что при некоторых обстоятельствах это не сработает

Итак, вопрос: насколько плох этот код?

Ответ №1:

Это вопрос повторного использования и личного вкуса. Встроенный код более удобочитаем для очень простых вещей, таких как ваш пример, но, конечно, вы полагаетесь на add_table() то, что он является глобальной функцией — если у вас есть сотни элементов с разными обработчиками щелчков, вы могли бы в конечном итоге получить сотни функций / переменных, загрязняющих глобальное пространство имен. И это плохо! 🙂

С точки зрения повторного использования, я считаю, что лучше кодировать в отдельных компонентах, которые абстрагируют функциональность и могут вызываться при необходимости — все в пределах определенного (неглобального) пространства имен.

 jQuery('#addmore)'.click(function add_table(elem) {
    var current_id = jQuery("table.t1:last").attr("id");
}
  

Приведенный выше код дает хорошее разделение проблем — это означает, что семантическая информация (HTML) не учитывает поведенческую информацию (Javascript), что опять же помогает создавать более чистый и управляемый код.

Ответ №2:

В зависимости от размера вашего сайта (и уровня трафика) может возникнуть проблема с пропускной способностью. т.е. onclick="add_table(this)" при загрузке добавляется 24 байта данных. Это может быть помещено на кэшированную страницу JavaScript, которая загружается только один раз, а не для каждого запроса. Если у вас много страниц с дополнительным кодом на них и у вас много трафика, это может привести к заметной разнице в пропускной способности.