StefanZero.com

Programming the web in San Francisco

JavaScript

Building a Video Slot Machine with HTML5 Canvas and CSS3 Transitions

(Page 2)

JavaScript Scaffolding

The rest of this article is "in progress".

/* * JavaScript "Revealing Module" Pattern * * The module is a single function expression. * Internal variables are kept private within the closure scope of the function. * Only functions returned in the final object literal returned at the end of * "module_name" are accessible from outside the module. */ var module_name = function(optional_config_object) { // Declare variables var config_map, state_map, jquery_map, privateFunction1, setConfigMap, _getMaps, runModule, initModule; /* * config_map is an internal object literal to store configuration parameters. * Some samples of configuration parameters are shown below. */ config_map = { config_param_1: 'some_string', config_param_2: 10, config_param_3: new Date() }; /* * state_map is a placeholder object used to store all module variables that * are shared amongst the module functions. */ state_map = {}; /* * jquery_map is like state_map, but just for caching jquery elements. */ jquery_map = {}; /* * Divide program operations into small private functions with meaningful * names. */ privateFunction1 = function(arg1, arg2) { /* * Do stuff with input arguments. Use variables in the config_map, * state_map, and jquery_map. Store results in state_map and jquery_map * or return them from the function. Some examples are shown below. */ var function_1_var1, function_1_var2; function_1_var1 = new Array(config_map.config_param_2); function_1_var2 = new Date() - config_map.config_param_3; state_map[config_map.config_param_1] = function_1_var1; state_map['delta_time_ms'] = function_1_var2; return {someKey: 'someValue'}; }; /* * _getMaps is a function used only for debugging and testing. It allows * access to the internal variables, and should not to be used for modifying * these variables. */ _getMaps = function() { return { config_map: config_map, state_map: state_map, jquery_map: jquery_map, function_map: { func_1: privateFunction1 } }; }; /* * setConfigMap is a public function to allow the config_map to be set */ setConfigMap = function(input_map){ for (var key in input_map) { // Only use keys that are in both the input_map and config_map if (input_map.hasOwnProperty(key)) { if (config_map.hasOwnProperty(key)) { config_map[key] = input_map[key]; } } }; }; /* * runModule is a name for a typical name for a public function that * does something with the module. */ runModule = function(arg1, arg2) { // do something and call other private functions }; /* * initModule is a public function to initialize the module. * Typically, it is passed at least a variable that specifies a container * DOM element or DOM selector for an element where the module will construct * its content. */ initModule = function(containerSelector, input_config, arg2, arg3) { /* * Usually, the container element will be used to construct a jquery * element to which all content created will be appended to. Then this * container element will be added to the jquery_map. */ jquery_map['container'] = $(containerSelector); /* * Modify the config_map if new config settings were passed in. */ if (typeof input_config === "Object") { setConfigMap(input_config); } // Add stuff to jquery_map['container'] and call other functions privateFunction1(arg2, arg3); }; /* * Now return an object literal with everything that can be accessed from * outside the module. */ return { setConfigMap: setConfigMap, initModule: initModule, runModule: runModule, _getMaps: _getMaps }; };

Image Loading and Canvas Construction

The rest of this article is "in progress".

Coordination between JavaScript Parameters and LESS File

The rest of this article is "in progress".

Required Actions for Start Button Event Handler

The rest of this article is "in progress".