JBlocks — небольшой jQuery-плагин (~100 строк) для организации компонентов на странице.

Строится на трех основных принципах:

  • опиши поведение компонента в декларации;
  • разметь компонент в html с помощью специальных атрибутов;
  • общайся со экземплярами компонента через АПИ.

Если вам интересна тема декларативного javascript — прошу под кат.

Пусть у нас есть простой контрол: счетчик. Шаг счетчика — параметр, который можно менять для разных экземпляров.
image
Демо

Объявим новый компонент counter:

$.jblocks({
    // имя компонента
    name: 'counter',

    // декларация событий
    events: {
        // встроенные события: b-inited, b-destroyed
        'b-inited': 'oninit',

        // дом-события
        'click .js-inc': 'onClickPlus',
        'click .js-dec': 'onClickMinus'
    },

    // методы компонента
    methods: {
        oninit: function() {
            this.$info = this.$node.find('.js-info');
            this.count = 0;
        },

        /**
         * Обработчик клика на плюс
         */
        onClickPlus: function() {
            this.inc();
            this.update();
        },

        /**
         * Обработчик клика на минус
         */
        onClickMinus: function() {
            this.dec();
            this.update();
        },

        /**
         * Увеличить счетчик
         */
        inc: function() {
            this.count += this.params.step;
        },

        /**
         * Уменьшить счетчик
         */
        dec: function() {
            this.count -= this.params.step;
        },

        /**
         * Нарисовать новое значение
         */
        update: function() {
            this.$info.text(this.count);
        }
    }
});

Разметим в html компонент с помощью специальных атрибутов:

<div class="foo" data-b="сounter" data-p='{ "step": 2 }'>
    ...
</div>

  • data-b — айдишник блока (имя)
  • data-p — параметры блока


Компоненты можно инициализировать с помощью $.fn.jblocks('init') и уничтожать с помощью $.fn.jblocks('destroy'):

// Инициализируем все блоки в документе
$(document).jblocks('init');

// Уничтожаем все блоки в документе
$(document).jblocks('destroy');

// Или внутри конретной части DOM-дерева
$('#app').jblocks('init');

С помощью функции $.fn.jblocks('get') можно получать ссылки на экземпляры. Если компонент еще не был инициализирован, то сперва это будет сделано.

$('.foo').jblocks('get').each(function() {
    // this - экземпляр блока, inc — его метод
    this.inc();
});


UPD:

Спасибо всем за конструктивную критику (и даже один пул реквест). Обновил репозиторий и описание статьи в соответствии с новым АПИ.

UPD:

Как правильно заметил GIum, это не «нано» пока зависит от jQuery. Теперь это реально несколько сотен строк vanillajs :)