JavaScript/Notes/CustomEvents: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
(6 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
== | == 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 | 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( | if(config.currentSort != sortType) { | ||
config.sortFunction(this); | config.sortFunction(this); | ||
this.onsort(sortType); | this.onsort(sortType); | ||
} | } | ||
}; | }; | ||
return TableSort; | return TableSort; | ||
}); | }); | ||
if(! | |||
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> | </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>