JavaScript Framework Matrix

Methodologies

Prototype: Ruby
MochiKit: Python
YUI: PHP
jQuery: XPath

DOM Traversal

Prototype:

$$("table > tr")

jQuery:

$("div > p:nth-child(odd)")

Dojo:

dojo.query("table tr:nth-child(even)")

Yahoo UI:

Mootools:

ExtJS:

DOM Modiﬁcation

Prototype:

Insertion.Bottom("list","<li>Another item</li>");

jQuery:

$("#li").append("<li>An item</li>");

Dojo:

Yahoo UI:

Mootools:

ExtJS:

InnerHTML Modiﬁcation

Prototype:

jQuery:

$("div").html("<span class='red'>Hello <b>Again</b></span>");

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Text Modiﬁcation

Prototype:

jQuery:

$("p").text("<b>Some</b> new text.");

Dojo:

Yahoo UI:

Mootools:

ExtJS:

DOM Duplicate Node Removal

Prototype:

jQuery:

var divs = $("div").get();

// add 3 elements of class dup too (they are divs)
divs = divs.concat($(".dup").get());
$("div:eq(1)").text("Pre-unique there are " + divs.length + " elements.");

divs = $.unique(divs);
$("div:eq(2)").text("Post-unique there are " + divs.length + " elements.").css("color", "red");

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Function Chaining

Prototype:

jQuery:

$("div.fademeout").fadeOut();

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Document Ready Handler

Prototype:

jQuery:

$(document).ready(function()
    {
    ...
    }
);

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Extending Framework Functions

Prototype:

jQuery:

$.fn.samplefunc = function() { Return this.each( function(){code goes here}); }
$(‘#sample’).samplefunc().addClass(‘NewClass’);

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Framework Conflict Resolution

Prototype:

jQuery:

jQuery.noConflict();

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Classname Selector

Prototype:

jQuery:

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Child Selector

Prototype:

jQuery:

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Attribute Selector

Prototype:

jQuery:

$("a[href^http://]").attr("target","_blank");

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Multiple Attribute Selection

Prototype:

jQuery:

$("input[id][name$='man']").val("only this one");

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Classname Modification

Prototype:

Element.addClassName('element', 'className');

jQuery:

$('#element').addClass('className');

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Group Classname Modification

Prototype:

$$('.element').each(function(node) {
  Element.addClassName(node, 'className');
  }

jQuery:

$('.element').addClass('className');

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Element Replacement

Prototype:

jQuery:

$('#divToReplace') .replaceWith('<p>This is new Data</p>') .remove();

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Multiple Element Selection

Prototype:

jQuery:

var list = $("div,p,span").map(function ()
  {
  return this.tagName;
  }
).get().join(", ");

$("b").append(document.createTextNode(list));

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Positional Selector

Prototype:

jQuery:

Dojo:

Yahoo UI:

Mootools:

ExtJS:

String Trimming

Prototype:

jQuery:

str = $.trim(str);

Dojo:
Yahoo UI:
Mootools:
ExtJS:

HTML String Creation

Prototype:

jQuery:

$("<div>")
$("<div class='blurb'>Hey</div>")

Dojo:
Yahoo UI:
Mootools:
ExtJS:

HTML Insertion

Prototype:

jQuery:

$("div").append("<span>Yes</span>");

Dojo:
Yahoo UI:
Mootools:
ExtJS:

Wrapped Set Methods

Prototype:

jQuery:
Dojo:
Yahoo UI:
Mootools:
ExtJS:

Array Type Conversion

Prototype:

jQuery:

var arr = $.makeArray(document.getElementsByTagName("div") );
arr.reverse();
$(arr).appendTo(document.body);

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Array Type Checking

Prototype:

jQuery:

$.isArray(navlist)

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Form Field Selection

Prototype:

jQuery:

function displayVals()
  {
  var singleValues = $("#single").val();
  var multipleValues = $("#multiple").val() || [];
  $("p").html("<b>Single:</b> " + singleValues + " <b>Multiple:</b> " + multipleValues.join(", "));
  }

$("select").change(displayVals);
displayVals();

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Form Field Updating

Prototype:

jQuery:

$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1","check2", "radio1" ]);

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Event Delegation

Prototype:

jQuery:

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Event Binding

Prototype:

Event.observe("button","click", function(){ alert("Thanks for the click!"); });

jQuery:

$("div").click(function(){ alert("div clicked"); });

Dojo:

dojo.connect(dojo.byId("mylink"), "click", function(){ alert("Link clicked"); });

Yahoo UI:

YAHOO.util.Event.addEventListener("list", "click", function(){ alert("List Clicked"); });

Mootools:

ExtJS:

Custom Events

Prototype:

document.observe("event:foo", function(e){ ... }); $("nodeId").fire("event:foo", { data: "thinger" });

jQuery:

$(document).bind("foo", function(e, data, arg){ ... });
$(document).trigger("foo", [{ data: "thinger"}, "second"]);

Dojo:

dojo.subscribe("/foo", function(e, arg){ ... }); dojo.publish("/foo", [{ data: "thinger"}, "second arg"]);

Yahoo UI:

Mootools:

ExtJS:

Table Striping

Prototype:

jQuery:

$("tr:nth-child(odd)").addClass("odd");

Dojo:

Yahoo UI:

Mootools:

ExtJS:

AJAX Error Handling

Prototype:

jQuery:

$("#msg").ajaxError(function(event, request, settings)
  {
  $(this).append("<li>Error requesting page " + settings.url + "</li>");
  }
);

Dojo:

Yahoo UI:

Mootools:

ExtJS:

AJAX Auto-Refresh

Prototype:

new Ajax.PeriodicalUpdater('items', '/items',
  {
  method: 'get', frequency: 3, decay: 2
  }
);

jQuery:

Dojo:

Yahoo UI:

Mootools:

ExtJS:

AJAX with JSON

Prototype:

jQuery:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",

function(data)
  {
  $.each(data.items, function(i,item)
    {
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 )
      {
      return false;
      }
    }
   );
  }
 );

