extjs是个很强大的js框架,这点相信用过的都有所体会,笔者之前用它开发过一套工作流系统,开发到后来,随着页面功能的越来越丰富,js代码也越来越庞大,要改动变得越来越难。由于之前基本没怎么写过js的代码,因此虽然想过优化架构,分层什么的,但是苦于功力不够,也就搁浅了。最近想练手学下php,在下载别人代码的时候,发现了一个用前端用extjs实现的系统,看了下,觉得作者js水平还是值得学习的。也就参照着学习了下代码中用到的mvc架构。下面把这两天的心得记录下:
一、总体概述。extjs mvc就是将页面的ui定义、事件监听、数据定义、获取及操作解耦分开的一种模式。使用mvc,对于大型项目(一般来说大型项目是有很多页面及功能,笔者认为如果只有几个页面,但每个页面控件和对控件的操作都非常多,也可以用mvc来处理)来说,有利于代码的管理和后期维护。当然,使用mvc门槛要相应高一些,毕竟你要知道ext在后面是如何帮你把m,v,c三层粘合起来的。
二、实际使用方式。
1、编写app.js文件。在该js中使用Ext.application向ext注册程序入口。文件名不一定非得是app.js,可以任意取名,但是该文件就是整个基于ext开发的项目的入口。在该文件中,将项目用到的controller包含进去
2、建立mvc文件目录结构。在项目中新建文件夹app(也可以是其他名字),在下面建立子文件夹controller,model,view,store,这样基本的目录结构就有了;
3、分别编写controller,model,view,store,并在js文件中使用正确的方法将它们连接起来。具体说就是在controller中指定view;在view中定义ui控件,如果控件为数据绑定控件,则指定用到的store;在store中指定用到的model