Prototype is surely among my favorite libraries when it comes to OOP. To be honest, Prototype provides many methods for handling OOP, more than jQuery. One of its best features is the addMethods() method of the Class interface. The fact is that Prototype implements natively most of the well-known JavaScript design patterns used to create objects, so many of its methods use these patterns under the hood. This method features the following:
In this post I'm going to show you how to use jQuery with Prototype and Script.aculo.us. Since both jQuery and Prototype share the same shorthand identifier (namely the dollar sign, $), we have to make sure that there will be no conflicts between these two libraries. To accomplish this task, we'll use the jQuery utility function noConflict() for that purpose. Also note that if you're using the Google's CDN system to load Script.aculo.us, the syntax ?load=effects and similar will not work, so you'll have to manually reference all the components of this library.
Here's how to load our libraries:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/effects.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Done that, the first thing to do is to call the jQuery's noConflict() function:
jQuery.noConflict();
Then we can create our custom namespace and embed the Prototype's notation there:
var myAPP = {
proto: $,
scale: function() {
new Effect.Scale('test', 105);
}
};
Note that we've also created a method that makes use of a Script.aculo.us effect. Then we can put it all together:
jQuery(document).ready(function() {
myAPP.proto('test').setStyle({backgroundColor: 'orange', width: '200px', height: '200px'});
window.setTimeout(function() {
myAPP.scale();
window.setTimeout(arguments.callee, 1000);
}, 1000);
});
As you can see below, everything works as expected.
My first love among JavaScript frameworks was Prototype. This framework has many features that I find even more useful than jQuery's ones. For example, the fact that you work with interface-like components instead of doing everything inside a wrapper or chain is sometimes preferable, especially when you want to move in and out the DOM.
Although I eventually switched to jQuery almost a year ago, I've been using also Prototype for a very long time. During this period, I noticed some differences between jQuery and Prototype that I'd like to share here. First, Prototype is a JavaScript framework, whereas jQuery is actually a JavaScript library. A framework is something more related to a certain level of abstraction and actually more suitable for very complex applications than a library. On the other hand, a library is certainly a tool that turns out to be very useful for practical scenarios, such as leveling the differences between browser implementations, adding effects, handling events and so on.
In that vein, jQuery is more user-friendly than Prototype. As its motto says ("Do more with less"), jQuery wants explicitly make the life easier for web developers. Instead, Prototype wants to create an ideal background to build up complex web applications. If you notice, jQuery has the concept of plugins, but not Prototype, because the library in itself cannot provide all the features needed. Second, if we look at both libraries from an OOP perspective, jQuery uses this approach behind the scenes, actually wrapping everything inside a global namespace (the alias $), thus creating a selector chain.
On the contrary, Prototype uses an interface-based approach, so that you can either choose to use its custom methods or the DOM core methods. For example:
var divs = $('test').getElementsByTagName('div');
As you can see, the $ alias is not a wrapper but only a method to reference an element. In fact, you can actually attach a DOM core method to it. Instead, in jQuery you can do it in two ways:
var divs = $('#test div').get();
var divs = $('#test')[0].getElementsByTagName('div');
This happens because in jQuery everything is bound to a chain, so you have to move your code outside that chain. Another example concerns the handling of effects. Prototype uses interfaces, so you have something like Element.hide(element), whereas in jQuery you can write $(element).hide().
To summarize: both jQuery and Prototype are really powerful tools, but they're different in concept and design.
Check out this SlideShare Presentation: