Prototypal Inheritance With The DOM To Object Bridge Pattern

Prototypal Inheritance With The DOM To Object Bridge Pattern

From Learning JavaScript Design Patterns, a book by Addy Osmani.

As covered earlier, in JavaScript, we don’t have the traditional notion of classes that we would find in other classical programming languages, but we do have prototypal inheritance. With prototypal inheritance, an object inherits from another object. We can apply this concept to jQuery plugin development.

Yepnope.js author Alex Sexton and jQuery team member Scott Gonzalez have looked at this topic in detail. In sum, they discovered that for organized modular development, clearly separating the object that defines the logic for a plugin from the plugin-generation process itself can be beneficial.

The benefit is that testing our plugins code becomes significantly easier and we are also able to adjust the way things work behind the scenes without altering the way that any object APIs we implement are used.

In Sexton’s article on this topic, he implemented a bridge that enables us to attach our general logic to a particular plugin, which we’ve implemented in the pattern below.

One of the other advantages of this pattern is that we don’t have to constantly repeat the same plugin initialization code, thus ensuring that the concepts behind DRY development are maintained. Some developers might also find this pattern easier to read than others.

1. Code
2. Usage

Further Reading

• “Using Inheritance Patterns To Organize Large jQuery Applications,” Alex Sexton
• “How to Manage Large Applications With jQuery or Whatever” (further discussion), Alex Sexton
• “Practical Example of the Need for Prototypal Inheritance,” Neeraj Singh
• “Prototypal Inheritance in JavaScript,” Douglas Crockford