這段時間一有空就都在研究Titanium的MVC框架，因為幾個項目做下來，發(fā)現(xiàn)一套好的框架實在是很重要，所以這也成為了當務之急！

Titanium本身已做得很不錯了，所以網(wǎng)上也已有一些優(yōu)秀的MVC框架和插件等，不過試了下，感覺比較好用的就是一個叫TiMVC的框架，這個在官方market上就有，可以免費下載:http://timvc.com/

之所以選擇這個框架，是因為發(fā)現(xiàn)其架構(gòu)清晰，有非常具體的MVC層次，使用起來方便，上手容易，而且更重要的是經(jīng)過上真機測試也沒什么問題，對2個系統(tǒng)（ios&android）的兼容性也比較好。由于官方網(wǎng)站上并沒有詳細的使用說明，只是簡單地例出了層次目錄和文件是什么，所以具體使用和功能我也只有直接查看其源碼，經(jīng)過對其源碼越深入的分析，就越感覺其用起來挺順手，呵呵～～

要學習一個框架，先要搞清楚的是其整體架構(gòu)，以下就是整個TiMVC的項目結(jié)構(gòu)：

上圖可以看到在MVC目錄下的層次結(jié)構(gòu)是比較清楚的：

assets:這個是資源文件目錄，包括圖片和數(shù)據(jù)庫文件的存放。

components:這個是組件目錄，包括框架里的核心組件，一般不需修改這里的文件。

controllers:控制器目錄，包含了項目里所需用到的控制器，根據(jù)需要自己創(chuàng)建。

core:此為框架核心文件目錄，其他目錄的代碼均要以此為中心啦，呵呵。

models:數(shù)據(jù)模型目錄，主要是與數(shù)據(jù)庫交互的實體類的操作。

views:視圖目錄，里面每個子目錄均對應一個控制器名稱，子目錄里的文件就是具體的action了。

OK，介紹完層次結(jié)構(gòu)后，就說說其原理和使用。MVC的原理就不需我多說啦，如果不了解MVC模式的話，可上google看看。首先說一下此框架的配置，打開app.js文件就可以看到一大堆配置信息，這也是我喜歡使用它的原因之一，可以有很靈活的配置選項，非常方便哦！

不過不得不說的是，雖然其配置項不少，但基本上都不需要去更改的，大部分是框架路徑的配置，所以如果只用其默認這些配置，一般來說其實意義不是很大，我之所以使用它，就是因為我可以對這些配置信息進行擴展，以達到真正方便控制整個項目流程的效果，這個在以后的文章中我會慢慢介紹.現(xiàn)在說一下框架的運行流程和使用吧。核心代碼分析暫且不說，直接打開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里主要是創(chuàng)建了一個list的數(shù)組，然后存放了相關的數(shù)據(jù)信息，每一條數(shù)據(jù)就是一個導航信息，包括標題，路由，請求數(shù)據(jù)等，最后一句是重點，直接render到名字為home的view里，同時將整個list數(shù)據(jù)傳遞過去。然后我們再打開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里創(chuàng)建界面，就要先創(chuàng)建一個self.rootView對象，然后將所有東西都放到這個view里來。而通過self.data.list，就可以獲取之前controller傳過來的list數(shù)據(jù)了，這個名字就與controller里寫的一致。

因為以上代碼創(chuàng)建的是一個TableView，所以在其點擊事件里就可以直接調(diào)用list的數(shù)據(jù)了。這里用到了此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); 

這個是加載路由的方法，即可跳轉(zhuǎn)到另一個action，再通過action跳轉(zhuǎn)到另一個view界面，同時可以設置下一界面的標題和數(shù)據(jù)，數(shù)據(jù)是JSON格式。

/** 
* Update current window with route and request object (stringified) 
* @param {String} route 
* @param {Object} request 
* @private 
*/ 
this.setWindowRoute = function(route,request); 

以上是設置當前窗口的路由信息和傳遞的數(shù)據(jù)，一般設置完后再調(diào)用以下方法進行跳轉(zhuǎn)：

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

運行項目后，首先看到的將是home里的TableView視圖，同時點擊里面項目的話，就會根據(jù)所設置list里的數(shù)據(jù)跳轉(zhuǎn)到不同的視圖頁面了。以上代碼就簡單演示了一個頁面的跳轉(zhuǎn)過程。

除了控制器到視圖的跳轉(zhuǎn)外，其實還可以動態(tài)調(diào)用不同頁面的layout，在控制器里，可以調(diào)用以下方法以設置不同的layout:

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

這個layout又是如何用的呢？只要打開views/layouts/default.js就可以看到默認的layout代碼，通過不同的layout設置，我們可以方便地定義不同頁面的結(jié)構(gòu)，如所有頁面都要包含headerandfooter等，就可以在layout里設置，原理和一般的MVC框架差不多（.NET或者cakephp里就有l(wèi)ayout的概念了）

最后再總結(jié)下一些基本用法：

1.要在控制器或者視圖調(diào)用核心方法，都必須以self.App開頭，其實self就是等于this，至于有什么核心方法，大家打開core/timvc.js文件就知道了。

2.在控制器里跳到相應的view，使用self.render(viewName,{“data”:data});

3.路由跳轉(zhuǎn)只需在view里調(diào)用self.App.loadRoute(title,controller/action,data);

4.可通過setLayout使用views/layouts目錄下不同的頁面結(jié)構(gòu)

OK，今天就先說到這，關于此框架的研究和加強，我打算在之后文章里再慢慢介紹，也希望大家多多捧場[[67872]]

最后大家可到以下2個地址下載此框架：

http://timvc.com

https://github.com/deboorn/TiMVC