Advanced JavaScript Techniques

http://sixrevisions.com/javascript/6-advanced-javascript-techniques-you-should-know/

by cwan • 17 years ago

82 47 17 years ago

tptacek• 17 years ago

While nobody who's spent more than a couple weeks in jQ is going to learn anything from this, I am at least thrilled to see that this isn't an article about how to create animated dialog boxes and image carousels.

warfangle• 17 years ago

I take issue with his object literal example for function arguments. My rule of thumb is: if it's a required parameter, list it in the parameters. If it's optional, put it in an object literal argument - but DOCUMENT it in a comment at the head of the function. Using a lot of object literals as arguments can get very hairy very quickly if you don't keep track of them, and keeps your code from being self-documenting. By separating out your required and your optional parameters, you can easily see which are which.

In his namespace example, also, he uses the new Object() notation, which is not nearly as concise as var foo = {}, which does the same exact thing (similarly, var arr = [] is better than var arr = new Array()).

We could rewrite the entire namespace initialization block as:

var MY = (MY) ? MY : { CUSTOM : {} };

This sets the variable MY to itself if it exists, otherwise assign an object literal that has a member property CUSTOM that happens to be an empty object. You could now create a new function, say, MY.CUSTOM.foo = function() { alert('foo'); };

nkohari• 17 years ago

I use this function to create namespaces:

  var namespace = function(ns) {
    var scope = window;
    var tokens = ns.split(".");
    for (var idx = 0, len = tokens.length; idx < len; idx++) {
      var token = tokens[idx];
      scope = scope[token] = scope[token] || {};
    }
  };

For example: namespace("Zen.Ui");

yannis2• 17 years ago

Clever! How do you add your properties and methods? Another clever trick?

woadwarrior013• 17 years ago

YAHOO.namespace in YUI does the same thing, except that it creates everything under the YAHOO namespace.

willwagner2• 17 years ago

I use a similar technique when the number of optional arguments get out of control (i.e. if there is more than one optional argument). If you want to tight control, you can take advantage of the fact that a variable that is a function, the length member specifies the number of arguments declared as in:

(function(a,b,c){}).length == 3

Using that knowledge, you can do this at the top of a function:

if(arguments.callee.length > arguments.length){ throw "Required Parameter Missing"; }

yannis2• 17 years ago

Thanks for sharing your rule of thumb. I have observed that inevitably most objects/functions require three 'groups' of variables, more or less I use this pattern and I would appreciate your thoughts.

   - Defaults: Must be defined within the object literal
   - User Options : part of the function arguments 
                    (user can use an object literal,
                     anon function etc.) 
   - Settings : The actual mixin used by the methods

 function aProblem(arg1, arg2, options){ 
    // define the necessary defaults
    var defaults={} //define defaults
    // use a mixin algo to combine options and
    // defaults
    var settings = mixin(options, defaults); 
    // main function routines 
    var myObj={};

    return myObj={   
      property1 : settings.property1,
      property2 : settings.property2
    }
 }

solutionyogi• 17 years ago

Pardon me, but what's so advanced about these techniques? Anyone writing JavaScript for living should already know these things. You want to talk advanced? How about lazy function definition [http://peter.michaux.ca/articles/lazy-function-definition-pa...]? Or say actual advanced JavaScript? http://ejohn.org/apps/learn/

n-named• 17 years ago

