Web应用开发（前端）—Ext Js 的MVC（1）

来源：互联网发布：dota2怎么刷暴走数据编辑：程序博客网时间：2024/04/28 15:50

目前MVC的应用已经不在满足于后台的开发。分层的应用更好的使得系统中的各层进行解耦。可以提高代码的阅读性以及后期的维护性。

在面向对象编程的今天，古老的JS代码也加入了对象编程的年代，自然MVC的结构也是必然的发展。

我之前并未接触过JS方面的MVC，因此借此机会进行一次新鲜的尝试。

Ext 的MVC架构包含了Controller, View, Model, Store. 通过其定义就可明确知道这些组件在MVC中的应用。

下面我们一步一步的来配置MVC框架。

1. 创建目录

我这里所说的是创建工程目录，我已经将Ext JS的代码放在了单独的Ext文件夹中。

根据以前后台的经验，我将系统目录分为以下几类：

说明一下：

controller,model,store,view 就不用多说了。

plugins 里面放置前端的一些自定义插件。

pages里面存放所有的html/jsp页面

2. 创建首页

在pages中，创建一个index.html页面作为首页。（在不涉及后台代码前，我暂时采用html的页面）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="../ext/resources/ext-theme-neptune/ext-theme-neptune-all.css"/><link rel="stylesheet" type="text/css" href="../css/library.css"/><script type="text/javascript" src="../ext/ext-all.js"></script><script type="text/javascript" src="../js/libraryApp.js"></script><title>ODC Library</title></head><body></body></html>

页面上并没有太多代码，在Ext的MVC中，所有的页面代码都是由Ext.application动态创建的。（富客户端的任务是把复杂任务简单化，简单任务复杂化。所以请做好用复杂的方法来解决简单问题的心理准备。）

一般来讲一个页面对应一个application. 由application创建相应的View,Controller, 在Controller中引入Model，并且绑定Store

3. 创建启动脚本：libraryApp.js

这个脚本是所有程序的入口

Ext.application({name:'Library',appFolder:'../js',controllers:['Library','Login'],launch: function(){Ext.create('Library.view.LibraryView');}});

在此，我手动创建了一个Viewport，如果autoCreateViewport为true时，Ext会动态加载 /{appFolder}/view/Viewport.js，如果该文件不存在，则会报加载失败的错误。

系列链接：Web应用开发（前端）—Ext Js的MVC（2）

0 0