• Save
Extending Prototype Lalit Patel
Upcoming SlideShare
Loading in...5
×
 

Extending Prototype Lalit Patel

on

  • 6,438 views

How to make useful reuable add-ons to prototype.js

How to make useful reuable add-ons to prototype.js

Statistics

Views

Total Views
6,438
Views on SlideShare
6,257
Embed Views
181

Actions

Likes
2
Downloads
0
Comments
1

5 Embeds 181

http://www.lalit.org 173
http://www.slideshare.net 5
http://208.96.55.108 1
http://test.local 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Extending Prototype Lalit Patel Extending Prototype Lalit Patel Presentation Transcript

    • 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(quot;My dog's name is quot; + mydog.name); alert(quot;He is quot; + mydog.age + quot; years oldquot;); alert(quot;He is an quot; + mydog.breed);
    • Questions? http://www.lalit.org http://www.slideshare.net