这段时间一有空就都在研究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}); 
} 

在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(); 
            } 
        }); 
} 

这段是为当前视图添加相关的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); 

这个是加载路由的方法，即可跳转到另一个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); 

以上是设置当前窗口的路由信息和传递的数据，一般设置完后再调用以下方法进行跳转：

/** 
* Route window to requested controller and action 
* @private 
* @returns boolean on fail 
*/ 
this.routeWindow = function(); 

运行项目后，首先看到的将是home里的TableView视图，同时点击里面项目的话，就会根据所设置list里的数据跳转到不同的视图页面了。以上代码就简单演示了一个页面的跳转过程。

除了控制器到视图的跳转外，其实还可以动态调用不同页面的layout，在控制器里，可以调用以下方法以设置不同的layout:

/** 
* Set Layout string 
* @param {String} set layout name string 
*/ 
this.setLayout = function(layoutName); 

这个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，今天就先说到这，关于此框架的研究和加强，我打算在之后文章里再慢慢介绍，也希望大家多多捧场[[67872]]

最后大家可到以下2个地址下载此框架：

http://timvc.com

https://github.com/deboorn/TiMVC