2013-10-27 5 views
15

Возможно, это нехорошее место, чтобы спросить об этом, но я постараюсь сделать его максимально объективным и ответственным.Угловая и семантическая разметка/разделение проблем

Я играю с Angular.js и очень люблю его, но у меня есть вопрос о его философии. Вот фрагмент кода с сайта Angular для контроллера.

<div ng-controller="TodoCtrl"> 
     <span>{{remaining()}} of {{todos.length}} remaining</span> 
     [ <a href="" ng-click="archive()">archive</a> ] 
     <ul class="unstyled"> 
     <li ng-repeat="todo in todos"> 
      <input type="checkbox" ng-model="todo.done"> 
      <span class="done-{{todo.done}}">{{todo.text}}</span> 
     </li> 
     </ul> 
     <form ng-submit="addTodo()"> 
     <input type="text" ng-model="todoText" size="30" 
       placeholder="add new todo here"> 
     <input class="btn-primary" type="submit" value="add"> 
     </form> 
    </div> 

Это в основном HTML с угловыми директивами посыпают в один, что я считаю потенциально susupect это:. <a href="" ng-click="archive()">archive</a>.

Когда Джеффри Зельдман написал Designing With Web Standards, стало лучшей практикой отделить разметку (HTML), презентацию (CSS) и взаимодействие (JS) в разные файлы для удобства обслуживания.

Вопрос в том, как Угловая не нарушает это? Я действительно наслаждаюсь этим и считаю его достаточно мощным, но в чем разница между привязкой события click к элементу , подобным этому в разметке, и написанием этого перечня кода, предшествующего веб-стандартам:

<a href='#' onClick='showAlert()'>Click here</a> 

<script> 
    var showAlert = function(){ 
     alert('hey'); 
    } 
</script> 

Полезные ответы могут касаться документации в дополнение к личному опыту использования фреймворка.

+1

Сначала подумал, что нужно создать приложение для сохранения одной страницы с использованием jQuery и семантической разметки и сравнить количество кода, времени и головных болей в том же приложении, написанном с угловым ... тестированием? Гораздо проще в угловом .... количество кода и фрагментации кода - гораздо меньше в угловом. Модульность и простота обслуживания или улучшения ... намного проще в угловом. Сделка стоит того, чтобы сочетать опасения. IMO – charlietfl

+2

. Правильно, это не подходящее место для этого вопроса. Это больше похоже на концептуальный вопрос, и это относится к http://programmers.stackexchange.com/ – qodeninja

ответ

9

Начну с фрагмента кода, в котором вы находите подозреваемого, и принципиальное различие между его обработкой в ​​AngularJS по сравнению с обычным HTML и Javascript.

Это в основном HTML с угловыми директивами посыпают в один , что я считаю потенциально susupect это:. <a href="" ng-click="archive()">archive</a>.

Это выглядит очень похоже на то, что мы бы писали 10 лет назад:

<a href="" onclick="archive()">archive</a> 

Однако существует фундаментальное различие между выше HTML и реализации AngularJS. Для AngularJS функция archive находится в области, которую мы контролируем и можем манипулировать с помощью контроллеров. Необработанный пример JS требует, чтобы archive находилось в глобальном пространстве имен (что плохо по многим причинам).

Но мы все еще можем видеть, что означало обязательство события onclick; это означало, что можно было декларативно построить поведение в представлении и позволить JS обрабатывать детали реализации. AngularJS делает это, И предоставляет способ организации разностных областей/контекстов нашего представления таким образом, который невозможен с помощью обычного HTML.

Да, AngularJS включает расширение HTML, перемещая больше представления и привязки к виду. Хорошей новостью является то, что мы движемся с HTML6. Вот некоторые цитаты из выберите http://html6spec.com/:

Представьте, что вы можете пометить что-то, как вы хотите, чтобы отметить его вверх. Представьте себе изменение <div id="wrapper"> до <wrapper> ...

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

В некотором смысле, AngularJS приносит нам всю доброту HTML6, но позволяет нам использовать его сегодня. То, как используется сеть, резко изменилось за последние 15 лет, и наши инструменты все еще сильно отстают. К счастью для нас, будущее - маяк света и надежды, а AngularJS возвращает будущее к настоящему.

+0

. Этот ответ является информативным и поэтическим. – nickcoxdotme

+3

Обратите внимание, что http://html6spec.com/ не следует воспринимать как точное указание на то, что будет HTML6. Это именно то, кем бы это ни хотелось. Автор не предвидит, что он становится официальной спецификацией. –

