High Performance JavaScript Class Template

This is a post more for my own future reference than the rest of the world:

I posted earlier with my standard JavaScript class template. While I favor that one for reasons of encapsulation, its performance is really not very optimized. Here is an alternate class template I use in cases where performance (or the quantity of objects) is more important.

Most of this layout was lifted from iScroll. I’ve kept a lot of iScroll’s configuration settings as well. You’ll see those up near the top.

You can grab the latest version of this template from GitHub.

(function() {

	// Configuration and constants
    var m = Math,
	? = m.PI * 2,
	vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
		(/firefox/i).test(navigator.userAgent) ? 'Moz' :
		(/trident/i).test(navigator.userAgent) ? 'ms' :
		'opera' in window ? 'O' : '',

    // Browser capabilities
    isAndroid = (/android/gi).test(navigator.appVersion),
    isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
    isPlaybook = (/playbook/gi).test(navigator.appVersion),
    isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),

    has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix(),
    hasTouch = 'ontouchstart' in window && !isTouchPad,
    hasTransform = vendor + 'Transform' in document.documentElement.style,
    hasTransitionEnd = isIDevice || isPlaybook,

	// Events
	RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
	START_EV = hasTouch ? 'touchstart' : 'mousedown',
	MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
	END_EV = hasTouch ? 'touchend' : 'mouseup',
	CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
	WHEEL_EV = vendor == 'Moz' ? 'DOMMouseScroll' : 'mousewheel',

	// Helpers
	trnOpen = 'translate' + (has3d ? '3d(' : '('),
	trnClose = has3d ? ',0)' : ')',

	// Constructor
	ClassPrototype = function (options) {
		var self = this;

		// Default options
		self.options = {
			x: 0,
			y: 0,
		};

		// User defined options
		for (i in options) self.options[i] = options[i];

		// Set starting position
		self.x = self.options.x;
		self.y = self.options.y;

		self._privateMethod ();
	};

// Prototype
ClassPrototype.prototype = {
	// Variables
	enabled: true,
	x: 0,
	y: 0,

	// Event Handler
	handleEvent: function (e) {

	},

	// Private Method (not really private, just underscored)
	_privateMethod: function () {

	},

	// Public Method
	publicMethod: function () {

	},

};

if (typeof exports !== 'undefined') exports.ClassPrototype = ClassPrototype;
else window.ClassPrototype = ClassPrototype;

})();


One comment

  1. Markus

    LOL @ PlayBook & TouchPad detection, but I’m sure they’re grateful. Also, apparently some of the the Galaxy Tabs identify as Mac running Safari, so what can you do.

Post a comment


*

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>