3

Titanium で iPhone/Android アプリの作成を学んでいます。Alloy MVC フレームワークを使用しています。DOM などにアクセスするための HTML の単純なスクリプトを除いて、これまで JavaScript を使用したことがなかったので、これまでコードを構造化する必要はありませんでした。

現在、Titanium では、多くの JS コードを使用する必要があり、コードを構造化する方法を探していました。基本的に、プロトタイプ、名前空間、および関数内の関数の 3 つの方法を見つけました。

それぞれの簡単な例:

プロトタイプ:

NavigationController = function() {
    this.windowStack = [];
};

NavigationController.prototype.open = function(windowToOpen) {
    //add the window to the stack of windows managed by the controller
    this.windowStack.push(windowToOpen);

    //grab a copy of the current nav controller for use in the callback
    var that = this;
    windowToOpen.addEventListener('close', function() {
        if (that.windowStack.length > 1)
        {
            that.windowStack.pop();
        }
    });

    if(Ti.Platform.osname === 'android') {
        windowToOpen.open();
    } else {
        this.navGroup.open(windowToOpen);
    }
};

NavigationController.prototype.back = function(w) {
    //store a copy of all the current windows on the stack
    if(Ti.Platform.osname === 'android') {
        w.close();
    } else {
        this.navGroup.close(w);
    }
};

module.exports = NavigationController;

次のように使用します。

var NavigationController = require('navigator');
var navController = new NavigationController();

名前空間(または、そのようなものだと思います。me = {} を使用しているため):

exports.createNavigatorGroup = function() {
    var me = {};

    if (OS_IOS) {   
        var navGroup = Titanium.UI.iPhone.createNavigationGroup();  
        var winNav = Titanium.UI.createWindow();
        winNav.add(navGroup);

        me.open = function(win) {
            if (!navGroup.window) {
                // First time call, add the window to the navigator and open the navigator window
                navGroup.window = win;
                winNav.open();
            } else {
                // All other calls, open the window through the navigator
                navGroup.open(win);
            }
        };

        me.setRightButton = function(win, button) {
            win.setRightNavButton(button);
        };

        me.close = function(win) {
            if (navGroup.window) {
                // Close the window on this nav
                navGroup.close(win);
            }
        };
    };

    return me;
};

次のように使用します。

var ui = require('navigation');
var nav = ui.createNavigatorGroup();

関数内の関数:

function foobar(){
    this.foo = function(){
        console.log('Hello foo');
    }

    this.bar = function(){
        console.log('Hello bar');
    }
}

// expose foobar to other modules
exports.foobar = foobar;

次のように使用します。

var foobar = require('foobar').foobar
var test = new foobar();

test.bar(); // 'Hello bar'

そして今、私の質問は次のとおりです。コードをクリーンで明確に維持するのに適しているのはどれですか? プロトタイプは明確で、読みやすい/維持しやすいようです。名前空間は私を少し混乱させますが、「利用可能」にするために最初の関数を実行するだけで済みます(宣言中に new を使用しないでください。オブジェクト?名前空間?「私」を返すためだと思います)。最後に、関数内の関数は最後の関数と似ているため、正確な違いはわかりませんが、メイン関数のみをエクスポートし、後で使用できるようにすべての内部関数を使用できるようにするのに役立ちます。

最後の 2 つの可能性は同じかもしれませんが、私は概念をめちゃくちゃにしています。

コードを構造化し、他のモジュールや独自のモジュール内で関数を使用できるようにするための良い方法を探していることを思い出してください。

明確にしていただければ幸いです。

4

1 に答える 1