CornerJS, или директивы «как в AngularJS», только лучше

в 14:26, , рубрики: Без рубрики

image

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

В рабочих проектах это может сводиться к чему-то вроде

function pageChange(){
    if ($(‘.element-carousel’).length>0) {$(‘.element-carousel’).initCarousel()}
    if ($(‘.element-scrollbox’).length>0) {$(‘.element-scrollbox’).initScrollbox()}
…

А может и не сводиться, и в каждом условном контроллере (колбэке на смену определенной страницы) мы вызываем код, связанный с определенными элементами.

Знакомо? Думаю, да. Считаете ли вы этот подход неправильным? Если первый ответ – да, то уверен, что и второй тоже да.

Хотите узнать, как можно сделать правильно, аккуратно и красиво?

Директивы

В AngularJS есть, как они пишут, уникальная фича – директивы. Но теперь она уже на самом деле не уникальна.
Неплохая статья про них уже была на хабре.
Не стану пересказывать все содержимое статьи, повторю всего одну фразу:

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

У директив AngularJS по сути есть всего один большой, жирный мирус: их невозможно использовать без собственно AngularJS, и даже если забыть о том, что он весит где-то мегабайт, все равно ты встаешь перед фактом, что нужно строить ng-приложение со свойственной ему структурой и разметкой.
Поэтому четыре месяца назад началась разработка решения, позволяющего создавать такие же отдельные элемент-специфичные задачи.

Как это работает?

Реализация работает на MutationObserver (для тех, кто не в курсе — родные события браузера на изменение DOM-дерева) с полифиллом, работающим на mutation events (DOMSubtreeModified и ему подобные). Полифилл реально нужен только для IE, так как все остальные десктопные браузеры уже поддерживают родной MutationObserver.
К сожалению, даже с полифиллом не поддерживается родной браузер android 2.3, что действительно печально, однако в 4.0 стабильно проходятся все тесты.
Теоретически «ручная» — с вызовом по необходимости проверки на обновление директив – поддержка директив возможна в практически любом мобильном и десктопном браузере, начиная с IE6.

Начало

Первоначально был определен синтаксис:

directive(‘name’, function(node){
    alert(«i’m alive!»)
}) 

Вначале предполагалось сделать целевой элемент this, но из-за большого количества колбэков (перед которыми каждый раз приходилось писать var _this = this) решено было вынести его в первый аргумент.
Дальше синтаксис был расширен до еще одного варианта:

directive(‘name’, {
    load: function(node){},
    unload: function(node){}
})

Событие load связано с появлением директивы(не элемента), unload соответствует ее удалению.
Почему именно с появлением директивы? Потому что их можно как прописывать изначально, так и добавлять и удалять в процессе работы с элементом. Простой пример — эта директива будет вызвана, если элемент изменится с

<div class="container something">

на

<div class="container test something">
Полезный this

Чтобы колбэки могли передавать друг другу значения – они получили общий this. Так что вполне возможно делать так:

directive(‘name’, {
    load: function(){
         this.interval = setInterval(function(){}, 1000)
    },
    unload: function(){
        clearInterval(this.interval)
    }
})

В некоторых случаях удобно создавать внешние методы для взаимодействия с содержимым: например, презентация с возможностью перехода. Для этого доступен сам скоп – он является одним из атрибутов ноды — так, для директивы test это будет node.directiveTest.
В итоге создание публичных методов для директивы становится простым и удобным:

directive(‘name’, function(){
    this.publicMethod = function(a){alert(a)}
})
Синтаксис в HTML

В качестве целей для директив были заданы классы, атрибуты и тэги, и с самого начала предполагалась возможность использования префикса ‘data-‘(на самом деле в настоящий момент конфигураторе по умолчанию задан еще один префикс — ‘directive-‘. Это сделано для читаемости директивных классов: div class=«directive-scrollbox» куда понятнее чем div class=«scrollbox»).
Соответственно такая директива будет выполнена при следующих сценариях:

<div class=«name»/>
<div class=«data-name»/>
<div name/>
<div data-name=«john»/>
<name/>
<data-name first-name=«john» last-name=«doe»>
Работа с атрибутами

Решение передавать данные из атрибутов просилось само собой. Для директив в атрибутах был задан сценарий передачи значения атрибута, для директив-тэгов — формируется объект из всех атрибутов. В итоге в примерах выше в первом случае будет передано ‘john’, во втором — {‘first-name’: ‘john’, ‘last-name’: ‘doe’}.
Для более «умной» передачи данных появилась поддержка «краткого» синтаксиса объекта: можно писать name=«first: ‘john’, jast: ‘doe’». в действительности внутри происходит что-то вроде

try {value = eval(  ‘{‘ + value + ‘}’ )}
try {value = eval(   value  )}
return value

Атрибуты могут меняться, и для их изменения тоже есть отдельный колбэк:

directive(‘name’, {
alter: function(){}
}

В некоторых случаях — например, для директивы вроде

directive(‘include’, function(node, path){
$.get(path, function(data){node.innerHTML = data})
})

действия на загрузке и изменении атрибута повторяются. Поэтому в случае, если не указано действие на load, оно автоматически берется из alter, что опять же позволяет уменьшить количество создаваемого кода.

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

Примеры

Из больших директив, которые уже используются в некоторых проектах, одна из самых приятных — это scrollbox, автоматическая «обертка» для любого элемента, которая навешивает на элемент кастомный скролл.

Пример на jsFiddle

А вот простой и удобный способ работать с drag-n-drop-ом файлов. Просто перетащите файл на серый квадрат.
Пример на jsFiddle
да, код немного объемен, но если добавить jQuery — он будет примерно в 2 раза короче.

А вот и повторение опубликованного пару месяцев назад на хабре решения для разработчиков. Для того, чтобы почувствовать всю увлекательность решения — нужно будет залезть в панель веб-разработки и вручную поменять значение repeat у любого из клонированных элементов. Если удалить атрибут — элемент станет одиночным, после чего можно будет добавить атрибут еще раз.
Пример на jsFiddle

Для тех, кто хочет попробовать cornerJS в своих проектах — минифицированная и обычная версии находятся тут:
Репозиторий cornerJS на GitHub

Автор: Jabher

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js