• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

I need tips to better organize my code

 
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Reading HeadFirst Javascript Programming gave me lot of ideas for future projects. I then began working on a Chrome app for my kids (a JS app to let them practice additions and subtractions).

However, the more code I add to my JS script file, the harder it gets to maintain (in fact, it's a total mess).

Do you have any suggestions or best practices to follow in such cases? Should I split my script in multiple files, sort my functions alphabetically or name my functions in standard ways?

Thanks in advance,
 
author
Posts: 200
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Louis-Philippe,
Great question.

If you look at what we did with the Battleship example in Chapter 8, you'll see some ideas of how you can organize code. The technique we use there also seems to be common in a variety of JavaScript libraries and frameworks. And that is to use objects to organize code. So, for instance, if you have several functions that are set up to handle validating form inputs, then you can create an object, FormData, and make methods within that object. So think of the object as a way of grouping like code together. Then of course when you need to use that function, you'll use FormData.functionName to do it.

Another thing you can do is nest functions. Let's say you have a function that needs to use several other "helper" functions that aren't used outside the main function. You can nest the helper functions inside the main function to "hide" them away from the other code, and also keep things organized. Two downsides to this: one is that if you end up needed to use a helper function elsewhere you'll have to change that organization strategy, and two, every time you call that main function, those nested functions have to be recreated, which is slower than if they are created once at the top level.

I do think splitting up functions by functionality into different files can be helpful. Just keep in mind that you still only have one global space! So don't forget about global variable names potentially clashing etc. That's one reason why keeping global variables at the top of your file can be helpful (so it's easy to see what they are across multiple files).

I'd say code organization is a big issue with JavaScript! Some frameworks help with that (some maybe a little overkill, putting every single function into a different file! yikes). E.g. If you learn BackboneJS (http://backbonejs.org), you'll find you group your code into modules, which can help organize.

Also, check out RequireJS (http://requirejs.org) which provides a way to create modules also. As I mentioned in another thread, ECMAScript 6 will have modules, but it's not likely these will be available in the core language in browsers for at least a couple more years, so using a library like RequireJS in the meantime can help.

Elisabeth




 
Louis-Philippe Breton
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thank you Elizabeth for the detailed response, I'll try your advices, Requirejs seems also really interesting.

Louis-Philippe.
 
I'm gonna teach you a lesson! Start by looking at this tiny ad:
a bit of art, as a gift, that will fit in a stocking
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic