前几天领导突然提起关于extjs的MVC模式,其实Sencha Touch也可以遵循这种科学的模式体系。
基础知识说的差不多了,总想摩拳擦掌的想自己搞出点什么来。当然一个好的项目利用一个合理的模式使您的代码可测性、易清洁、维护。从初学Sencha Touch时就开始使用一个成熟的模式会让你少走很多弯路。
MVC
MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。
在之前的java开发中,基本上所有的项目都采用了MVC的模式,当时我们的前端也是应用的extjs,但是extjs只是视图的一部分。
如今,我们要将视图部分通过nodejs的方式分离出来,视图作为一个单独的工程也有必要采用一个合理的模式。
Sencha Touch是由extjs发展出来的,现在学习Sencha Touch的MVC,对extjs的MVC也是有帮助的。
Sencha Touch MVC
当你要开发一个Sencha Touch 项目时,要考虑到满足一下三点:
- History Support:历史支持,就是你的程序应该有后退按钮,可以连接到你之前访问的所有部分
- Deep Linking:在打开任何屏幕时,使你的应用程序可以分享链接,就像链接到一个网页
Device Profiles:设备配置文件,使您能够轻松地定制你的应用程序UI到手机,平板电脑,和其他设备,并且能够共享代码
一个应用程序,是一个模型,视图,控制器,存储,和配置文件的合集,另外再加上额外的相关实体,比如说App图标,图片,音频等。
- Model:模型,代表一种类型的应用程序的数据对象,例如一个电子商务应用程序可能有模型的用户,产品等
- View:视图,负责向用户显示数据,利用Sencha Touch内置的组件
- Controller:控制器,处理应用程序的交互,通过监听用户交互,如tap和滑动手势,并采取相应行动
- Store:负责将数据加载到你的应用程序和驱动部件,例如列表和数据浏览
- Profile:配置文件,使您可以轻松地自定义您的应用程序的用户界面适应平板电脑和手机,同时尽可能多的共享代码
Application通常是你在Sencha Touch第一个定义的实体:
Ext.application({
name: 'MyApp',
models: ['User', 'Product', 'nested.Order'],
views: ['OrderList', 'OrderDetail', 'Main'],
controllers: ['Orders'],
launch: function() {
Ext.create('MyApp.view.Main');
}
});
其他内容之前的文章都有介绍。
控制器,前面在设备配置篇有讲到过,但是真的很抽象难理解。
我找到了一个 博文 是对官方介绍的翻译,看了之后应该对控制器能有一个更深入的了解
Sencha Touch 2 官方文档翻译之 Controllers(控制器学习指南)