这段时间一有空就都在研究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,今天就先说到这,关于此框架的研究和加强,我打算在之后文章里再慢慢介绍,也希望大家多多捧场
最后大家可到以下2个地址下载此框架:
http://timvc.com
https://github.com/deboorn/TiMVC