JS компоненты

Как я говорил выше, раньше мы полностью полагались на ascx. Сейчас мы склоняемся к использованию JS компонентов. Почему?

• Есть возможность переносить между разными проектами, написанными под разные платформы (ASP.NET, MVC, PHP и др).
• Для использования можно использовать просто HTML разметку.
• Это дает более удобный интерфейс чем обычные компоненты, не ориентированные на JS и Ajax.

Общий смысл работы JS компонентов следующий:

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

Компонент по сути для всех div с классом будет as-files будет делать запрос на сервер и выводить ссылки на файлы. При этом также опционально будет возможность удалять файлы и их редактировать (т.е. будут добавлены соответствующие кнопки и их обработчики). Чтобы использовать компонент нам нужно будет просто поставить правильную разметку на странице, например:

<div class='as-files' data-type='products' data-itemID='45'></div>

В атрибутах data-… могут передаваться дополнительные параметры компонента.

Обычно ключевые компоненты имеет смысл сразу подключить в проект. Можно это сделать либо напрямую указав script в разметке, либо загружать через $.getScript. Во-втором случае бывают проблемы с подгрузкой отдельных скриптов. Как вариант можно использовать более продвинутую загрузку с помощью require.js

Общий паттерн компонента выглядит следующим образом:

var comp = {

       options:{

// здесь значения по умолчанию

},

       init: function(options){

             comp.options = $.extend(comp.options, options)

             // init handlers – delegate…

},

func1: function(){}

};

$(function(){

       comp.init({

             // параметры приложения.

});

});

Придерживайтесь этой структуры. Все что связано с компонентом, пишите, как функции этого объекта.

Если вам нужно подгрузить какой-то дополнительный скрипт или плагин – то лучше это делайте через as.sys.loadLib (не подключая дополнительный скрипт в HTML) – так будет проще переносить компонент в другой проект (иначе вы можете забыть какие скрипты нужны для работы данного компонента).

Всегда делайте по возможности такой компонент, который учитывает, что на странице может быть несколько одинаковых компонентов (т.е. контейнер в пределах которых работает компонент будет определяться автоматически (например, через $(this).closest(‘.as-files’))? а не на основе параметров в options).

Выделение таких компонентов также позволяет вам работать в пределах одного namespace, не пересекаясь с другой возможной функциональностью на странице. В нашей системе arkAS используется также общий namespace, который объединяет все компоненты системы – as. Т.е. все модули, компоненты выглядят примерно так: as.crud, as.makeup, as.crud.comments.По возможности все выносите в настройки: названия кнопок, URL для ajax запросов, уведомления, количество элементов, настройки внешнего оформления и видимости элементов и т.д.

Кстати, настройки можно делать не линейным списком, а делать подобъекты, массивы и т.д. – это придает структурированность настроек. Посмотрите, как организованы настройки в as.crud – там используются объекты, массивы и т.д. Обязательно делайте хотя бы краткую документацию на компонент. Она может включать следующее:

• Общее назначение
• Пример использования (+ ссылка на демо – демо сильно упрощает понимание компонента).
• Описание всех параметров + возможные значения для них.

Подобное описание позволит работать с компонентом не только вам, но и вашим коллегам. В демо постарайтесь привести использование настроек по максимуму, чтобы можно было покрутить настройки компонента на демо.

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

Все свои компоненты делать лучше в едином стиле и использовать одни и те же инструментальные средства.

В нашем случае мы используем jquery и bootstrap. При этом мы не используем фреймворки наподобие knockout.js. Все наши компоненты тесно интегрированы с нашей библиотекой as.js.

Многие возможности jquery, bootstrap имеют свою обертку в нашей библиотеки. Сделано это потому, чтобы потом была возможность изменить инструмент вывода определенной функциональности. Например, для вывода диалогового окна мы используем Bootstrap Dialog. В будущем мы можем изменить решение его использовать и для этого надо будет просто поменять эту функцию.

Следующий совет – не увлекайтесь паттернами и фреймворками.

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

Обязательно эти моменты согласуйте с ведущим разработчиком на проекте и с менеджером проекта. Т.к. мы ориентируемся именно на разработку бизнес-приложений, для нас не так важна SEO составляющая. Это позволяет делать нам практически все на JS (напомним, что контент, генерируемый через JS, ограниченно виден поисковикам).

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

В следующем блоке мы рассмотрим Отладку, трассировку и оптимизацию.