这段时间一有空就都在研究Titanium的MVC框架，因为几个项目做下来，发现一套好的框架实在是很重要，所以这也成为了当务之急！
Titanium本身已做得很不错了，所以网上也已有一些优秀的MVC框架和插件等，不过试了下，感觉比较好用的就是一个叫TiMVC的框架，这个在官方market上就有，可以免费下载:http://timvc.com/
之所以选择这个框架，是因为发现其架构清晰，有非常具体的MVC层次，使用起来方便，上手容易，而且更重要的是经过上真机测试也没什么问题，对2个系统（ios&android）的兼容性也比较好。由于官方网站上并没有详细的使用说明，只是简单地例出了层次目录和文件是什么，所以具体使用和功能我也只有直接查看其源码，经过对其源码越深入的分析，就越感觉其用起来挺顺手，呵呵～～
要学习一个框架，先要搞清楚的是其整体架构，以下就是整个TiMVC的项目结构：
上图可以看到在MVC目录下的层次结构是比较清楚的：
assets:这个是资源文件目录，包括图片和数据库文件的存放。
components:这个是组件目录，包括框架里的核心组件，一般不需修改这里的文件。
controllers:控制器目录，包含了项目里所需用到的控制器，根据需要自己创建。
core:此为框架核心文件目录，其他目录的代码均要以此为中心啦，呵呵。
models:数据模型目录，主要是与数据库交互的实体类的操作。
views:视图目录，里面每个子目录均对应一个控制器名称，子目录里的文件就是具体的action了。
OK，介绍完层次结构后，就说说其原理和使用。MVC的原理就不需我多说啦，如果不了解MVC模式的话，可上google看看。首先说一下此框架的配置，打开app.js文件就可以看到一大堆配置信息，这也是我喜欢使用它的原因之一，可以有很灵活的配置选项，非常方便哦！
不过不得不说的是，虽然其配置项不少，但基本上都不需要去更改的，大部分是框架路径的配置，所以如果只用其默认这些配置，一般来说其实意义不是很大，我之所以使用它，就是因为我可以对这些配置信息进行扩展，以达到真正方便控制整个项目流程的效果，这个在以后的文章中我会慢慢介绍.现在说一下框架的运行流程和使用吧。核心代码分析暂且不说，直接打开controller目录下的main.js文件，这个是主要的入口文件，其是继承components/controller.js文件的，在main.js里定义了一个action—home：
this.home = function(r){
//build table data to be used in table ui
var list = [];
list.push({title:"Tab Example",route:"example/tabgroup",request:{},hasChild:true,newWindow:false,height:self.App.util.dP(50)});
if(self.App.iPhone){
list.push({title:"iPhone Only Dashboard Example",route:"example/dashboard",request:{},hasChild:true,newWindow:true,height:self.App.util.dP(50)});
}
list.push({title:"Multi-Dashboard Example",route:"example/multidashboard",request:{},hasChild:true,newWindow:true,height:self.App.util.dP(50)});
list.push({title:"Database Example",route:"example/database",request:{message:'Hello from the database!'},hasChild:true,newWindow:true,height:self.App.util.dP(50)});
//render /mvc/views/main/home.js view file with data
self.render('home',{"list":list});
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
在home里主要是创建了一个list的数组，然后存放了相关的数据信息，每一条数据就是一个导航信息，包括标题，路由，请求数据等，最后一句是重点，直接render到名字为home的view里，同时将整个list数据传递过去。然后我们再打开views/main/home.js文件，其他代码先不需理会，主要看：
this.addContent = function(){
self.rootView = Titanium.UI.createTableView({
data:self.data.list
});
self.rootView.addEventListener('click',function(e){
if(e.rowData.newWindow){
self.App.loadRoute(e.rowData.title,e.rowData.route,e.rowData.request);
}else{
self.App.setWindowRoute(e.rowData.route,e.rowData.request);
self.App.routeWindow();
}
});
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
这段是为当前视图添加相关的UI代码，所有view里都以一个rootView为基础，因此要在view里创建界面，就要先创建一个self.rootView对象，然后将所有东西都放到这个view里来。而通过self.data.list，就可以获取之前controller传过来的list数据了，这个名字就与controller里写的一致。
因为以上代码创建的是一个TableView，所以在其点击事件里就可以直接调用list的数据了。这里用到了此MVC的几个核心方法：
/**
* Execute controller call via route.
* @param {String} title new window title
* @param {String} route controller/action route string
* @param {Object} data json data to be passed to route (new window)
*/
this.loadRoute = function(title,route,data);
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
这个是加载路由的方法，即可跳转到另一个action，再通过action跳转到另一个view界面，同时可以设置下一界面的标题和数据，数据是JSON格式。
/**
* Update current window with route and request object (stringified)
* @param {String} route
* @param {Object} request
* @private
*/
this.setWindowRoute = function(route,request);
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
以上是设置当前窗口的路由信息和传递的数据，一般设置完后再调用以下方法进行跳转：
/**
* Route window to requested controller and action
* @private
* @returns boolean on fail
*/
this.routeWindow = function();
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
运行项目后，首先看到的将是home里的TableView视图，同时点击里面项目的话，就会根据所设置list里的数据跳转到不同的视图页面了。以上代码就简单演示了一个页面的跳转过程。
除了控制器到视图的跳转外，其实还可以动态调用不同页面的layout，在控制器里，可以调用以下方法以设置不同的layout:
/**
* Set Layout string
* @param {String} set layout name string
*/
this.setLayout = function(layoutName);
- 1.
- 2.
- 3.
- 4.
- 5.
这个layout又是如何用的呢？只要打开views/layouts/default.js就可以看到默认的layout代码，通过不同的layout设置，我们可以方便地定义不同页面的结构，如所有页面都要包含headerandfooter等，就可以在layout里设置，原理和一般的MVC框架差不多（.NET或者cakephp里就有layout的概念了）
最后再总结下一些基本用法：
1.要在控制器或者视图调用核心方法，都必须以self.App开头，其实self就是等于this，至于有什么核心方法，大家打开core/timvc.js文件就知道了。
2.在控制器里跳到相应的view，使用self.render(viewName,{“data”:data});
3.路由跳转只需在view里调用self.App.loadRoute(title,controller/action,data);
4.可通过setLayout使用views/layouts目录下不同的页面结构
OK，今天就先说到这，关于此框架的研究和加强，我打算在之后文章里再慢慢介绍，也希望大家多多捧场
最后大家可到以下2个地址下载此框架：
http://timvc.com
https://github.com/deboorn/TiMVC