There's also an issue with his myMethodValue. It's actually a global variable (try alert(window.myMethodValue). He should have used var myMethodValue within the function definition.

howardr• 17 years ago

Although it is helpful to the very junior developers at my company, the techniques are by no means "advanced." I suggest he change the title to "Javascript Basics Everyone Should Know."

It's not a terrible article, and he doesn't have bad advice, but as someone else points out in another comment he makes some pretty rookie mistakes (new Objects() instead of {})...

slice• 17 years ago

The lazy function technique can easily become an example of bad coding practice. Code needs to be easy to read, understand, and maintain. In most cases solution 2 is good enough, in all cases it's much simpler.

Advanced techniques should only be used when there is a clear justification to sacrifice simplicity. It is disastrous when developers use so-called "advanced" technique only to entertain themselves and show-off.

You are judged not by the niftyness of your code, but by the availability, maintainability, stability and functionality of your system as a whole.

kls• 17 years ago

Code needs to produce predictable results without bugs. All other qualities are secondary. Good code without bugs is well encapsulated and should work as a black box. Elegance is secondary to reliability. I am not saying that it is not important, just not as important as reliability. As a general rule of thumb less lines of code translates into higher reliability. I know it does not apply to every case but it is a good starting point.

slig• 17 years ago

Thanks for the ejohn's link. I've been reading his new book, and this pretty much all the code that he shows there. (as far as I've read)

ed2• 17 years ago

Better namespacing:

  function _namespace(){};
  function _namespaceLib(){};
  
  // Define your library methods
  
  (function(){
    var _private;
    this.getPrivate = function(){return _private};
  }).apply(_namespaceLib);
  
  // Wrap your code with the new scope
  
  (function(){ with (_namespaceLib) {
    // Do anything you want here
    var local = "only visible in local scope";
    
    // The library is now in scope
    alert( this.getPrivate() );
    
    // Define your external methods
    _namespace.myAPIMethod = function(){return local};
  }}).apply({});
  
  // _private and local are not accessible
  
  _namespace.myAPIMethod(); // returns "only visible in local scope"

apu• 17 years ago

I thought 'with' was generally frowned upon? Is it guaranteed to work correctly in all situations?

And why is this a better namespacing method?

ed2• 17 years ago

Yes, "with":

- adds an extra look-up when resolving scope

- creates code that sometimes isn't immediately obvious

But with this technique you basically get to forget you're writing code in a namespace. You can var myFunc; all you want without polluting the global. And you can put the library in a separate file and reference its exposed methods as if they were written in the body of your application.

pmichaud2• 17 years ago

Number 6 is terrible -- hacking together html from strings is just not the right away to do it. He should be generating the DOM elements and appending/nesting the generated elements appropriately, not concatenating a messy string.

willwagner2• 17 years ago

Unfortunately, if you are adding a lot of elements, your performance can really suffer by creating DOM elements. It helps if you "createDocumentFragment" but as far as I know, shoving a big string into the non-standard innerHTML member is still the fasted way to add a lot of content.

pmichaud2• 17 years ago

That might be relevant if you want to continually add many elements to the DOM, but that's rarely the case in most web applications. The benefit of using strings to shave milliseconds is heavily outweighed by the unreadable, error-prone code created when one tries to shoehorn markup into a concatenated string.

axod2• 17 years ago

That's true for IE, but not for good browsers. For firefox/safari/chrome it's negligable difference if not sometimes slightly faster to use the DOM methods.

Also, using DOM methods allows you to easier attach listeners, save references to DOM elements for later updates/use etc. That means less getElementById()'s later.

Writing HTML inside js code is just horrible (IMHO). Horrible ugly code. And obviously easier to have security issues if you're including non-sanitized user data.

#6 is a horrible idea.

As far as your JS code is concerned, HTML is a (horrible, ugly) serialization of the DOM. Manipulate the DOM programatically. Don't use HTML.

Jasber• 17 years ago

One solution I've used for storing small templates in HTML: http://ejohn.org/blog/javascript-micro-templating/

  <script type="text/html" id="user_tmpl">
    <% for ( var i = 0; i < users.length; i++ ) { %>
      <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
    <% } %>
  </script>

Quick tip: Embedding scripts in your page that have a unknown content-type (such is the case here - the browser doesn't know how to execute a text/html script) are simply ignored by the browser - and by search engines and screenreaders.

This is quick and dirty, but much more elegant than writing HTML in JS.

warp• 17 years ago

For anything slightly more involved I really like Pure as a javascript template engine, http://beebole.com/pure/.

Especially when working with something like json data generated elsewhere.

ams61102• 17 years ago

Best eye-opener I had on JavaScript is Douglas Crockford's site. www.crockford.com. Many folks here probably know of it, but if you've never perused that site you're missing something good.

samuraicatpizza• 17 years ago

Crockford is awesome. Here's one of my favorite pieces he wrote on his jslint javascript parser (written in javascript): http://javascript.crockford.com/tdop/tdop.html

ramen• 17 years ago

For-loops like "for (i=0;i<myLinkCollection.length;i++)" should always be written like "for (var i=..."), unless there's an explicit "var i;" declaration somewhere. Otherwise, this creates a global variable "i", which can lead to some very confusing bugs if another function is called that also references the global "i".

ams61102• 17 years ago

But don't make the mistake of assuming that when writing "for (var i=...)" that i is scoped to the loop block. JavaScript does not have block scope. It only has function scope, with the "Global Object" scope being the top level scope.

maxwell2• 17 years ago

Only with JS <1.7. Otherwise you get block scope by using 'let instead of 'var.

maxwell2• 17 years ago

You'll get better performance with

  for (var i=0, l=myLinkCollection.length; i<l; i++) { }

http://robertnyman.com/2008/04/11/javascript-loop-performanc...

WalkingDead• 17 years ago

Probably first time I am seeing a micro-optimization having some really significant impact on a micro-benchmark test.

woadwarrior013• 17 years ago

Regarding #6, Isn't it a better idea to do something like

['<h1>',text,'</h2>'].join('')

instead of

'<h1>'+text+'<h2>'

Something like the latter is generally frowned upon in Python because it increases the number of temporary objects that have to be allocated, I'm sure the same logic holds good for most if not all Javascript implementations as well.

gord3• 17 years ago

Are there any js frameworks/libs that do something like this on the client :

    render_as_dom(table(tr(td("one"), td("two"))));

I'd prefer to write code like this rather than have a mix of JS and html, with html rendering on the server.

tlrobinson2• 17 years ago

http://www.nonblocking.io/2009/09/dsl-for-generating-html-wi...

woadwarrior013• 17 years ago

Mochikit has this in Mochikit.DOM, which does this.

I wrote something like this for YUI.

http://bitbucket.org/woadwarrior/dombuilder/

moron4hire• 17 years ago

I love JavaScript as a language, there are some neat things in it (not the least of which is expando object, whoo), but there are much better tools than it for doing application development (even if we go no further than Flex or SilverLight, we've improved dramatically over JavaScript in terms of project management and toolchain availability). If you're worried about namespacing, then you're using the language with the intention of a real application programming language. There are other ways to get code to client in a web-accessible way that doesn't mean "AJAX everywhere!"

dmoney• 17 years ago

I don't understand #5. Using a library makes something a "Hybrid Application"?

davt4• 17 years ago

you guys should really check out: http://www.webreference.com/programming/optimize/speedup/cha...

I have been creating some pretty crazy interfaces in 3D Javascript. I try everything I read to see if its faster. I find that its resizing elements during an animation that really affect speed. Stopping event bubbling is pretty nice too. But things I didn't know like using reverse loops because comparing to "0" is faster than an int. or setting [i] into variable after the "++" so the whole length isnt processed over and over. What about using "Math." instead of (var calc = a1 * a2 / a3), var calc = Math.round((a1*a2)/a3); because using the preMthods in the dom is faster. These things really work and I saw my performance shoot through the roof!! My number one performance enhancer though? Dont use <img> tags. The way the browsers render <img> is different than (backgroun-image:url();) and takes much more out of the speed than using a CSS background.

davt4• 17 years ago

here is another really good one: http://home.earthlink.net/~kendrasg/info/js_opt/

davt4• 17 years ago

Also, if your using trigg based JS, having good math is important. A lot of the time if you can shorten your math into more elegant equations, you will see serious performance gains. Of course I sucked at math, still do, but I'm getting better. I now run a base set of equations and just manipulate the base equations when needed.

davt4• 17 years ago

And agreed, the 6 techniques are not that good. If your going for speed, dont expect ppl to read your code. It wont be readable. Animations are processor dependent and the code should be streamlined as possible to make it fast FOR THE PROCESSOR. It won't look like your average JS. It's a re-factor dance for me everytime. Like tuning a car, certain things work better for tuning Ferarris than they do for a Cadillac. (I don't have either) :) MOST IMPORTANT LEARN MATH!!! you now need all that calculous and trigg and geometry. You need matrices, you need x,y,z mapping. I need everything I thought I would never need...and more. Still learning

Advanced JavaScript Techniques

Related Stories