JS-класс к шаблону компонента

Иногда при разработке компонента его шаблон необходимо наделить js-функциональностью, событиями и прочим. Выглядеть это может примерно так:

if (typeof(BX.CrmQuickPanelEdit) === 'undefined')
{
    BX.CrmQuickPanelEdit = function(id)
    {
        this._id = id;
        this._settings = {};
        this._submitHandler = BX.delegate(this._clickHandler, this);
        BX.bind(BX(this._id + '_submit'), 'click', this._submitHandler);
    };
    BX.CrmQuickPanelEdit.prototype =
    {
        initialize: function(id, settings)
    {
        this._id = id;
        this._settings = settings;
    },
        getId: function()
    {
        return this._id;
    },
    _clickHandler: function(e)
    {
        console.log(e);
    }
    };
    BX.CrmQuickPanelEdit.create = function(id, settings)
    {
    var _self = new BX.CrmQuickPanelEdit(id);
        _self.initialize(id, settings);
        return _self;
    };
}

Аналогичные подходы вы можете видеть в JS-ядре Bitrix Framework (расположен в /bitrix/js/). Разобравшись в данном примере вы сможете легче понимать JS-код разработчиков Битрикс.

Пример вызова:

<script type="text/javascript">
    BX.ready(function(){
        BX.CrmQuickPanelEdit.create('some_id', null);
    });
</script>

Если нужен паттерн "одиночка", то реализовать это можно как часть create:

BX.CrmQuickPanelEdit._self  = null;
BX.CrmQuickPanelEdit.create = function(id, settings)
{
    if (!this._self) {
    this._self = new BX.CrmQuickPanelEdit();
}
    this._self.initialize(id, settings);
    return this._self;
};

Что делает JS-класс: запоминает внутри себя некий ID (например, это может быть ID контейнера) и массив параметров, а также вешает обработчик на событие клика по кнопке подтверждения в форме указанного контейнера.