{Carrer web log} ←

Multiple object extend pattern in JavaScript

Tuesday, June 21, 2011 { 3 Comments }

I've was doing some research about JavaScript Inheritance patterns realizing there are many different approaches and divided opinions which pattern or method is better. There is no widely accepted bulletproof pattern that will cover every possible scenario, probably because It all depends what you trying to achieve.

I needed a pattern that can accept and extend multiple objects. Usually is very common to see one object that extends another object extend(object1, object2) but I needed pattern that accepts multiple objects like extend(object1, object2, object3). So I decided to make one.

I used Douglas Crockford - Prototypal Inheritance logic, temporally function -> Object.prototype -> new object plus looping inside every object to copy all the methods.

The first pattern accepts only objects:


I also made the second pattern in case you want to use function for storing methods.It is highly unlikely that you will use the function just for storing methods, but anyway here is the pattern.


From the preliminary tests, this pattern should work even in IE 5.5.

Sometimes it can be handy to merge objects or to divide one object in smaller units to increase modularity. Many modern JS Frameworks have one object that holds everything, dividing that object into smaller logical components(objects) can be helpful.

Two months ago I made picoCSS small JS framework for making webkit apps. I will rewrite the picoCSS to demonstrate the functionality of this pattern. Many JS framework have modules like: selector engine, css, animation, other DOM methods, ajax, events … The intention behind this pattern is to merge just the objects(modules) that we need.

Here is picoCSS original and viewed with Object Auto Documentation. Everything is stored inside the object p. The goal is to brake picoCSS several objects like selector, events, animation …

And picoCSS after:


Now we can rebuild picoCSS like this: var p = extend(selector, css, loop, events);

The working demo.

In this way we loaded just the objects and methods that we need. This particular case dividing the object has little sense because we have super small library. But in other bigger projects dividing the logic can be very useful not just for increasing modularity but also for decreasing the memory consummation. We can even make different files for every object and load only the files that we use. Naturally we should be careful not to make to many HTTP requests.

Here are some I tests I made

Your comments and suggestions about improving this pattern are welcomed.

3 Responses to “Multiple object extend pattern in JavaScript”

1. //  balupton // 6/21/2011

   This seems no different to what jQuery plugin developers do every single day:
   myPlugin.js > $.extend($.fn, {one: ..., two: ...});
   
   What makes your thing special?
   
   Btw, I find the introduction paragraph incredible misleading as this post has nothing to do with inheritance and is just about extending objects. For inheritance see http://vimeo.com/9998565  

2. //  Vladimir // 6/21/2011

   @balupton:
   
   Can you link to jQuery plugin you mentioned before.
   
   About the Inheritance here is the link about the Prototypal Inheritance by Douglas Crockford http://javascript.crockford.com/prototypal.html
   
   This pattern uses that logic plus loop and copy of all the object methods. That is why I mentioned the Inheritance.
   
   Yes, I know the video you mentioned.
   
   This pattern is the product of my personal necessity to divide my framework into separate modules.
   
   I'm sharing this pattern because it can help someone out there. Is this the best practice for extend objects? I don't know. I was hoping that the JS community can give me so constructive criticism and alternative better solution.  

3. //  Volkan Özçelik // 6/22/2011

   IMHO, forcing JavaScript to mimic classical inheritance is a means of using the language in the wrong direction.
   
   JavaScript is meant for prototypal inheritance, and it should be used that way.
   
   AND (a big AND) jQuery != JavaScript; jQuery.extend != "JavaScript inheritance"
   
   As a corollary, I don't agree with @balupton 's aggressive and destructive approach.
   
   Claiming
   
   "
   F.prototype[m] = arguments[i][m];
   "
   
   having nothing to do with inheritance, simply shows a lack of research, to say the least.
   
   ...
   
   Yet, I'm doubtful about calling this usage a "pattern", but let's keep the terminology aside.
   
   And every pattern has its use. Every pattern has its advantages and liabilities.
   
   Just my 2c  

Post a Comment

<< Home