Bitrix Framework

Sometimes, when developing a component, its template must be supplemented with JS functionality, events and other features. It must look approximately as follows:

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;
   };
}

Similar approaches can be seen in Bitrix Framework JS core (located in /bitrix/js/). You can get a clearer understanding of Bitrix24 developer JS code after overviewing this example.

Call example:

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

The "Single" pattern: you implement it as part of 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 class actions: memorizes a specific ID (for example, it can be a container ID) and parameter array, as well as associates handler to a confirmation button click event inside the indicated container form.