November 5th, 2007 by Aaron N.
The d’bug blog has a nice little post on javascript shorthand that’s worth looking at if you don’t know these tricks. Stuff like declaring variable defaults with the logical OR or using ternary , etc. One thing to be careful of is type coercion. Basically if you say “if (x) …” you can get a false evaluation if x is an empty string, null, zero, or false. Check out the mootools functions $chk, $pick, and $defined for easy ways to avoid these kinds of things. You can also express conditionals using === and !== to ensure you are evaluating for the right condition.
/*
-----------------------------------------------
Conditional Shorthand 1
-----------------------------------------------
If "a" is not defined, or is not equal to true,
then "a" is equal to "b".
Longhand:
var a, b;
if ( !a ) {
a = b;
}
Shorthand:
*/
var a, b;
a = a || b;
/*
-----------------------------------------------
Conditional Shorthand 2
-----------------------------------------------
If some condition is equal to true,
then "a" is equal to "b", or else
"a" is equal to "c".
Longhand:
var a, b, c;
if ( true ) {
a = b;
} else {
a = c;
}
Shorthand:
*/
var a, b, c;
a = ( true ) ? b : c;
Check out the whole article »
Posted in Best Practices, Code Snippets, Organizing Code | Comments Off
June 19th, 2007 by Aaron N.
Jonathan Snook has a nice write-up about using private methods in javascript.
With JavaScript, you can create private methods and properties using what Yahoo describes as the module pattern. Here’s the basic construct, including a private method:
MyObject = function(){
var privateMethod = function(){ /* do stuff */ };
var obj = {
publicProperty:5,
publicMethod:function(){ /* do stuff */ };
};
return obj;
}(); // run it right away
If you’re not familiar with this pattern, it’s really quite cool. It takes advantage of closures, allowing the public methods to access the private methods. I’ve been using this approach in my recent work and it feels nice and works well.
Posted in Code Snippets, Examples, Organizing Code | Comments Off
March 20th, 2007 by Aaron N.
Just today I was asked over in the Mootools forums why we don’t create a dependency map like the one in Mootools. My answer there was, basically, that the common code we publish here on clientside is but a small portion of our library. Our javascript spans numerous teams, sites, and applications, and keeping a map like this by hand is probably not practical.
Then today on Ajaxian there’s this post about T.J. VanSlyke’s alterations to Dean Edward’s Base.js to allow him to generate a dependency map of all the classes he writes. This isn’t quite the same as mapping out file-by-file dependencies, but it’s a start. Considering that Mootools is largely based on Base.js, this shouldn’t be too hard to incorporate over there. Read the rest of this entry »
Posted in 3rd Party Libraries, MooTools, Organizing Code, Tools | Comments Off
January 23rd, 2007 by Aaron N.
There’s a nice article over at Snook’s today on writing clean, concise, and reusable javascript.
As a JavaScript developer, you are in many ways an environmentalist. JavaScript is a language unlike most other languages. For when it comes to JavaScript development, we must consider the mantra of the environmentalist: Reduce, reuse, recycle.
It’s a short article that’s worth reading. All of these concepts are in use in our new framework, and if you’re writing javascript for yourself or for CNET or whatever, it’s always good to keep these things in mind.
Posted in Optimization, Organizing Code | Comments Off
November 14th, 2006 by Aaron N.
Here’s a trick I learned from Valerio (author of Mootools) on how to handle options for classes and functions. After refactoring a couple of legacy scripts I thought I’d share for those of you who might not know it already. This example below uses the Mootools syntax for class creation, but the rest of it can be used even on its own I think. Read the rest of this entry »
Posted in Best Practices, CNET JS Standards, Code Snippets, Examples, MooTools, Optimization, Organizing Code, Reference | 4 Comments »
October 10th, 2006 by Aaron N.
Ok, so I’ve finished as much digging on this subject as I plan on doing (mostly because the pickings seem to be rather slim). Here’s jsDoc – a javadoc implementation for javascript.
Comparing this library to NaturalDocs the choice seems to me to come down to two things: syntax and presentation. NaturalDocs gives you a really nice layout and a lot of flexibility in how you write your documentation inline, while jsDoc uses the same syntax as javadoc.
Does it matter if we use the same syntax as javadoc? Do we care if the output looks pretty and has a nicer interface? Which one? Spend a few minutes reading the documentation on each of these packages and sound off here, as the work on the global framework has gotten to the point where documentation is going to start to be the next thing that needs focus.
Posted in CNET JS Standards, Organizing Code | 1 Comment »
October 10th, 2006 by Aaron N.
I’ve been contemplating a javadoc style javascript documentation tool for a while. Not to write myself but rather to go find one because you just know they’re out there. Well, here’s one posted recently on Ajaxian. It looks pretty slick, but I’m curious about how well it deals with a broader context. Sure, it’ll parse a single js file and dump out some nice looking documentation (awesome), but what about an environment that relies on code from several libraries? Can you link across them? Can you collect them? I need to dig into it some more, but it’s a start.
Does anyone have any experience or knowledge of any other javadoc systems for javascript? Read the rest of this entry »
Posted in Organizing Code, Tools | Comments Off
October 3rd, 2006 by Aaron N.
Hi all,
It’s been a few days since I posted. I’ve been heads down on the project to create a global javascript framework for our sites (Redball, at least). I’ve finished this work (or at least gotten it to a releasable state) and I thought I’d share an update. I plan on documenting it extensively and providing a lot of examples (and teaching it) in the near future, but for those of you who are curious, you can peruse the library now. It’s mostly stable (we’re still tweaking and adding things) and you can just download them and read them if you want to see what’s in them.
They include a lot of functionality, are highly extendable, easily debuggable, and hopefully will be useful. The current framework file is about 30K, but Andy just turned me on to a more efficient javascript compressor that will bring that down to 19K. I can’t express how awesome it is to have this thing going out and it managing to pack in so much functionality in such a small package. Read the rest of this entry »
Posted in CNET JS Standards, MooTools, Optimization, Organizing Code, Reference | Comments Off
September 25th, 2006 by Aaron N.
I’ve been working on a global library for cnet javascript standards and I’ve got my first crack at it ready. I’m going to spend some time in the coming weeks working on documentation and examples, but for those of you interested, here’s a quick look at what’s in the collection. Read the rest of this entry »
Posted in CNET JS Standards, Code Snippets, Organizing Code, Reference | Comments Off
September 19th, 2006 by Aaron N.
via ajaxian (surprise):
Mike West has put some time into analyzing and understanding one of the more sticky issues in Javascript: scope.
Scope is one of the foundational aspects of the JavaScript language, and probably the one I’ve struggled with the most when building complex programs. I can’t count the number of times I’ve lost track of what the this keyword refers to after passing control around from function to function, and I’ve often found myself contorting my code in all sorts of confusing ways, trying to retain some semblance of sanity in my understanding of which variables were accessible where.
He has published his explorations as an article in Digital Web Magazine. In it he deals with the basics of scope; the this keyword in method calls, constructors, function calls and event handlers; the apply() and call() methods; and Prototype’s bind() extension to Function.
The article is illustrated throughout with code examples and includes a list of useful references at the end. A good addition to the family of online Javascript resources.
Posted in Best Practices, Code Snippets, Organizing Code, Reference | Comments Off