AngularJS - почему манипулирование DOM в контроллере - это плохо?

Общеизвестно, что манипуляции с DOM не должны выполняться в контроллере AngularJS, но очень сложно найти, почему именно это плохо. Все источники говорят, что его трудно проверить и потому, что контроллер должен использоваться для связи между директивами, но не иллюстрирует код, почему это плохо.

По моему мнению, я бы подумал, что контроллер, в отличие от директивы, не связан с каким-либо конкретным HTML, поэтому все контроллеры модификаций DOM будут очень неудачными. Это наверняка усложнит разработку и тестирование.

Контроллер в директивах, выполняемых до того, как функции ссылок дочерних директив также потерпят неудачу, так как контроллер может не знать о том, что представляет собой фактический HTML-указатель дочерних директив. Ссылка выполняется после функции контроллера и может изменять структуру HTML.

Надеюсь, у меня есть смысл здесь, и если кто-то может пояснить, почему манипулирование DOM с контроллером - это плохо, может быть, какая-то ссылка на код кода, которая объясняет это хорошо, что было бы здорово.

Ответ 1

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

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

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

Для более общего понимания того, почему шаблоны проектирования, подобные тем, которые вы указали, необходимы, вы можете обратиться к этому google search, который будет отправляйтесь в путешествие, пока вы готовы принять его. И для общего понимания того, почему шаблоны проектирования даже существуют и почему многие люди в конечном итоге предлагают одно и то же снова и снова, вы можете обратиться к одному из катализаторов к внедрению шаблонов проектирования, Кристофер Александр. Он показывает нам, что шаблоны - это то, что они есть, потому что они хорошо работают, и люди повторяют то, что хорошо работает.

Ответ 2

Если вы посмотрите на столь популярный вопрос "Мышление в AngularJS" если у меня есть фон jQuery?, вы получите некоторые подсказки.

Один из самых важных факторов, по которым я думаю, что манипуляция DOM не нужна и не выполняется, заключается в том, что Angular использует декларативный подход, когда дело доходит до привязки DOM, в сравнении с императивным подходом, который вы будете использовать при прямом манипулировании DOM. В некоторых ответах подробно объясняется это различие между декларативным и императивным подходом.

С jQuery вы указываете DOM, что должно произойти, шаг за шагом. С AngularJS вы описываете, какие результаты вы хотите, но не как это сделать. Подробнее об этом здесь. Кроме того, проверьте ответ Марка Райкока.

Более полное обращение к этой теме также доступно здесь В чем разница между декларативным и императивным программированием

При таком подходе реализация контроллера упрощается, и мы начинаем получать реальную ценность по мере роста размера базы кода и увеличения сложности.

Ответ 3

Моя перспектива немного отличается и охватывает больше, чем тестирование. Это способность дизайнера иметь контроль над макетом HTML, который в противном случае был бы захвачен, написав код внутри контроллера Angular. Рассмотрим следующий фрагмент (это просто простой пример)

<div ng-repeat="article in articles">
    <p class="article-body">{{article.text}}</p>
</div>

Этот пример просто выполняет итерацию по коллекции и печатает статью в отдельном теге абзаца. В то время как, конечно, возможно перебрать коллекцию в контроллере Angular и динамически генерировать теги абзацев с текстом внутри него. Это уловит дизайнерскую способность изменять внешний вид. Следовательно, если есть требование показать заголовок статьи, вместо этого

<div ng-repeat="article in articles">
    <span class="article-title">{{article.title}}</span>
    <p class="article-body">{{article.text}}</p>
</div>

разработчику теперь нужно будет найти Angular код контроллера, чтобы изменить манипуляции с DOM. Просто сравните два подхода и угадайте, какой из них обеспечит большую гибкость.