Каковы наилучшие методы разделения проблем при создании HTML с помощью JavaScript?
В настоящее время я изучаю jQuery, читая jQuery in Action.
В книге обсуждается разделение задач с помощью «ненавязчивого JavaScript». Я считаю, что сохранение поведения, указанного в JavaScript, вне дерева > является хорошей формой и имеет большое значение для удобства сопровождения.
Однако преимущества использования этого подхода, похоже, сводятся на нет при рассмотрении динамической генерации HTML с помощью jQuery, например, в этом примере:
$('<img>',
{
src: 'images/little.bear.png',
alt: 'Little Bear',
title:'I woof in your general direction',
click: function(){
alert($(this).attr('title'));
}
})
.css({
cursor: 'pointer',
border: '1px solid black',
padding: '12px 12px 20px 12px',
backgroundColor: 'white'
})
.appendTo('body');
- из jQuery in Action, 2nd Edition
Здесь мы смешиваем структуру ( новый элемент ), стиль (с вызовом css ()) и поведение (путем установки значения атрибута click). Таким образом, у нас больше нет разделения проблем, даже если этот блок помещается в
документа.
Я правильно понимаю? Каковы лучшие практики для смягчения этого? Распространено ли на практике обращение к внешним ресурсам .css и .js при создании этого типа HTML?