I’ve been out of town for two weeks, so I’m just now catching up on all my javascript reading. Here’s the first of what will no doubt be a flurry of posts today.

I found this linked to via ajaxian. It’s a great article on object oriented practices using javascript. A lot of what Jonathan Snook goes over in his article on Objectifying Prototype is taken care of for you using Prototype.js’s Class.create methods and Object.extend methods. I highly recommend reading up on these functions (linked to at the bottom of the article). But this overview is really a great primer for writing class based javascript. Read the rest of this entry »

There are several examples of the concept of “lazy loading” out there. Dojo is probably the most well known, but the thing I don’t like about Dojo is that the initial include is so expensive (127K!!! – and that’s before you include any widgets).

While digging through ajaxpatterns.org I found this entry on On-Demand Javascript that outlines the concept really well, illustrates how one would implement it, and also points to a couple of implementatins already out there (including Dojo). It’s worth a quick read, especially as we start considering standardizing some of our code libraries. Read the rest of this entry »

At the bottom of the prototype tutorial I just posted is this great article on Encytemedia.com that digs into the Enumerable and Hash functions of the library in greater detail. There’s a lot of great stuff in here.

each and friends

I used to find myself writing a lot of for loops. Although, Prototype doesn’t by any means eliminate the need to do for loops, it does give you access to what I consider to be a cleaner, easier to read method in each.

for(var i = 0; i < F.Numbers.length; i++) {
  logger.info(F.Numbers[i]);
}

each allows us to iterate over these objects Ruby style.

F.Numbers.each(function(num) {
  logger.info(num);
});

//Output
0
1
4
5
98
32
12
9

each takes one argument, the iterator or block in Ruby terms. This iterator is invoked once for every item in the array, and that item along with the optional index is passed to the iterator. So if we also needed the index we could do something like the code below.

F.Numbers.each(function(num, index) {
  logger.info(index + ": " + num);
});

//Output
0: 0
1: 1
2: 4
3: 5
4: 98
5: 32
6: 12
7: 9

Another snippet via Ajaxian:

A Javascript tip from Chris Heilmann, who reckons the object literal is “pretty close to sliced bread”. Replace:

var commonSense=null;
var standardsCompliance=“50%”;
function init(){
// code
}
function doStuff(){
// code
}
function doMoreStuff(){
// code
}

with the object literal form:

awesome={
commonSense:null,
standardsCompliance:“50%”,
init:function(){
// code
},
doStuff:function(){
// code
},
doMoreStuff:function(){
// code
}
}

Read the rest of this entry »

Over at webreference.com they have an article about loading javascript dynamically as you need it. Basically, you would have a server side applet that was the gateway to all your scripts. This you could query and it would return the javascript that you required to run your app.

I’ve been thinking along these same lines since I read about jspkg, which looks like it does exactly this. Developers could write large javascript libraries without worrying about browser load for specific apps. We could organize this code into convenient libraries that can be shared among us, and then when we develop an app, we just include the functions we require. Thoughts?