钛设计建议

Question

在学习 Appcelerator Titanium 时，我正在构建一个以包含 2 个标签的窗口开头的应用程序。这两个标签 (onclick) 应该打开 2 个不同的窗口（每个都包含选项卡组）。

所以，在我的app.js 我有：

Window = require('ui/handheld/ApplicationWindow');

在我的ApplicationWindow 函数中：

    var window1 = Ti.UI.createWindow({
        backgroundColor:'#ffffff'
    });

    var label = Ti.UI.createLabel({ text: "Open first Window", top:10 });
    window1.add(label);

    var label2 = Ti.UI.createLabel({ text: "Open second Window", top:50 });
    window1.add(label2);

    var window2 = Titanium.UI.createWindow({url:"A.js",backgroundColor:'#00ff00'});
    var window3 = Titanium.UI.createWindow({url:"B.js",backgroundColor:'#ff0000'});

    label.addEventListener("click", function(e) {
    var t = Ti.UI.iPhone.AnimationStyle.CURL_UP;
    window1.animate({view:window2,transition:t},function(){window2.open();});
    });

    label2.addEventListener("click", function(e) {
    var t = Ti.UI.iPhone.AnimationStyle.CURL_UP;
    window1.animate({view:window3,transition:t},function(){window3.open();});
    }); 

    return window1;

第一个问题是：这是一个好的设计吗？是否可以改进？怎么样？

第二个问题是：有没有办法在过渡结束之前显示我正在打开的页面？目前看来A.js和B.js中包含的JS只有在动画停止时才会执行。

谢谢，欢迎任何帮助，对于新手问题表示抱歉。

[编辑] 这是 Ch4rAss 评论后我当前的代码：

function ApplicationWindow() {

    var root = Ti.UI.createWindow({
        backgroundColor:'#ffffff'
    });

    var label = Ti.UI.createLabel({ text: "Open first Window", top:10 });
    root.add(label);

    var label2 = Ti.UI.createLabel({ text: "Open second Window", top:50 });
    root.add(label2);

    var win2 = require('ui/handheld/Win2');
    var win3 = require('ui/handheld/Win3');

    label.addEventListener("click", function(e) {
    var t = Ti.UI.iPhone.AnimationStyle.CURL_UP;
    win2.open({transition:t});
    });

   label2.addEventListener("click", function(e) {
   var t = Ti.UI.iPhone.AnimationStyle.CURL_UP;
    win3.open({transition:t});
   }); 

    return root;
}

module.exports = ApplicationWindow;

和：

function Win2(){
        /* You can (of course) do more than this */
        return Ti.UI.createWindow({backgroundColor:'#00ff00'});
    }
module.exports = Win2;

Answer 1

您应该在open() 方法中添加动画，以便在动画期间打开窗口：

window1.open({transition:Titanium.UI.iPhone.AnimationStyle.CURL_UP});

我建议为每个窗口使用单独的文件并使用 CommonJS 来require() 它。与您用于ApplicationWindow 的方法相同。在您创建两个窗口并将它们加载到内存而不使用它们的那一刻！更好的是：

var Win1 = require('ui/handheld/WhateverWindow');
label.addEventListener("click", function(e) {
   var win1 = new Win1();
   win1.open({transition:Titanium.UI.iPhone.AnimationStyle.CURL_UP});
});

还有ui/handheld/WhateverWindow.js

(function() {
    var WhateverWindow = function() {
        /* You can (of course) do more than this */
        return Ti.UI.createWindow({backgroundColor:'#00ff00'});
    }
    module exports = WhateverWindow;
})();

您可以阅读更多here。