Created
October 4, 2012 15:35
-
-
Save quickredfox/3834456 to your computer and use it in GitHub Desktop.
How to write a decent javascript class, without bloating it with frameworks.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// constructor | |
var MyClass = function( instanceOptions ){ | |
// Make sure we're a new object (can be used without "new" constructor ie: new MyClass({}) === MyClass({}) ) | |
if( !(this instanceof MyClass) ) return new MyClass( instanceOptions ); | |
var myPrivateVar = "This variable cannot be accessed outside my any means whatsoever."; | |
this.myPublicVar = "This variable can be read and modified by anyone"; | |
var self = this; // use this for references to "this" within callbacks and stuff. | |
// you can write accessors for you private vars if you need. | |
this.myPrivateVarAccessor = function(){ return myPrivateVar } | |
// Gotcha! If it's an object or array of objects it/they can be modified!!! | |
// You'd use something like this to prevent that, use your imagination... | |
this.myPrivateVarSafeAccessofunction(){ return aHelperFunctionThatCopiesWithoutReference( myPrivateVar ) } | |
// methods can be defined here | |
this.myMethod = function(){ return true } | |
// or overriden from prototype definition depending on some factors | |
if( instanceOptions.foo){ | |
this.theMethod = function(){ return this.foo ? self : false } | |
} | |
// using self? | |
this.doBigAjaxCallUsingSomeExternalLibrary = function(){ | |
// jquery ajax call | |
$.ajax({type:'get',complete: function( status ){ | |
// use self here because 'this' inside the callback is not your instance anymore. | |
self.ajaxStatus = status; | |
}}); | |
} | |
// always return your instance | |
return this; | |
} | |
// Now you can define prototype method that you may or may not override in your constructor | |
MyClass.prototype = { | |
theMethod: function(){ return false } | |
theOtherMethod: function(){ | |
// you can re-use this pattern here too... | |
var self = this; | |
} | |
} | |
// sometimes, you wanna tack-on some more prototypes somehow.. let's say, from a shared object | |
var shared = { foo: true, bar: false} | |
for key in shared | |
MyClass.prototype[key] = shared[key]; | |
// or you could do... | |
var shared = { foo: true, bar: false} | |
for key in shared | |
MyClass.prototype[key] = function(){ return shared[key] } | |
// STATIC METHODS! | |
MyClass.myStaticMethod = function( ){ | |
// validate arguments, do stuff, code away! | |
} | |
// It's nice to give people a nice conventional-like approach to creating an instance too. | |
MyClass.create = function( options ){ return new MyClass( options ) } | |
// Oh! And a singleton would have to be like this: | |
var Singleton = new function(){ return this } // notice the "new" | |
// ...and all methods would have to be declared within the constructor, but you can tack-on anything you like. | |
// Missed anything you need? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment