Cleaning up a large piece of Javascript code

Question

I am writing an application in Titanium for Android. I have a lot of code in a single JS file. I would like to know if there is any function like php's include to break the code into multiple files and then just include them.

Thanks

Answer 1

Use the CommonJS / RequireJS approach, specifically the require command. This is the (strongly) recommended way for dealing with large systems in Titanium, and is well documented on their website, along with many best practices for dealing with JavaScript modularization specific to Titanium. Here is the documentation from Titanium on this.

For example, to create a module that encapsulates a 'view' of some kind, put it in a file named MyCustomView.js with this content:

// MyCustomView.js
function MyCustomView(message) {
    var self = Ti.UI.createView({
        backgroundColor : 'red'
    });
    var label = Ti.UI.createLabel({
        text : message,
        top : 15,
        .... // Other initialization
    });

    // ... Other initialization for your custom view, event listeners etc.
    return self;
}

module.exports = MyCustomView;

Now you can easily use this module in another class, lets assume you put this in your /Resources folder, lets load the module inside app.js and add it to the main window.

// app.js
var MyCustomView = require('MyCustomView');
var myView = new MyCustomView('A message!');
Titanium.UI.currentWindow.add(myView);

You can use this approach to make custom views, libraries of reusable code, and anything else you would like. Another common thing would be to have a Utility class that has many different helper functions:

// Utility.js
exports.cleanString = function(string) {
    // Replace evil characters
    var ret = string.replace(/[|&;$%@"<>()+,]/g, "");
    // replace double single quotes
    return ret.replace(/"/g, "''");
}

This method can be easily used like this:

// app.js
var Utility = require('Utility.js');
Ti.API.info(Utility.cleanString('He##o W&orld$'));

Another common method I use it for is to implement the Singleton pattern as each module loaded is its own functional context, so if you like, you can have values that persist:

// ManagerSingleton.js
var SpriteManager = {
   count : 0
};

exports.addSprite = function() {
    SpriteManager.count++;
}

exports.removeSprite = function() {
    SpriteManager.count--;
}

You would load and use this much the same way as Utility:

// app.js
var ManagerSingleton = require('ManagerSingleton');
ManagerSingleton.addSprite();

This is something of a more elegant solution instead of using global variables. These methods are by no means perfect, but they have saved me a lot of time and frustration, and added depth, elegance, and readability to my Titanium code for Apps of all sizes and types.