JavaScript/Notes/CustomEvents: Difference between revisions

From Noisebridge
Jump to navigation Jump to search
Garrett (talk | contribs)
Garrett (talk | contribs)
No edit summary
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Under Construction ==  
== What are they? ==
An event is a function call that signifies something happened.
An event is a function call that signifies something happened.
 
== Data Received ==
 
Example: [http://garretts.github.io/ape-javascript-library/example/widget/HSVPicker/ HSVPicker].


<source lang="javascript">
<source lang="javascript">
var TableSort = new Factory(function() {
var transport = new AjaxTransport(url);
transport.onsuccess = transportSuccessHandler;
 
function transportSuccessHandler(ev) {
  var data = ev.data;
  updateTable(data);
}
</source>


Custom calls notify subscribers. The function is either defined by the "class" (default) or shadowed on the instance, by the client of the API.


== Objects Talking ==
* Class - defines methods and default handlers
* Instance - shadows class
* Instance usage (from other objects)
== Why? ==
Centralized dispatch. Method called from many places and when it is done, shared notifications fire.
<source lang="javascript">
var tableSort = new Factory(function() {
   function _getSortFunction(sortType) {
   function _getSortFunction(sortType) {
     if(sortType == "number") {
     if(sortType == "number") {
     return function() { }
     return function() { };
     }
     }
   }
   }
 
   function _isSortedBy(tableSort, sortType) {
   function _isSortedBy(tableSort, sortType) {
   
   }
   }
 
   var configData = {};
   var configData = {};
 
   function TableSort(id, config) {
   function TableSort(id, config) {
     this.id = id;
     this.id = id;
     configData[id] = Object.create(config);
     configData[id] = Object.create(config);
   }
   }
  TableSort.prototype.sortBy = function(sortType) {
    var config = configData[this.id];
    if(config.currentSort != sortType) {
      config.sortFunction(this);
      this.onsort(sortType);
    }
  };
  return TableSort;
});


  TableSort.prototype = {
    sortBy : function(sortType) {
      var config = configData[this.id];


      if(!config.currentSort != "sortType") {
function Factory(getConstructor){
        config.sortFunction(this);
  var i = 0, ctor;
        this.onsort(sortType);
  this.getById = getById;
      }
    },
   
   
     onsort : Function.prototype
  function getById(id, config) {
     var instances = this.instances;
    if(!instances) { // First time.
      instances = this.instances = {};
      // Get the constructor.
      ctor = getConstructor(this);
    }
    return instances[id] || (instances[id] = new ctor(id, config));
   }
   }
 
}
  return TableSort;
})();
</source>
</source>
The <code>Factory</code> is explained in [https://noisebridge.net/index.php?title=JavaScript/Notes/Factory Factory] lesson.

Latest revision as of 23:32, 18 January 2014

What are they?

[edit | edit source]

An event is a function call that signifies something happened.

Data Received

[edit | edit source]

Example: HSVPicker.

<source lang="javascript"> var transport = new AjaxTransport(url); transport.onsuccess = transportSuccessHandler;

function transportSuccessHandler(ev) {

 var data = ev.data;
 updateTable(data);

} </source>

Custom calls notify subscribers. The function is either defined by the "class" (default) or shadowed on the instance, by the client of the API.

Objects Talking

[edit | edit source]
  • Class - defines methods and default handlers
  • Instance - shadows class
  • Instance usage (from other objects)

Centralized dispatch. Method called from many places and when it is done, shared notifications fire.

<source lang="javascript"> var tableSort = new Factory(function() {

 function _getSortFunction(sortType) {
   if(sortType == "number") {
    return function() { };
   }
 }

 function _isSortedBy(tableSort, sortType) {

 }

 var configData = {};

 function TableSort(id, config) {
   this.id = id;
   configData[id] = Object.create(config);
 }

 TableSort.prototype.sortBy = function(sortType) {
   var config = configData[this.id];

   if(config.currentSort != sortType) {
     config.sortFunction(this);
     this.onsort(sortType);
   }
 };

 return TableSort;

});


function Factory(getConstructor){

 var i = 0, ctor;
 this.getById = getById;

 function getById(id, config) {
   var instances = this.instances;
   if(!instances) { // First time.
     instances = this.instances = {};
     // Get the constructor.
     ctor = getConstructor(this);
   }
   return instances[id] || (instances[id] = new ctor(id, config));
 }

} </source>