Javascript 如何在 Appcelerator Titanium 项目中组织 JS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2573592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to organize JS files in a Appcelerator Titanium project
提问by Tilo Mitra
I have recently started creating an iPhone application using Appcelerator's Titanium. Since the application is essentially all JS, I needed some advice on how I should organize this project.
我最近开始使用 Appcelerator 的 Titanium 创建一个 iPhone 应用程序。由于应用程序基本上都是 JS，我需要一些关于如何组织这个项目的建议。
It's becoming very easy to just create long procedural files for each view in the application. Is there a way I can incorporate MVC, or some structure to the project?
为应用程序中的每个视图创建长程序文件变得非常容易。有没有办法可以将 MVC 或某些结构合并到项目中？
Thanks, I appreciate it. -Tilo
谢谢，我很感激。-蒂洛
采纳答案by jhaynie
Titanium itself is essentially MVC given that your app.js file is the main controller and each View you create is the view and you pass (or set) model data against the view.
Titanium 本身本质上是 MVC，因为您的 app.js 文件是主控制器，您创建的每个视图都是视图，并且您针对视图传递（或设置）模型数据。
In Titanium, you can decompose your application using a couple of nice built-in mechanisms:
在 Titanium 中，您可以使用一些不错的内置机制来分解您的应用程序：
Titanium.include- Titanium.include allows you to include one or more JS files in place much like the C
#includecompiler directive. You can put common functions and JS classes in this file and then include them where ever you want them imported and available.Titanium.UI.createWindow- you can create a new View as as a property of the new Window pass in a URL to another JS context which will create a new JS sub-context and allow you to maintain its own variable space (but still give you access back to your parent).
Titanium.include- Titanium.include 允许您包含一个或多个 JS 文件，就像 C
#include编译器指令一样。您可以将常用函数和 JS 类放在此文件中，然后将它们包含在您希望它们导入和可用的任何位置。Titanium.UI.createWindow- 您可以创建一个新视图作为新窗口的属性，将 URL 传递给另一个 JS 上下文，这将创建一个新的 JS 子上下文并允许您维护自己的变量空间（但仍然给您可以返回给您的父母）。
Also, in Titanium, you can create folders that allow you to logically organize your application in a way that is suitable to you and your application.
此外，在 Titanium 中，您可以创建文件夹，允许您以适合您和您的应用程序的方式逻辑地组织您的应用程序。
Edit:Today, the Titanium.Include method is deprecated.
As mentionned in the documentation, we should create a CommonJS module and use the require()statement.
编辑：今天，Titanium.Include 方法已被弃用。正如文档中提到的，我们应该创建一个 CommonJS 模块并使用该require()语句。
More information about this statement : Require
有关此声明的更多信息：需要
More information about modules : Modules
有关模块的更多信息：模块
回答by fbrandel
As I was not finding an appropriate MVC solution for a Titanium mobile project, I came up with the following approach. For small apps this might be over-engineered but could help for maintaining growing applications.
由于我没有为 Titanium 移动项目找到合适的 MVC 解决方案，我想出了以下方法。对于小型应用程序，这可能会过度设计，但有助于维护不断增长的应用程序。
Folder structure:
文件夹结构：
/Resources
/model
/view
/controller
/ui
/iphone
/android
app.js
app.jss
For separating views, models and controllers a namespace is needed, so we define it in the app.js, which is our main controller:
为了分离视图、模型和控制器，需要一个命名空间，所以我们在 app.js 中定义它，这是我们的主控制器：
var app = {
view: {},
controller: {},
model: {},
ui: {}
}
Within the folders we place single JavaScript files for each component. For this we could either use a lightweight JavaScript OOP library, such as MooTools or Prototype or define simple JS functions as our objects. If you also want to inherit from parent classes, a library definitely makes sense.
在文件夹中，我们为每个组件放置了单个 JavaScript 文件。为此，我们可以使用轻量级 JavaScript OOP 库，例如 MooTools 或 Prototype，或者将简单的 JS 函数定义为我们的对象。如果您还想从父类继承，那么库绝对是有意义的。
Examples:
例子：
# Resources/controller/MyController.js
app.controller.MyController = function() {
return {
getView: function() {
return new app.view.MyView().getView();
}
}
}
# Resources/view/MyView.js
app.view.MyView = function() {
return {
getView: function() {
return Ti.UI.createWindow({...});
}
}
}
# Resources/view/MyModel.js
app.model.MyModel = function() {
return {
some: "data",
foo: "bar"
}
}
After that we can include all needed model/view/controller classes with Ti.include() in the app.js file and reference the components with our namespace:
之后，我们可以在 app.js 文件中使用 Ti.include() 包含所有需要的模型/视图/控制器类，并使用我们的命名空间引用组件：
Ti.include("controller/MyController.js");
Ti.include("view/MyView.js");
var myController = new app.controller.MyController();
var myView = myController.getView();
myView.open();
The MVC approach would now presume that the controller "controls" the state of the view and passes data from the model into the view. The view consists only of UI elements and properties for styling. Any action which is made in the UI fires an event, which tells the controller to perform the desired action.
MVC 方法现在假定控制器“控制”视图的状态并将数据从模型传递到视图。视图仅包含用于样式的 UI 元素和属性。在 UI 中进行的任何操作都会触发一个事件，该事件告诉控制器执行所需的操作。
But of course, the exact definition of MVC might be different according to your personal taste ;)
但是当然，MVC 的确切定义可能会根据您的个人品味而有所不同；)
回答by fbrandel
This also may help: A basic struct of how to organize a Titanium mobile project: https://github.com/krawaller/Struct
这也可能有帮助：如何组织 Titanium 移动项目的基本结构：https: //github.com/krawaller/Struct
回答by Mike S.
Allow me to update this question since most of the responses are superseded. In Q4 2012, Appcelerator released the Alloy MVC (beta) Framework along with the latest IDE and SDK release, Titanium Studio 3.0 and SDK 3.0. Alloy is completely integrated with Studio, so it's quite easy to get a basic app running in less than 15 mins. Alloy introduces a significant folder restructure: The /appfolder is now where all the development code resides.
由于大多数回复已被取代，因此请允许我更新此问题。2012 年第四季度，Appcelerator 发布了 Alloy MVC（测试版）框架以及最新的 IDE 和 SDK 版本、Titanium Studio 3.0 和 SDK 3.0。Alloy 与 Studio 完全集成，因此在不到 15 分钟的时间内即可轻松运行基本应用程序。Alloy 引入了一个重要的文件夹重组：/app文件夹现在是所有开发代码所在的位置。
The /Resourcesfolder, where code used to reside, is now the updated equivalent of the /buildfolder. Compiled code in /Resourcesis overwritten at each build.
用于存放代码的/Resources文件夹现在是/build文件夹的更新版本。/Resources 中的编译代码在每次构建时都会被覆盖。
I created a short introductory primer (screencast) on creating an Alloy project. You can view it via my dropbox folder.
我创建了一个关于创建 Alloy 项目的简短介绍性入门（截屏视频）。您可以通过我的保管箱文件夹查看它。
回答by Ryan White
It looks like Appcelerator made their own Appcelerator MVCin the marketplace I have not evaluated this yet.
看起来 Appcelerator在市场上制作了自己的Appcelerator MVC，我还没有对此进行评估。
More Info: http://johnkalberer.com/2011/09/29/appcelerator-mvc-example/
更多信息：http: //johnkalberer.com/2011/09/29/appcelerator-mvc-example/
