Битовые маски в UI

ui-bits.js

/**
 * Битовые маски в UI
 * Автор: Игорь Алексеенко
 */


// состояния компонентов
class Button {
    constructor() {
        this.state = 
            Button.State.DISABLED | 
            Button.State.HAS_ICON;
        this.element = document.createElement('button');
        this.getClassName();
    }

    getClassName() {
        Object.keys(Button.State).forEach(function(stateName) {
            // 1-ый вариант
            var stateBits = Button.State[stateName];
            var cssClassName = Button.StateClassName[stateBits];
            var action = Boolean(this.state & stateBits) ? 'add' : 'remove';
            this.element.classList[action](cssClassName);

            // 2-ой вариант
            this.element.className = Button.StateClassName[this.state];
        }, this);
    };
}

Button.State = {
    DISABLED: 1,
    FOCUSED: 2,
    HOVERED: 4,
    ACTIVE: 8,
    HAS_ICON: 16
}

Button.StateClassName = {
    '1': 'item-disabled',
    '2': 'item-focused',
    '4': 'item-hovered',
    '8': 'item-active',
    '16': 'item-hasicon'
}

// 2-ой вариант
Button.StateClassName[1 | 16] = 'item-disabled item-hasicon';

// для проверки состояния
Boolean(Button.State[statName] & this.state)



/** 
 * Описание поведения
 */
var Direction = {
    RIGHT: 0x01,
    TOP: 0x02
};

var DirectionBehaviour = {
    0x01 : function(character) {
    return Object.assign({}, character, {
        left: character.left + character.hSpeed
        });
    },
    0x02: function(character) {
        return Object.assign({}, character, {
            left: character.top - character.vSpeed
        });
    }
]);


/**
 * Redux
 * Можно использовать битовые маски как параметр type для управляющих объектов action. 
 * Так, за одно обращение к хранилищу можно делать несколько операций с данными
 */
const ActionType = {
    UPDATE_1:0x01, 
    UPDATE_2:0x02
};

store.dispatch({
    type: ActionType.UPDATE_1 | ActionType.UPDATE_2
});