+0

'archive' абсолютно бессмысленный. Встроенный Javascript, действительно? Кто когда-нибудь думал, что это хорошая идея? Разделение проблем не волшебным образом исчезает на интерфейсе только из-за атрибута data- *. – qodeninja

1

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

Дизайнер изменил разметку в соответствии с визуальными требованиями, в то время как мы просто сказали ему не вмешиваться в атрибуты привязки данных. Конечно, иногда он менял разметку настолько сильно, что нам нужно было изменять атрибуты привязки данных, но это в основном означало перемещение их из одного тега в другой, реализация не изменялась.

3

Довольно интересное наблюдение и вопрос, и хороший ответ от @mortalapeman.

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

С Угловой задачей html является не просто документ, он должен быть слоем презентации приложения, для меня это гораздо более значительная работа. И заполнить это задание Угловая (и аналогичные рамки) позволяет нам делать двустороннюю привязку с нашими данными и поведением декларативным способом, в то время как, как указывает смертный человек, сохраняя наши данные и поведение, хорошо разделенные и разделенные, а также проверяемые.

Фактически, теперь, когда я думаю об этом, на самом деле немного глупо поддерживать позицию, согласно которой ваш html должен быть чистым документом, но в то же время содержать кнопки и другие элементы управления, указывая, что это больше, чем документ. Может быть, это только я, но я нахожу это парадоксальным. Мне совершенно понятно, что мы объявляем, какое действие должно быть инициировано при управлении элементом управления.

3

Я изучал Угловые недавно и имел те же самые мысли, разве это не нарушает разделение проблем? Примеры, которые они приводят на своем сайте: «Не нарушайте разделение проблем!» После участия в MVVM и MVC за последние 10 лет я думаю, что Angular - это шаг назад к дням Cold Fusion. Не то, чтобы Cold Fusion и Angular не были сильными, они просто способствуют плохому дизайну.

Все исследования SDLC показывают, что 50-60% общей стоимости программного обеспечения находится в обслуживании, а не в разработке! Но большинство разработчиков думают (из-за сроков), они просто должны получить его там, и, к их чести, они делают! Тем не менее, проекты заканчиваются, разработчики оставляют, а остальным остается задаться вопросом, как поддержать эту базу кода.

Мы знаем о OOP и OOD уже много лет и недавно видели попытки включить Javascript в эту проблему с расширениями, такими как JQuery. Хотя до тех пор, пока Javascript не станет языком OOD, он и все его расширения не подойдут. Комментарий выше «gloabal variables are bad» - хороший комментарий, но на сильно типизированных языках он НИКОГДА не беспокоится.Единственный раз, когда эти типы проблем возникают, когда фреймворк поддерживает его из коробки! Сильно типизированные языки могут иметь глобальные вары, если это необходимо, но на этих языках есть король, и это одна из первых вещей.

Мой опыт на протяжении многих лет заключается в том, что программисты первыми 1) Быстро выполняют работу, прежде чем распознают образцы, которые составляют хорошую технику. 2) В каждом крупном учреждении есть тонны кода, требующие серьезного повторного факторинга. 3) Проблемы с расширяемым не видны до тех пор, пока много лет спустя 4) Усилия по реинжинированию огромны! Все это хорошая новость для обеспечения безопасности работы, но в то же время почему бы просто не делать это правильно с самого начала?

JQuery, Javascript и даже Angular имеют свое место, но они также являются фреймворками, которые поощряют плохой дизайн для тех, кто не знает. Я нашел самый важный шаблон во всем программировании - это «шаблон наблюдателя», который мы видим в возможности создания обработчиков событий и создания событий. Затем развязка становится очень высокой в ​​списке. Если у вас есть код, который большой по событиям и возможностям обработки событий, вы направляетесь в правильном направлении. Если вы повторно используете код и строго придерживаетесь того, чтобы не повторять то, что вы делаете хорошо. Наконец, если вы занимаетесь повторным факторингом со страстью и действительно понимаете мощь методов программирования на основе интерфейса, которые вы делаете хорошо. О да, еще одна вещь, если вы знаете, что такое инъекция зависимостей, вы являетесь генералом 5 звезд в армии программистов. Март, хорошие солдаты!

+0

В 2014 году я все еще был не нравится Javascript. С тех пор я стал поклонником. Что касается Углового комментария, хороший программист сразу увидит анти-узоры и избежит их как можно больше. Угловое хорошо, как и React, и Aurelia, похоже, тоже хорошо нагревается. –

Смежные вопросы