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 being 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 ponent in one js file .(for example. CustomTab.js is a tab ponent in my app.)
2. Using the templete to generate ponent HTML based on JSON.
3. Using Jquery UI.
4. Unobtrusive JavaScript.

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

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 being 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 ponent in one js file .(for example. CustomTab.js is a tab ponent in my app.)
2. Using the templete to generate ponent HTML based on JSON.
3. Using Jquery UI.
4. Unobtrusive JavaScript.

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

• javascript

• Good question.I'll hang around to see what replies this post gets! ;-) – Harsha Venkataramu Commented Feb 27, 2013 at 5:51
• 1 Also you may try jquery cdn so that you may remove the jquery file from your javascript folders – Prateek Commented Feb 27, 2013 at 5:51
• Why do you say that your code is being difficult to maintain? What specific problems are you running into? Specifically, why can't the author find the code? Are there any more details that could help us? – MattDiamant Commented Feb 27, 2013 at 5:54
• @pKs For jquery main file ,we can do like what you say. But for using the custom download jquery file. Can we do that ?thanks. – Joe.wang Commented Feb 27, 2013 at 5:57
• That depends on how you have chosen the approach. If I were you then I would try GWT to manage javascipt for me and all stuff like that. – Prateek Commented Feb 27, 2013 at 5:59

4 Answers 4

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.

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.

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 mon 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.

Currently I'm also working on a JS framework for my pany. 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 ponent 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!