JavaScript/Notes/CustomEvents: Difference between revisions

From Noisebridge
Jump to navigation Jump to search
← Older edit
undoGarrett (talk | contribs)
769 edits
VisualWikitext
Garrett (talk | contribs)
769 edits
Garrett (talk | contribs)
769 edits
No edit summary
 
(7 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. Custom events are functions that you call to notify subscribers. The function is either defined by the "class" (default) or shadowed on the instance, by the client of the API.
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) {
   TableSort.prototype.sortBy = function(sortType) {
     var config = configData[this.id];
     var config = configData[this.id];
 
     if(!config.currentSort != "sortType") {
     if(config.currentSort != sortType) {
       config.sortFunction(this);
       config.sortFunction(this);
       this.onsort(sortType);
       this.onsort(sortType);
     }
     }
   };
   };
 
   return TableSort;
   return TableSort;
});
});
</source>
The <code>Factory</code> is explained in [https://noisebridge.net/index.php?title=JavaScript/Notes/Factory Factory] lesson.


Use a shared a noop function for the <code>onsort</code> event. Function.prototype is itself a function that
does nothing and returns undefined.
<source lang="javascript">
TableSort.prototype = {
  sortBy : function(sortType) {
    var config = configData[this.id];


     if(!config.currentSort != sortType) {
 
       config.sortFunction(this);
function Factory(getConstructor){
       this.onsort(sortType);
  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));
   }
  onsort : Function.prototype
}
};
</source>
 
=== Instantiate and Listen for onsort ===
Instantiate the object and add an event handler to the instance.
<source lang="javascript">
var propertiesTable = TableSort.getById("properties", { "price" : function(row} { } });
propertiesTable.onsort = function(sortType) {
   updateHeader(sortType);
};
</source>
</source>

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)

Why?

[edit | edit source]

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>

Retrieved from "https://main-wiki.extremist.software/index.php?title=JavaScript/Notes/CustomEvents&oldid=38294"