Extending Prototype
Building reusable add-ons to prototype.js
Lalit Patel (www.lalit.org)
SlideShare Inc. (www.slideshare.net)

Hello!
Thank you for coming.

Talk Agenda
• Introduction
• OO Javascript
• Prototype.js
• Class Magic
– Class.create()‫‏‬
– initialize()
– Object.extend()‫‏‬
• Case Study: Cookie Jar
• Questions

Shameless self-promotion
Lalit Patel
• Software Engineer at Uzanto LLC.
• Software Engineer & Web 2.0 Analyst at SlideShare Inc.
• Open Source Enthusiast
• Javascript & AJAX hacker
• www.lalit.org

About SlideShare.net
• “YouTube of PowerPoint” – TechCrunch
• A neat way of sharing slideshows
• Still in beta
• Indian Startup; born October 2006
• Self funded
• Parent – Uzanto LLC. (www.uzanto.com)

Javascript is Object Oriented?
Who said?
• Yes, its no secret now.
• Plus you have
– closures
– anonymous functions
– object.prototype
• Its no surprise, many people don’t know it.
• The World's most misunderstood programming language
– Douglas Crokford

Prototype.js
• Prototype (http://www.prototypejs.org) is a Javascript
Framework that aims to ease development of dynamic
web applications. Featuring a unique, easy-to-use toolkit
for class-driven development and the nicest Ajax library
around.
• Prototype reduces the headache of writing cross-
browser Javascript code.

Why Prototype.js?
• The protoype.js provides a nice platform for class-
driven development and helps us to created exciting
new features/add-ons which can be used by clubbing it
with Prototype.js
• Becomes easier for the community to extend
prototype and build add-ons that can be re-used as per
the website's needs.
• Keeps the primary code base low-fat and simple.
• Complex features can be used as add-ons

Prototypes Class Magic
• Class.create()
• Constructor – this.initialize()
• Object.extend()

Prototype’s Class Magic
– Class.create()
/* Prototype.js */
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
};
}
};
// how to create a new class
new_class = Class.create()
When you create a class (Class.create()) return a new instance of a
function (object) that has the first line that calls the function ‘initialize’.
This is called when we create an instance of new_class by new
new_class(). It acts as an constructor.

Prototype’s Class Magic
– Constructor
// we get a new class
MyClass = Class.create();
// implementation of MyClass
...
// create an instance of MyClass
var mc = new MyClass(args);
• On creation of mc, its constructor:
this.initialize.apply(this, arguments) or
mc.initialize.apply(mc, args) is called.

Prototype’s Class Magic
– Object.extend()
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
};
• Prototypes way to implement hierarchical inheritance
• Simply copies the values of the source’s object into the destination object
• New values are added, and old values are over-ridden
• Helps for easy setting and default value setting of options
// usage
destination = Object.extend(destination, source);

Basic Add-on structure
var AddOn = Class.create(); // create a class
AddOn.prototype = { // add methods to class
private_var = 'hmm!', // private variable
this.public_var = 'whoa!', // public variable
initialize: function(options) { // constructor
this.options = { // default values
var1: 'value1',
var2: 'value2'
};
// replace default values
Object.extend(this.options, options || {});
},
method1: function(args) { // action for class
},
method2: function(args) { // yet another action
}
...
};

Sample add-on: CookieJar
• Makes cookie management easier
• Allows user to store JSON data in cookies
• Makes parsing of stored data easier
• Store and retrieve objects directly
• < 2kb of code
• Demo and source code at:
http://www.lalit.org/lab/jsoncookies

CookieJar structure
var CookieJar = Class.create();
CookieJar.prototype = {
appendString = '__CJ_', // string to append to cookie
initialize: function(options) {
Object.extend(this.options, options || {});
},
put: function(name, value) { // add an object to cookie
},
get: function(name) { // get the object by name
},
remove: function(name) { // remove an object
},
empty: function(name) { // empty the cookie jar
}
};

CookieJar usage
var jar = new CookieJar({
expires:3600, // seconds
path: '/'
});
dog = {name: 'Jacky', breed: 'Alsatian', age: 5};
jar.put('mydog', dog);
mydog = jar.get('mydog');
alert(\"My dog's name is \" + mydog.name);
alert(\"He is \" + mydog.age + \" years old\");
alert(\"He is an \" + mydog.breed);

Questions?
http://www.lalit.org
http://www.slideshare.net