Dojo:

dojo.io.bind({ url: \"test.html\", method: \"get\", mimetype: \"text/html\", load: function(type, data) { dojo.byId("results").innerHTML = data; } });

Yahoo UI:

YAHOO.util.Connect.asyncRequest( 'GET', "test.html", function(data){ YAHOO.util.Dom.id("results").innerHTML = data; } );

Mootools:

ExtJS:

AJAX with HTML

Prototype:

new Ajax.Request("test.html", { method: "GET", onComplete: function(res){ $(‘results’).innerHTML = res.responseText; } });

jQuery:

$("#results").load("test.html");

Dojo:

dojo.io.bind({ url: \"test.html\", method: \"get\", mimetype: \"text/html\", load: function(type, data) { dojo.byId("results").innerHTML = data; } });

Yahoo UI:

YAHOO.util.Connect.asyncRequest( 'GET', "test.html", function(data){ YAHOO.util.Dom.id("results").innerHTML = data; } );

Mootools:

ExtJS:

AJAX with XML

Prototype:

jQuery:

$.get("test.xml", function(xml){ $("user", xml).each(function(){ $("<li>").text( $(this).text() ) .appendTo("#userlist"); }); });

Dojo:

Yahoo UI:

Mootools:

ExtJS:

On-Demand Script Loading

Prototype:

jQuery:

$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Animation

Prototype:

jQuery:

$("#menu").slideDown("slow");

Dojo:

dojo.fadeOut({ node: dojo.byId("list"), duration: 500 });

Yahoo UI:

new YAHOO.util.Anim("list", { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut );

Mootools:

ExtJS:

Object Feature Detection

Prototype:

jQuery:

if ($.support.opacity)
  {
  $(this).toggleClass("highlight", count++ % 3 == 0);
  }

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Object Serialization

Prototype:

jQuery:

var params = { width:1680, height:1050 };
var str = jQuery.param(params);
$("#results").text(str);

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Form Serialization

Prototype:

jQuery:

function showValues()
  {
  var str = $("form").serialize();
  $("#results").text(str);
  }
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);

showValues();

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Event Listener Removal

Prototype:

Event.stopObserving(someElement);
Event.purgeObservers = function(element, includeParent){
  Element.select(element, "*").each(Event.stopObserving);

  if ( includeParent )
    {
    Event.stopObserving( element );
    }
  };

jQuery:

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Plugin Naming Conventions

Prototype:

jQuery:

jquery.myplugin.js

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Packaging

Prototype:

jQuery:

Dojo:

dojo.provide("foo.bar.Baz"); dojo.require("dojox.dtl");

Yahoo UI:

Mootools:

ExtJS:

Named Data Storage

Prototype:

jQuery:

var obj = jQuery.data($("#target").get(0), "pluginname", {});

Dojo:

Yahoo UI:

Mootools:

ExtJS:

Form Validation

Prototype:

jQuery:

<script src="/jquery/jquery.js"></script>
<script src="/jquery/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>

<body>

<form id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>

Dojo:

<label for="firstName">First Name: </label>
<input type="text" id="firstName" name="firstName"

  dojoType="dijit.form.ValidationTextBox"
  required="true"
  propercase="true"
  promptMessage="Enter first name."
  invalidMessage="First name is required."
  trim="true"
>

Yahoo UI:

YAHOO.namespace("extension");
(function() {
  var _regExp = {
      email : /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
      cnPhone : /^(\d{3,4}-)\d{7,8}(-\d{1,6})?$/,
      cnMobile : /^1[3,5]\d{9}$/,
      yid : /^[a-z][a-z_0-9]{3,}(@yahoo\.cn)?$/,
      date : /^\d{4}\-[01]?\d\-[0-3]?\d$|^[01]\d\/[0-3]\d\/\d{4}$|^\d{4}?[01]?\d?[0-3]?\d[??]$/,
      integer : /^[1-9][0-9]*$/,
      number : /^[+-]?[1-9][0-9]*(\.[0-9]+)?([eE][+-][1-9][0-9]*)?$|^[+-]?0?\.[0-9]+([eE][+-][1-9][0-9]*)?$/,
      alpha : /^[a-zA-Z]+$/,
      alphaNum : /^[a-zA-Z0-9_]+$/,
      urls : /^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/,
      chinese : /^[\u2E80-\uFE4F]+$/,
      postal : /^[0-9]{6}$/
    }

Mootools:

<script type="text/javascript" src="/js/mootools/core.js"></script>
<script type="text/javascript" src="/js/mootools/more.js"></script>
Attach FormCheck to your HTML document

<script type="text/javascript" src="/js/formcheck/lang/en.js"> </script>
<script type="text/javascript" src="/js/formcheck/formcheck.js"> </script>
Link the desired theme

<link rel="stylesheet" href="/js/formcheck/theme/classic/formcheck.css" type="text/css" media="screen" />
Instantiate FormCheck class for the given form

<script type="text/javascript">
    window.addEvent('domready', function(){
        new FormCheck('myform');
    });
</script>

ExtJS:

Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, new Ext.form.TimeField({
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            })
        ],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

References

Prototype vs Pure JavaScript
Global Object Pollution among Frameworks
Hacking with YUI
Glow JavaScript Framework Overview
Gravey JavaScript Framework Docs
YUI Library Portal
jQuery API Reference
Evented Programming with jQuery
Qooxdoo API Viewer
Mootools Docs
Dojo API Reference
ExtJS API Reference
Ext Core Manual
ExtJS for jQuery Developers
PrototypeJS API Reference
Mochikit Docs
jQuery Overview
No Empty Selector in jQuery
Mapstraction Library
DateJS Library
Canvas 3D Library
APE JavaScript Library
NWMatcher Selector Library
JavaScript Plugins
Learn 3 Excellent JavaScript Libraries at Once
JavaScript Framework Comparison Articles

TrackBack URI

December 2009
S	M	T	W	T	F	S
« Oct
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.

Paul Sweatte