介绍Ext JS 4 MVC给Web开发带来的变化

文章最后将与大家一起讨论作者在运用过程中碰到的问题以及解决办法,并提出 MVC 需要进一步完善的地方。

Ext JS 4 目前是 Sencha 的产品,4.x 的正式版本号是 4.0.7。Ext JS 4 提供商业版本,但如果您的项目是开源的,则可以">免费使用 Ext JS 4。Ext JS 的论坛目前非常活跃;Ext JS 还在不但地升级改进,据 Sencha 官方统计,使用 Ext JS 的开发者数目在一百万以上。

Ext JS 4 与之前版本的比较

渲染效率提高

所有类都经过调优,包括最影响渲染效率的布局引擎重写。

命名空间

命名空间是 Ext JS 4 的 MVC 的基础,自此 Ext JS 类能按作用域分开存放了。.NET 或 Java 开发者应该熟悉命名空间带来的好处:命名空间让全类名映射到类文件路径变得很容易,将类按作用域分文件夹存放使得类更容易管理。以 MVC 为例,Ext JS 类将按作用域:模型、视图和控制器分为三类,分别存放于对应文件夹中。

按需加载类

清单 1. 按需加载类的例子

Ext.define('MyNamespace.Cat', { requires: ['MyNamespace.BabyCat'], giveBirth: function() { // 实例化 BabyCat 之前,必须加载 BabyCat 的类定义。通过设置“requires”属性,能实现类的按需加载 return new MyNamespace.BabyCat(); } });

这个特性其实是基于全新设计的类系统的,详见下面的小结。不同于先前版本:即使用到 Ext JS 框架中很少一部分单元,Ext JS 也会加载所有的框架,按需加载只加载需要的类。因此按需加载类为 JS 优化和减少内存消耗提供了一个有效途径。Sencha 为此还提供了 SDK 工具对 JS 代码进行 Minify,在部署前运行 minify 对 JS 代码最小化后,将得到一个最小 JS 集合。

全新的类系统 由于篇幅的限制,具体请参阅官方文档 Class System,其中详细描述了怎样用 Ext JS 4 的方式定义类,以及错误处理和调试

MVC 架构 用 Ext JS 4 之前的版本写大的客户端应用,您会发现越来越“难”,您会发现有四难:难写、难读、难维护、难扩展。随着越来越多的功能添加进来,代码越来越失控,一个 JS 文件几千行可能很普遍了,当然也不排除代码组织得很好易于扩展的情况,但这些都需要开发者付出额外的开发代价去组织自己的架构。从 Ext JS 4 开始有了自己的 MVC 架构,开发者不必再付出这种额外的代价也能写出漂亮的代码。Ext JS 4 对 MVC 有自己的定义,以下定义来自 Sencha 官网的文档:

Model

:一组字段的集合以及它们对应的数据(例如:“User”类 model 有“username”和“password”字段),通过 data 包 (store,proxy 等 )Model 能序列化自己,并能通过关联关系从一个 Model 导航到另一个 Model。Model 的工作原理类似 Ext JS 3 中的 Record 类,通常结合 Store 为表格控件或其它控件提供显示数据。

View

:任意组件,如 Grid, Tree 和 Panel 都是视图。

Controllers

:在这里写所有的逻辑代码:如渲染视图、实例化模型、加载并初始化其它控制器等。

MVC 的概念很简单,但实际项目中运用 MVC 模式将代码组织起来会不会没那么简单?答案在后面的章节“介绍开发 Ext JS4 的利器 : Sencha Architect 2”中,该章节会详细介绍怎样用该工具开发 MVC 模式的 Ext JS 程序。

时间: 2024-10-23 11:17:40

介绍Ext JS 4 MVC给Web开发带来的变化的相关文章

《HTML5移动应用开发入门经典》—— 2.6 HTML5给移动Web开发带来的好处

2.6 HTML5给移动Web开发带来的好处 HTML5移动应用开发入门经典HTML5并非适用于每一款移动设备及每一款移动Web浏览器.如前所述,许多旧式设备.非智能手机及平板电脑都无法很好地支持HTML5.但我们有充分的理由来为那些支持HTML5的移动设备开发应用程序. 2.6.1 HTML5包含了性能优良的API HTML5拥有与视频.音频.Web应用程序.编辑页面内容.拖曳以及展示浏览器历史等功能相关的API.它们在移动设备上表现良好,因为移动设备浏览器不需要为这些功能特别使用插件或附加组

2017年第1贴:EXT.JS使用MVC模式时,注意如何协调MODEL, STORE,VIEW,CONTROLLER的关系

也调了快一天,死活找不到窍门. MODEL, STORE,VIEW的调置测试了很久,试了N种方法,不得其果. 最后,试着在APPLICATION里加入CONTROLLER, 在CONTROLLER里加入相应的STORE和VIEW支持, 搞定. 元旦踩过两个坑,继续前行!!!:) Ext.define('Packt.Application', { extend: 'Ext.app.Application', requires: [ 'Packt.overrides.tree.ColumnOverr

用Ext JS构建Ajax应用程序:一种用于富因特网应用程序开发的JavaScript框架

简介:Ext JS 是一种强大的 JavaScript 库,它通过使用可重用的对象和部件简化了 Asynchronous JavaScript + XML(Ajax)开发.本文介绍 Ext JS,概述它背后的面向对象 JavaScript 设计概念,解释如何使用 Ext JS 框架开发富因特网应用程序的用户界面元素. 当今有许许多多的 Web 开发框架,开发人员很难判断哪些框架值得花时间去学习.Ext JS 是一种 JavaScript 开发框架,这种强大的 JavaScript 库通过使用可重

Js 按照MVC模式制作自定义控件

js|控件 在web开发中常常要使用js,为了提高效率一般都会制作js的类文件.这样在使用中更新复用都很方便.下面按照我工作中的一个案例,介绍如何定义js类文件制作自定义的控件. 一.设计需求 这个需求中,我们要制作一个,从webservice上获取一组学生成绩信息,然后在页面上按照及格与否显示出来.当然还要加上一些简单的互动效果. 按照MVC的设计,我们定义M(数据模型)包括数据连接和数据的分析重组.V表现层,使用document.write的方法写页面. C容器,控制层.将M与V联系起来.

JS自定义函数对web前端上传的文件进行类型大小判断_javascript技巧

废话不多说了直接给大家贴js代码了.具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me

Ext JS 4的Grid组件

Summary: 介绍Ext JS 4的Grid Ext JS 4 Grid Components Author: Brian Moeskau(译者:Frank Cheung) Published: 2011三月七日 Ext Version: 4.x 该文英文版本:http://www.sencha.com/blog/ext-js-4-grid-components 我们正在不懈地努力着Ext JS4.到目前为止所呈送给各位看官的只是程序员预览版本(Developer Perview),不过我们

为什么做java的web开发我们会使用struts2,springMVC和spring这样的框架?

为什么做java的web开发我们会使用struts2,springMVC和spring这样的框架?  今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术框架由struts2迁移到springMVC,我突然有了一个新的疑问无法得到正确的解释,为什么我们现在做java的web开发,会选择struts2或者springMVC这样的框架,而不是使用servlet加jsp这样的技术呢?特别是现在我们web的前端页面都是使用

Total.js 框架 v2.6.0 发布,Node.js 的 MVC 框架

Total.js 框架 v2.6.0 发布了,Total.js 是一个 web 应用框架,使用 JavaScript,HTML,CSS 和 Node.js(MVC) web 应用框架来构建 web 网站和 web 应用.更新如下: News: added: F.config['default-errorbuilder-status'] a default HTTP status for all error builders default 200 added: F.config['default

《人人都玩开心网:Ext JS+Android+SSH整合开发Web与移动SNS》样章下载

本文为原创,如需转载,请注明作者和出处,谢谢! 第1章:开发梦缘起开心网 第5章:开心桌面:完全模拟Windows桌面的开心网 第15章:移动电子相册:捕捉精彩瞬间 书中实例截图     前言      互联网的发展,就是一个不断上演奇迹的过程.10年前就开始在Internet上流行的Web应用,在见证了一个个奇迹之后,依然作为最主流的应用而雄霸 互联网.近几年,一个由国外风靡至国内的Web应用--SNS,再一次为举国上下的互联网普及大潮推波助澜.或许SNS听起来还有点陌生,但如果你连炙手 可热