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

最新推荐文章于 2021-02-26 14:37:41 发布

Bing Forever

最新推荐文章于 2021-02-26 14:37:41 发布

阅读量1.2k

点赞数

分类专栏： Web开发文章标签： web应用开发前端 ext

本文链接：https://blog.csdn.net/windyboy911/article/details/17995675

版权

Web开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

目前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）