How to make the javascript code easy to maintenance

Question

All, I am working on a highly interactive web application which will need a lot of jquery or js code, And I'm finding that my code is becoming a little hard to maintain and is not all that readable. Sometimes even the author can't find the specified code.

So far what I had done for the clear code is below.

1. One js component in one js file .(for example. CustomTab.js is a tab component in my app.)
2. Using the templete to generate component HTML based on JSON.
3. Using Jquery UI.
4. Unobtrusive JavaScript.

Is there any other points I need pay attention? Anyway, Any suggestion or recommend technique for making js library/framework easy to miantanance is appeciated, thanks.

Answer 1

I could suggest you to use module pattern together with RequireJS to organize your JavaScript code. For the production you'll be able to use RequireJS optimizer to build your modules into one JavaScript file.

Also if you're expecting that your client-side application will be huge, consider to use some JavaScript MVC framework like Backbone.js together with the server-side RESTful service.

Answer 2

I use this namespacing pattern for my libraries:

MyLibrary.ListView.js:

var MyLibrary = MyLibrary || {};

MyLibrary.ListView = {

    doSomethingOnListView: function() {
        ...
        return this;
    },

    doSpecialThing: function() {
        ...
        return this;
    },

    init: function() {

        // Additional methods to run for all pages
        this.doSomethingOnListView();

        return this;
    }
};

Whichever page needs this:

<script type="text/javascript" src="/js/MyLibrary.ListView.js"></script>
<script type="text/javascript">
$(function() {
    MyLibrary.ListView
        .init()
        .doSpecialThing();
});
</script>

You can even chain methods if a certain page requires an additional function.

Answer 3

This is exactly the same question which I ask myself each time. I think there are few ways to get easy maintaining code.

• Contribute in javascript opensource projects and understand how they solved that problem. I think you can gather some unique solution from each project and common part of projects structure will answer to your question about maintenance.

• Use prepared solutions like backbone, knockout, ember or angularjs if I am not mistaken angular doesn't give you structure but provide you powerful tool for creating pages with less code. Also check todomvc for ready-made solutions.

• Read books and try to create some structure for your needs. It will be difficult and long but result (maybe few years later :)) will be awesome.

Answer 4

Currently I'm also working on a JS framework for my company. What I'm doing is I use OOP elements for JS. In other words I'm implementing similar code to C# libraries(not that similar, simulating will be the correct word). As an example in C# you use Microsoft.Window.Forms, so I can use JSOOP and use method extending and overriding to create the same scenario. But if you gone to far in your project converting your JS code to JSOOP will be time consuming.

use JSLint, this will validate your code and bring down to a readable, script engine friendly code. Though JSLint is very strict so you can use JSHint also.

using seperate file for each component is a good idea I'm doing it also.

If you like you can download the jQuery developers version and you can have a general idea how they created the framework. I learned lot of thing looking at jQuery framework!