Category Archives: pattern

images

JavaScript Module Pattern

Some of most  interesting article and code snippet about JavaScript module patterns, AMD (Asynchronous Module Definition ) and OOP in JS .

JavaScript Module Pattern 

YAHOO.myProject.myModule = function () {

	//"private" variables:
	var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";
	//"private" method:
	var myPrivateMethod = function () {
		YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
	}

	return  {
		myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.",
		myPublicMethod: function () {
			YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
			//Within myProject, I can access "private" vars and methods:
			YAHOO.log(myPrivateVar);
			YAHOO.log(myPrivateMethod());
			//The native scope of myPublicMethod is myProject; we can
			//access public members using "this":
			YAHOO.log(this.myPublicProperty);
		}
	};
}(); // the parens here cause the anonymous function to execute and return

AMD (Asynchronous Module Definition )

UMD (Universal Module Definition) patterns for JavaScript modules that work everywhere.
https://github.com/umdjs/umd

// Uses AMD or browser globals to create a jQuery plugin.
// It does not try to register in a CommonJS environment since
// jQuery is not likely to run in those environments.
// See jqueryPluginCommonJs.js for that version.

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    $.fn.jqueryPlugin = function () {};
}));

RequireJS

Object-Oriented JavaScript

There are a couple of ways to handle creating a class in JavaScript. (for more details go to link above!) 

Placing everything inside a function

function Dog () {
    this.name = "";
    this.position = 0;
    this.bark = function (){
        alert("wuff");
    };
    this.walk = function(){
        this.position += 1;
        alert("position = "+this.position);
    }
    this.getName = function (){
        return this.name;
    }
}
var dog = new Dog();
dog.name = "Ralph";
dog.bark(); //Popup box with "wuff"
dog.walk(); //Position increases by 1;
alert(dog.getName()); //Outputs dog's name*/

Placing everything inside an object

var Dog = {
    name    :   "",
    position:   0,
    bark    :   function(){ alert("wuff") },
    walk    :   function(){
        this.position += 1;
        alert("position = "+this.position);
    },
    getName :   function(){
        return this.name
    }
}
Dog.name = "Ralph";
Dog.bark(); //Popup box with "wuff"
Dog.walk(); //Position increases by 1;
alert(Dog.getName()); //Outputs dog's name

Using prototype to build a class

function Dog (){}
Dog.prototype.name = "";
Dog.prototype.position = 0;

Dog.prototype.bark = function (){
    alert("wuff");
}
Dog.prototype.walk = function (){
    this.position += 1;
    alert("position = "+this.position);
}
Dog.prototype.getName = function(){
    return this.name;
}
var dog = new Dog();
dog.name = "Ralph";
dog.bark(); //Popup box with "wuff"
dog.walk(); //Position increases by 1;
alert(dog.getName()); //Outputs dog's name
function Puppy (){}
Puppy.prototype = new Dog();

Puppy.prototype.bark = function (){
    alert("Yelp");
}
var puppy = new Puppy();
puppy.name = "Ralph";
puppy.bark(); //Popup box with "Yelp"
puppy.walk(); //Position increases by 1;
alert(puppy.getName()); //Outputs puppy's name

Creating your own JavaScript Library