JavaScript/Notes/CustomEvents: Difference between revisions

From Noisebridge
Jump to navigation Jump to search
(Created page with "== Under Construction == An event is a function call that signifies something happened. <source language="javascript"> var TableSort = (function() { function TableSort(id) ...")
 
No edit summary
 
(13 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.  


<source language="javascript">
== Data Received ==
var TableSort = (function() {


function TableSort(id) {
Example: [http://garretts.github.io/ape-javascript-library/example/widget/HSVPicker/ HSVPicker].
   this.id = id;
 
<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 ==
* 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) {
    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;
});


TableSort.prototype = {
  sortBy : function(sortType) {
    if(!sortedBy


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));
   }
   }
}
}
return { getById
})();
</source>
</source>

Latest revision as of 23:32, 18 January 2014

What are they?[edit]

An event is a function call that signifies something happened.

Data Received[edit]

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]

  • Class - defines methods and default handlers
  • Instance - shadows class
  • Instance usage (from other objects)

Why?[edit]

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>