Ask HN: Javascript best practices? • Hacker News Board

Re: Ask HN: Javascript best practices?

#21

Post by tyrmored » Tue, Sep 22, 2009, 3:03 AM UTC

n8agrin wrote: post #16

Always use "var" to define a variable, unless you know exactly what you are doing. e.g.: var foo = 'bar'; When you don't use "var" the Javascript interpreter breaks out of the current scope and continues to do so all the way until it hits the final global scope (generally the window object in browsers). If it does not find the variable, it then defines it. If it does find it, it will trample the found variable with t…

Also, "scope" means inside a function, and not inside a control block (e.g. for loops).

I would estimate global variables will cause at least 50% of the headaches an intermediate JavaScript developer experiences. It's particularly bad when you're dealing with rows of data, for example.

Get in the habit of declaring every variable in the top line of the function concerned before you use it. If you haven't already mastered closures, this will make things a lot easier for you.

Re: Ask HN: Javascript best practices?

#22

Post by seanlinmt » Tue, Sep 22, 2009, 3:08 AM UTC

I found this quite good for constructing tidy javascript code, http://ejohn.org/apps/learn/

I haven't had time to look into this but there's also a project called Doloto to help optimise your javascript, http://research.microsoft.com/en-us/projects/doloto/

Re: Ask HN: Javascript best practices?

#23

Post by erlanger » Tue, Sep 22, 2009, 3:25 AM UTC

* Comment with JSDoc style

* Auto-build docs and script for development and production environemnts (easy to concatenate and then pipe this to YUI Compressor)

* Use an MVC project organization or something like-minded. You can't just throw files representing widgets around.

* Write unit tests. JSUnit and SrewUnit (I prefer the latter) work well for this.

* Format your code nicely (this goes for any code but I find a ton of terribly formatted JS)

* Use one common library for any core object prototype changes (on Element, Array, Function, etc.) and don't modify them further.

* JSLint code you're unsure about.

* The best way to dynamically load code is just to write script tags to the document.

A few style-concerned ones...

* Don't use the module pattern. It's rarely appropriate, hiding methods does nobody good, just use a closure.

* Only create elements when absolutely necessary and destroy ones that you will no longer use. There's no garbage collector in that regard.

* Use a routing system to manipulate and read document.location.hash (and the browser history) so that pages have real URLs and navigate like webpages.

* Callbacks and delegates are great, they should be used all over the place.

* Use events and listeners to connect the parts of your app.

Re: Ask HN: Javascript best practices?

#24

Post by adrianwaj » Tue, Sep 22, 2009, 3:28 AM UTC

Obfuscate variable and function names with junk words. On Windows, Jasob was easily the best http://www.jasob.com/ for it (I tried using many others including online offerings). You need to do this if worried about others seeing and using your code, especially competitors.

edit: am I stupid? But when you obfuscate, you also radically shorten the length of a JS file, thus making it quicker to download: EG:

function c(g){var m=0;while(m<g.length){var r=g[m];r.l=d(r.n,r.o);if(r.j==true){ r.k=e(r.n,r.o,r.l);}else{r.k=0;}r.t=f(r.l+r.k);m++;}}

Re: Ask HN: Javascript best practices?

#25

Post by dan_sim » Tue, Sep 22, 2009, 3:38 AM UTC

3 years ago, I started a blog about javascript called Javascript Kata at http://www.javascriptkata.com . I will try to write more and more about best practices and new ways of doing things.

Re: Ask HN: Javascript best practices?

#26

Post by irrelative » Tue, Sep 22, 2009, 4:19 AM UTC

Just my 2 cents: Javascript gives you plenty of rope to hang yourself with. Personally, I try to stay away from prototypical objects unless the style fits very cleanly with what I'm trying to do. Otherwise,the best way I've found to keep my sanity is to pick whatever language you're developing the backend with, and use as many conventions you've established there as possible.

For me, this means my Javascript looks more like Python -- it can be a little weird, but switching between the frontend and the backend is easier that way.

I'd also recommend using objects as namespaces if you're not dealing with prototypical objects. It makes grepping easier - you can search for 'Graphs.init' instead of 'init' in this example:

var Graphs = {

    state_variable: null, // store global state somehow

    init: function() {
        // Some initialization code
    },

    refresh: function(img_element, url) {
        // some code to refresh the src url
    }

};

Re: Ask HN: Javascript best practices?

#27

Post by mr_cheese » Tue, Sep 22, 2009, 4:25 AM UTC

erlanger wrote: post #23

* Comment with JSDoc style * Auto-build docs and script for development and production environemnts (easy to concatenate and then pipe this to YUI Compressor) * Use an MVC project organization or something like-minded. You can't just throw files representing widgets around. * Write unit tests. JSUnit and SrewUnit (I prefer the latter) work well for this. * Format your code nicely (this goes for any code but I find a…

* For unit tests, also check out Jasmine.

* +1 on not using the module pattern.

Re: Ask HN: Javascript best practices?

#28

Post by mark_h » Tue, Sep 22, 2009, 4:38 AM UTC

alexitosrv wrote: post #10

mindviews wrote: post #2

I like to use separate files for organization during development and then merge and minify for deployment. Just make sure you have an automated process because you don't want to make mistakes doing it by hand.

Any tool suggestions for the job of minifying and deployment?

Already mentioned, but django-compress if you're using django:

http://code.google.com/p/django-compress/

Re: Ask HN: Javascript best practices?

#29

Post by entelarust » Tue, Sep 22, 2009, 4:40 AM UTC

erlanger wrote: post #23

* Comment with JSDoc style * Auto-build docs and script for development and production environemnts (easy to concatenate and then pipe this to YUI Compressor) * Use an MVC project organization or something like-minded. You can't just throw files representing widgets around. * Write unit tests. JSUnit and SrewUnit (I prefer the latter) work well for this. * Format your code nicely (this goes for any code but I find a…

Great points

Just curious. For large scale projects, do you suggest building on top of existing javascript libraries (i.e. prototype, jQuery, mootools, etc)?

Re: Ask HN: Javascript best practices?

#30

Post by jcoby » Tue, Sep 22, 2009, 4:43 AM UTC

alexitosrv wrote: post #10

mindviews wrote: post #2

I like to use separate files for organization during development and then merge and minify for deployment. Just make sure you have an automated process because you don't want to make mistakes doing it by hand.

Any tool suggestions for the job of minifying and deployment?

Sprockets looks promising if you're using Ruby. Haven't had a chance to use it in a project yet. http://github.com/sstephenson/sprockets