[Из песочницы] Нано-фреймворк для организации блоков на странице на базе jQuery

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

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

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

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

Демо

Объявим новый блок counter:

$.define('сounter', {
    // декларация событий
    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 — параметры блока

Блоки можно инициализировать с помощью функции initBlocks и уничтожать с помощью destroyBlocks:

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

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

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

С помощью функции getBlocks можно выбирать экземпляры блоков. Если блок еще не был инициализирован, то сперва это будет сделано.

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

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.