javascript - CommonJs + 钛

Question

在我看来，这个问题更接近commonJs，而不是titanium。我编写了一个大文件。相当丑陋(代码的第一次和平)。如果你愿意的话，你可以跳过它。

问题:我的代码中有 2 个 View ，我想将它们放入不同的文件中不幸的是，我对export.modules 做得不好。检查第二行和第三行代码

 var fenetreBase =   Titanium.UI.createWindow({fullscreen:true,backgroundColor:"white",exitOnClose:true});
fenetreBase.open();

var viewimage = Titanium.UI.createView({backgroundColor:'red'});
var logo = Titanium.UI.createImageView({ image:'/image/test.jpg', top:0, left:0, width:"10%", height:"7%"});
var label1 = Ti.UI.createLabel({ backgroundColor:"blue", color: "white", text: 'Graphe', textAlign:Titanium.UI.TEXT_ALIGNMENT_CENTER, left:"10%", width: "90%", height:"7%", top:0});
var logo2 = Titanium.UI.createImageView({ image:'/image/test.jpg', top:0, left:0, width:"10%", height:"7%"});
var label2 = Ti.UI.createLabel({ backgroundColor:"blue", color: "white", text: 'Graphe', textAlign:Titanium.UI.TEXT_ALIGNMENT_CENTER, left:"10%", width: "90%", height:"7%", top:0});
var mapvisu = Titanium.UI.createImageView({ image:'/image/test.jpg', top:"7%",left:0, width:"100%",height:"93%"});
var viewgraphe = Titanium.UI.createView({backgroundColor:'red'});
var concentration = Titanium.UI.createImageView({image:'/image/test.jpg',top:"7%",left:0,width:"100%",height:"31%"});
var meteo = Titanium.UI.createImageView({image:'/image/test.jpg',top:"38%",left:0,width:"100%",height:"31%"});
var emission = Titanium.UI.createImageView({image:'/image/test.jpg',top:"69%",left:0,width:"100%",height:"31%"});

viewgraphe.add(label2);
viewgraphe.add(logo2);
viewgraphe.add(concentration);
viewgraphe.add(meteo);
viewgraphe.add(emission);

viewimage.add(logo);
viewimage.add(label1);
viewimage.add(mapvisu);

fenetreBase.add(viewimage);
fenetreBase.add(viewgraphe);

viewimage.visible = false;
viewgraphe.visible = true;

我想要 3 个文件:“app.js”、“vueimage.js”、“vueGraphe.js”.with app.js =

var fenetreBase =  Titanium.UI.createWindow({fullscreen:true,backgroundColor:"white",exitOnClose:true});
fenetreBase.open();

vueImage = require("vueimage");
vueGraphe = require("VueGraphe");

fenetreBase.add(vueImage ou vueGraphe)//depends need.

vueimage.js 和 vuegraphe.js 看起来像这样:

function vueimage(title) { var self = Ti.UI.createView({backgroundColor:'white'});
self.add(.....);//item i need
};

module.exports = vueimage;

如果某人能告诉我如何解决这个问题。我所有的尝试都以惨败或硬关机而告终。 :s。

Answer 1

首先，请确保您阅读了 Tappcelerator 关于在 Titanium 中使用 commonJS 的指南:https://wiki.appcelerator.org/display/guides/CommonJS+Modules+in+Titanium

简单介绍一下背景知识，commonJS 是一个用于在 javascript 中加载依赖项的 javascript 库，它可以轻松地将 javascript 程序分解为独立的代码片段，每个代码片段都在自己的作用域中运行。

Titanium 使用 SDK 1.8 版本中的 commonJS。使用它可以为您提供非常干净的代码，可以分解为定义的片段，在自己的范围内运行，并且性能非常好。

在 Titanium 中，您可以通过以下方式之一使用它:(1)您可以创建一个带有函数的模块，您可以从需要它们的对象中调用该函数(这非常类似于静态方法)，或者(2)您让整个模块充当一个对象，具有自己的函数(原型(prototype))并由一个函数公开。

例如:

模块(myModule.js):

function sayHello(name) {
      alert('Hello ' + name);
}
exports.sayHello = sayHello;

应用程序(app.js):

var myModule = require('/myModule');
myModule.sayHello('developer82');

另一种方法(我认为这就是您正在寻找的方法):

模块(myView.js):

function myView() {
     var some_view = Ti.UI.createView({ /* properties */ });
     // your logic comes here
     return some_view;
}

module.exports = myView;

应用程序(app.js):

var myView = new (require('/myView'))();

当然，还有其他方法可以实现此目的，例如创建您需要的东西并实现诸如 createMyView 函数之类的东西(请参阅peracetinheritance)。

希望这能回答您的问题。