管理CommonJS模块时出现问题

Question

I am using Titanium Appcelerator to develop apps using JavaScript. They have suggested to use the CommonJS approach. A brief example on CommonJS can be found here .

For the life of me, I cannot still figure out how to structure my code.

Example:

/* Homescreen.js */
exports.createHomescreen = function () {

    //load all required modules first
    var videoPlayer = require('ui/videoPlayerModule');

    var self = Ti.UI.createWindow({
        width:'100%',
        height:'100%'
    })

    var newPlayer = videoPlayer.createPlayer({
        width:100
        height:50
    });

    self.add(newPlayer);
    return self;
}

The videoPlayerModule

/* videoPlayerModule.js */
exports.createPlayer = function (object) {

    //load all required modules first
    var self = Ti.UI.createWindow({
        width:object.width,
        height:object.height
    });

    var exitVideoButton = Ti.UI.createButton({
        width:100,
        height:50
    });

    exitVideoButton.addEventListener('click',function(e){
        self.close();    //When this window is closed, the memory isn't freed.
        self = null;     //Still the memory isn't cleared
    });

    self.add(exitVideoButton);

    return(self);
}

I am having memory allocation problems because whenever I load a videoPlayer and close it, the memory is never cleared. If I open the videoPlayer again, the memory is allocated AGAIN. Because of this, my app's memory usage increases every time the videoPlayer is launched.

I know my way of thinking is not right. I am overlooking something very simple here. Can anyone let me know what am I not doing right?

Answer 1

This is happening because you are adding a Ti.UI.Window (created from videoPlayerModule.js), to another Ti.UI.Window (in Homescreen.js), which you should not be doing. Ti.UI.Window is a base container object, you never add it to anything (generally), so when you close the window, it still stays referenced as one of the children of the container window, so it never goes away. Your self = null; does nothing at this point.

You need to replace your Window in video player with a View, I would try something like this instead:

/* videoPlayerModule.js */
exports.createPlayer = function (object) {

    var self = Ti.UI.createView({
        width:object.width,
        height:object.height
    });

    var exitVideoButton = Ti.UI.createButton({
        width:100,
        height:50
    });

    exitVideoButton.addEventListener('click',function(e){
        self.hide();
    });

    self.add(exitVideoButton);

    return(self);
}

This is not a complete solution, as you still will have the view in memory, but it is a much much smaller footprint then a full fledged window, a better way to do this would be to create this once, then show() or hide() it when needed in the context of the Homescreen, another way would be to pass the parent and then remove the view from its parent when exited, but this solves your memory issue.