Titanium TiMVC框架：介紹與使用
這段時間一有空就都在研究Titanium的MVC框架，因為幾個項目做下來，發(fā)現(xiàn)一套好的框架實在是很重要，所以這也成為了當(dāng)務(wù)之急！
Titanium本身已做得很不錯了，所以網(wǎng)上也已有一些優(yōu)秀的MVC框架和插件等，不過試了下，感覺比較好用的就是一個叫TiMVC的框架，這個在官方market上就有，可以免費下載:http://timvc.com/
之所以選擇這個框架，是因為發(fā)現(xiàn)其架構(gòu)清晰，有非常具體的MVC層次，使用起來方便，上手容易，而且更重要的是經(jīng)過上真機(jī)測試也沒什么問題，對2個系統(tǒng)（ios&android）的兼容性也比較好。由于官方網(wǎng)站上并沒有詳細(xì)的使用說明，只是簡單地例出了層次目錄和文件是什么，所以具體使用和功能我也只有直接查看其源碼，經(jīng)過對其源碼越深入的分析，就越感覺其用起來挺順手，呵呵～～
要學(xué)習(xí)一個框架，先要搞清楚的是其整體架構(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:視圖目錄，里面每個子目錄均對應(yīng)一個控制器名稱，子目錄里的文件就是具體的action了。
OK，介紹完層次結(jié)構(gòu)后，就說說其原理和使用。MVC的原理就不需我多說啦，如果不了解MVC模式的話，可上google看看。首先說一下此框架的配置，打開app.js文件就可以看到一大堆配置信息，這也是我喜歡使用它的原因之一，可以有很靈活的配置選項，非常方便哦！
不過不得不說的是，雖然其配置項不少，但基本上都不需要去更改的，大部分是框架路徑的配置，所以如果只用其默認(rèn)這些配置，一般來說其實意義不是很大，我之所以使用它，就是因為我可以對這些配置信息進(jìn)行擴(kuò)展，以達(dá)到真正方便控制整個項目流程的效果，這個在以后的文章中我會慢慢介紹.現(xiàn)在說一下框架的運(yù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ù)組，然后存放了相關(guān)的數(shù)據(jù)信息，每一條數(shù)據(jù)就是一個導(dǎo)航信息，包括標(biāo)題，路由，請求數(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();
- }
- });
- }
這段是為當(dāng)前視圖添加相關(guān)的UI代碼，所有view里都以一個rootView為基礎(chǔ)，因此要在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è)置下一界面的標(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)行項目后，首先看到的將是home里的TableView視圖，同時點擊里面項目的話，就會根據(jù)所設(shè)置list里的數(shù)據(jù)跳轉(zhuǎn)到不同的視圖頁面了。以上代碼就簡單演示了一個頁面的跳轉(zhuǎn)過程。
除了控制器到視圖的跳轉(zhuǎn)外，其實還可以動態(tài)調(diào)用不同頁面的layout，在控制器里，可以調(diào)用以下方法以設(shè)置不同的layout:
- /**
- * Set Layout string
- * @param {String} set layout name string
- */
- this.setLayout = function(layoutName);
這個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開頭，其實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)，我打算在之后文章里再慢慢介紹，也希望大家多多捧場
最后大家可到以下2個地址下載此框架：
http://timvc.com
https://github.com/deboorn/TiMVC
