Многие компании начали использовать jQuery, из-за легкости разработки веб-приложений. Кроме того, разработчики считают, что jQuery легко изучить и реализовать благодаря его короткому и простому коду. Но независимо от непревзойденных функций, которые он предоставляет, он где-то не может предложить желаемые решения некоторых проблем.
Например, jQuery не предоставляет четкого способа разработки пользовательского интерфейса (UI) для сложных веб-приложений. Что делает такую задачу трудной для выполнения, так это из-за ручного манипулирования DOM (объектная модель документа) и обработчиков событий. Один из лучших способов достижения этой цели — найти библиотеку, которая поможет установить надежную связь между моделью данных и пользовательским интерфейсом вашего веб-приложения. Именно здесь пригодятся библиотеки JavaScript, такие как Knockout.js и Total.js. Эти библиотеки помогают в создании адаптивного веб-приложения с полной функциональностью.
Что еще? Приложения, созданные с использованием библиотек Knockout.js и Total.js, легко масштабируются и работают безупречно. Самое главное, что обе эти библиотеки помогают создавать сложные модели приложений. В этом посте я собираюсь дать вам хорошее представление о том, как вы можете использовать Total.js и Knockout.js для создания высокочувствительных веб-приложений.
Обзор Total.js и его критериев для создания приложения
Total.js — это современная платформа веб-приложений, основанная на архитектуре MVC, которая помогает создавать приложения реального времени, которые могут работать на любой платформе. Архитектура Total.js делает его идеально подходящим для создания больших приложений (для предприятий).
Чтобы начать работать с платформой Total.js, вам просто нужно добавить приведенный ниже фрагмент кода в папку «models / views / controllers». В дополнение к этому, Total.js даже предоставляет чрезвычайно простой механизм маршрутизации, который требует от вас выполнения сопоставления для каждого маршрута функции JavaScript.
exports.install = function(framework) {
framework.route('/users', listPersons)
framework.route('/users', addPerson, ['post'])
framework.route('/users/{id}' updatePerson, ['put'])
framework.route('/users/{id}' deletePerson, ['delete'])
};
function listPersons(){}
function addPerson(){}
function updatePerson(id){}
function deletePerson(id){}коммунальные услуги
Функции Total.js очень похожи на фреймворк Node.js. Помимо этого, большое количество библиотек, присутствующих в npm, делает Total.js надежной платформой. Кроме того, вы получаете доступ к широкому набору встроенных инструментов, а также опций, которые помогают плавно разрабатывать веб-приложения.
Кроме того, вы можете выполнять множество различных функций, таких как администрирование веб-сокетов, файловые операции и т. Д. Кроме того, вы даже можете создавать свой собственный код для создания модулей, адаптированных к вашим потребностям.
Обзор Knockout.js
Knockout.js — еще одна популярная библиотека JavaScript, которая помогает создавать адаптивные пользовательские интерфейсы. Кроме того, он обеспечивает базовую модель данных без помех. Эта структура основана на шаблоне Модель-Вид-Вид-Модель (MVVM). Давайте теперь посмотрим на ключевые концепции Knockout.js:
1. Декларативные привязки . С помощью этой функции Knockout.js позволяет подключать различные элементы пользовательского интерфейса к вашей модели данных. Обычно, когда DOM манипулируют с использованием JavaScript, вы, вероятно, получите неработающий код при внесении изменений в иерархию DOM (или идентификаторы элементов) в будущем. Но, благодаря декларативному связыванию, ни одно изменение не будет отражено в частях вашего пользовательского интерфейса при изменении DOM.
2. Шаблонирование : Knockout.js содержит гибкие шаблоны, которые обеспечивают простой способ создания сложных пользовательских интерфейсов (UI), содержащих вложенные или повторяющиеся блоки. Ниже приведены несколько функций, которые вы можете выполнять с вашими шаблонами с помощью фреймворка Knockout.js.
- Шаблон включает в себя параметр «если», который помогает обрабатывать вывод, имеющий нулевое значение.
<div data-bind="template: { name: 'nestedtl', 'if': myNestedObject, data: myNestedObject }"></div>- Шаблон также состоит из элемента «foreach», который дает вам возможность встраивать дополнительные элементы в шаблон. Для массива, который можно наблюдать и изменять, нокаут автоматически добавляет или удаляет узлы DOM вместо загрузки всего шаблона.
<ul data-bind="template: { name: 'itemtl', foreach: items, templateOptions: { selected: selectedItem } }"></ul>коммунальные услуги
Knockout также поставляется с собственными служебными функциями, такими как Total.js. Эти функции помогают выполнять широкий спектр задач наиболее эффективным способом. Например, служебная функция, такая как пространство имен ko.utils, может использоваться для создания приложения. Некоторые другие популярные утилиты платформы Knockout.js: extends и unwrapObservable.
Давай завернем!
Несомненно, jQuery оказался отличной заменой несовместимому DOM API. Однако, поскольку веб-приложения становятся нетривиальными, они становятся более дорогими и сложными в обслуживании. К счастью, библиотеки jQuery, а именно Knockout.js и Total.js, предлагают правильные инструменты и функции, необходимые для разработки адаптивных веб- приложений и мобильных приложений, что хорошо работает со всеми основными устройствами.
Просто помните, что Total.js по умолчанию минимизирует веб-технологии, такие как HTML / CS, JSS. И так, вы можете столкнуться с трудностями при отладке Javascript, если код написан внутри тегов <script> в разметке. И если вы хотите работать с Knockout.js, помните о том, чтобы поместить код, относящийся к модели представления, в отдельный файл JavaScript. А затем просто установите значение флага js-minify в false (это можно найти в файле config-debug).