這段時(shí)間一有空就都在研究Titanium的MVC框架，因?yàn)閹讉€(gè)項(xiàng)目做下來，發(fā)現(xiàn)一套好的框架實(shí)在是很重要，所以這也成為了當(dāng)務(wù)之急！

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

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

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

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

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

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

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

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

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

views:視圖目錄，里面每個(gè)子目錄均對(duì)應(yīng)一個(gè)控制器名稱，子目錄里的文件就是具體的action了。

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

不過不得不說的是，雖然其配置項(xiàng)不少，但基本上都不需要去更改的，大部分是框架路徑的配置，所以如果只用其默認(rèn)這些配置，一般來說其實(shí)意義不是很大，我之所以使用它，就是因?yàn)槲铱梢詫?duì)這些配置信息進(jìn)行擴(kuò)展，以達(dá)到真正方便控制整個(gè)項(xiàng)目流程的效果，這個(gè)在以后的文章中我會(huì)慢慢介紹.現(xiàn)在說一下框架的運(yùn)行流程和使用吧。核心代碼分析暫且不說，直接打開controller目錄下的main.js文件，這個(gè)是主要的入口文件，其是繼承components/controller.js文件的，在main.js里定義了一個(gè)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)建了一個(gè)list的數(shù)組，然后存放了相關(guān)的數(shù)據(jù)信息，每一條數(shù)據(jù)就是一個(gè)導(dǎo)航信息，包括標(biāo)題，路由，請(qǐng)求數(shù)據(jù)等，最后一句是重點(diǎn)，直接render到名字為home的view里，同時(shí)將整個(gè)list數(shù)據(jù)傳遞過去。然后我們?cè)俅蜷_views/main/home.js文件，其他代碼先不需理會(huì)，主要看：

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

這段是為當(dāng)前視圖添加相關(guān)的UI代碼，所有view里都以一個(gè)rootView為基礎(chǔ)，因此要在view里創(chuàng)建界面，就要先創(chuàng)建一個(gè)self.rootView對(duì)象，然后將所有東西都放到這個(gè)view里來。而通過self.data.list，就可以獲取之前controller傳過來的list數(shù)據(jù)了，這個(gè)名字就與controller里寫的一致。

因?yàn)橐陨洗a創(chuàng)建的是一個(gè)TableView，所以在其點(diǎn)擊事件里就可以直接調(diào)用list的數(shù)據(jù)了。這里用到了此MVC的幾個(gè)核心方法：

/** 
* 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); 

這個(gè)是加載路由的方法，即可跳轉(zhuǎn)到另一個(gè)action，再通過action跳轉(zhuǎn)到另一個(gè)view界面，同時(shí)可以設(shè)置下一界面的標(biāo)題和數(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è)置當(dāng)前窗口的路由信息和傳遞的數(shù)據(jù)，一般設(shè)置完后再調(diào)用以下方法進(jìn)行跳轉(zhuǎn)：

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

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

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

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

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

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

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

2.在控制器里跳到相應(yīng)的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，今天就先說到這，關(guān)于此框架的研究和加強(qiáng)，我打算在之后文章里再慢慢介紹，也希望大家多多捧場(chǎng)[[67872]]

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

http://timvc.com

https://github.com/deboorn/TiMVC