Соответствует ли Knockout.js лучшим методикам разделения контента / пользовательского интерфейса / поведения?
Я работаю в Интернете довольно долгое время и вижу, как развиваются "лучшие практики". Теперь я совершенно убежден, что лучше всего разделять HTML (контент), Javascript (поведение) и CSS (пользовательский интерфейс).
Несколько месяцев назад я начал использовать knockout.js . Я выбрал его среди других подобных фреймворков, таких как магистральная или угловая, потому что глава в тренинге MVC, которой я следовал, была о нокауте, и концепция соблазнила меня. Затем, после быстрого сравнения в Интернете, это не выглядело как плохой выбор для моих потребностей, и для начала.
Но вот моя проблема: когда я смотрю на свой HTML-код сейчас, после нескольких недель разработки в проекте, в нем довольно много нокаутирующих привязок, и это заставляет меня много думать о старых временах, когда мы (или по крайней мере, я) использовал встроенную обработку событий JavaScript через onclick атрибут и так далее.
Поэтому эти 2 вопроса, которые я не уверен, на 100% подходят для SO, но я не могу найти лучшего сайта StackExchange, чтобы задать его:
Является ли использование нокаута (или других фреймворков, так как все они в основном работают по одной схеме) противоречащим "правилу разделения"? Или это приемлемый небольшой шаг из этого правила? или это даже совершенно приемлемо, потому что он использует атрибуты "data-"?
В случае, если это было бы как-то нехорошо, есть ли возможность выполнить всю привязку через отдельный файл javascript, используя, например, jQuery для выбора элементов управления и применения к ним привязок? Если это невозможно в нокауте, это с другой структурой? Я должен признать, что в то время, когда я делал свой выбор, я не думал о таких последствиях...
Спасибо и извините, если это нужно перенести на другой сайт SE.
3 ответа
У меня были те же первоначальные резервирования, что и у вас, но я должен сказать, что наличие привязок в html и не спрятанное в файле JS кажется мне намного лучше, так как связь между презентацией и функциональностью теперь совершенно очевидна. Это значительно уменьшает возможность изменения некоторого HTML и нарушения функциональности, потому что вы не знали, что кто-то подключил некоторый javascript к элементу, используя jQuery.
Кроме того, как вы указываете, использование атрибута привязки данных, я думаю, означает, что он придерживается правила разделения, хотя, если вы хотите строго придерживаться его, убедитесь, что все привязки относятся к наблюдаемым, вычисляемым или функции в вашей модели представления, не используйте какой-либо код (т.е. видимую привязку, которая проверяет состояние двух наблюдаемых). Хотя я не уверен, что зайду так далеко.
Я думаю, что все начали изучать KnockoutJS имеют те же проблемы.
ИМХО, должен быть какой-то способ, который связывает модели (объект JS) с представлениями (разметка HTML). Тогда у нас должно быть что-то, что говорит:"Когда нажата эта кнопка, вызовите эту функцию с этими аргументами". или "Скрыть этот элемент, пока массив JS пуст" и так далее. Итак, как мы можем выразить / сказать / констатировать это соединение в удобочитаемом, многократно используемом и понятном виде.
Если вы использовали другой JS-файл для обработки этого соединения, то у вас будут большие строки кода, чтобы разместить логику соединения, и вам нужно знать, как выбрать целевой элемент DOM. В итоге вы получите массивный код (вероятно, много jQuery), чтобы сделать ваш HTML динамичным и живым(держу пари, что большинство разработчиков сталкивалось с этим много раз). Я не использовал другие библиотеки или фреймворки, но думаю, они просто делают ваш массивный код более организованным.
С другой стороны, использование KnockoutJS Declarative BindingsЭто связь между моделями и представлениями. Он более читабелен, его легко подключить и вынуть, и он позволяет вам сосредоточиться на написании хорошего объекта модели JS.
Я полагаю, чтобы действительно проверить разделение, подумайте, что если вам когда-нибудь понадобится изменить свою модель, сколько изменений нужно внести в свое представление? и наоборот?
Добавляя к остальным ответам, несколько советов:
Убедитесь, что в ваших привязках нет бизнес-логики. Любая логика (которая должна быть минимальной) должна быть "логикой представления": решения, которые влияют только на то, как выглядит ваше представление, а не на его работу. Решение, сколько элементов отображать на экране, является логикой просмотра; решение, может ли пользователь добавить другой элемент, является бизнес-логикой. Это нормально, чтобы поместить логику вида в вашу модель представления, а не в ваше представление, и желательно, если она включает в себя длинные выражения.
Держите "магические числа" вне всякой логики представления в ваших привязках. Если это параметр, который можно изменить (например, количество недель для отображения результатов), а не истинную константу (например, количество дней в неделе), сделайте его свойством вашей модели представления и ссылайтесь на него в любых выражениях в ваших представлениях.,