Extjs 发展至今,传承了YUI的伟大精髓, YUI得到了Douglas Crockford(任职于 Yahoo! 的一名 JavaScript 传道者和架构师,他是全球最有造诣的 JavaScript 语言专家之一,Blog:http://www.crockford.com/) 大师的赞同,而ExtJS也是将YUI的模式脚本编程学习使用的淋漓尽致,并且还给它做了几套华丽的CSS嫁衣…., 而在ExtJS越发耀眼的同时,我等初学者在使用ExtJs的时候也是晕呼其呼。(好在2.0 推出之后,官方的文档,像雨后春笋一样,开始覆盖到方方面面。)
其实,拨开ExtJS华丽的外衣,翻阅其体内精致的代码,不难发现一些我们耳熟能详的设计模式。
在早期1.0,1.1的好多例子中,我们会看到这样风格的代码。
01.
var
Oo=
function
(){
02.
var
x;
03.
var
y;
04.
return
{
05.
a:
function
(){
06.
...
07.
},
08.
b:
function
(){
09.
...
10.
}
11.
}
12.
}();
咂一看,不是我们能理解的方式, function(){}(), 是何意?。
//()在这里,意味着方法已经执行,并且return里面的已经产生, 这样可能很难理解,那等同与执行 function oo(){},这样是否好理解些了?
BTW :这里要引入JavaScript的一个高级概念,“闭包”。(具体内容参考《JavaScript The Definitve Guid,5th Eddion》Section 8.8 –Function Scope and Closures ,也是被Douglas Crockford推荐的为数不多的两本书籍之一。), 当然不急着去翻,先把我的废话看完。
好了,看这种使用别扭的使用方式, 而这种方式,在我们的页面,或者其他类中, 调用Oo的a方法的时候,形式如下
对,正是这样的一种JS编程方式,被Douglas Crockford作为JS的一种单例的实现, 大师还把它叫做“Module Pattern”,
好,如果我们不用所谓单例呢?, 就看看传统的对象方式,同学们肯定在Pototype盛行的时代,已经弄的一清二楚。
01.
0o =
function
(){
02.
this
.x;
03.
this
.y;
04.
}
05.
Oo.prototype = {
06.
a:
function
(){
07.
this
.x = 100;
08.
},
09.
b:
function
(){
10.
this
.y = 200;
11.
}
12.
}
13.
14.
Ext.onReady(
function
(){
15.
var
o =
new
Oo();
16.
0.a();
17.
});
再来,假使是个初学者,不知道对象继承,怎么办。更土的写法,人人都会。
1.
var
x,y
2.
function
a(){
3.
x=100;
4.
}
5.
function
b(){
6.
y=200;
7.
}
调用方式。
不用说了,只要a(),就会把x设置, 全世界的开发者都公认 ,全局变量是邪恶的,,而且随着你调用的不注意,将会越来越臃肿,导致Memory Lacks 内存泄露。
以上几个简单的举例可以看出, 类 比Java 一样, Oo.a直接调用,好比一个静态类,直接访问。 而prototype需要创建对象后访问其成员。
第一种方式,在任何地方都不需要创建(只创建一次),
而第二种方式,需要在每次调用的时候,创建对象。
第三种老土的代码,希望大家尽量少写,这不是程序员风格的体现。
对于发展到今天,如此庞大的ExtJS2.0,自然也要考虑道自己的运行和调用不要让new 变得太臃肿,在ExtJS中我们发现, 在会被各个组件大量频繁调用到的一些工具类中,单例运用较为频繁。
Ext 源码中,设计使用单利的代码片段。
01.
02.
Ext.DomHelper=
function
() {
03.
04.
..
05.
return
{
06.
07.
}
08.
}();
09.
10.
11.
Ext.DomQuery =fucntion(){
12.
13.
}();
后记: 由于JavaScript,具有prototype,call,apply来实现继承,面向对象来开发,又有闭包等特性来进行函数编程。有函数编程和面向对象的双重性质, 使得JavaScript格外的灵活,难以驽驾, 开发者选择多种风格来进行编码,在一个整体项目会容易会走向凌乱和灭亡。 这就更需要我们从大师的经验总结,以及ExtJS这种优秀的设计中,去体味学习,站在巨人的肩膀上前进…..
另外值得一提出的,ExtJs必须要求你的页面为XHTML,当你在别的浏览器下跑的非常顺畅,而唯独IE下有那么点瑕疵(不是脚本报错的),你应当检查下你是否把你的页面定义成XHTML。
作者:Totodo
相关推荐
ExtJS 设计模式之一.docx ext单例
ExtJS设计模式
自己的理解,重写了公司底层代码,用的设计模式做多就是单例和模板方法,可以看下实际公司是怎么来用的,还有就是面向接口编程,如果给你在我现在这个基础上来改,自己去写主从表,看可不可以写出来.自己如何认真的...
02.编写几个通用的service方法、设计数据库 03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的文章模块界面搭建 07.继续搭建我的文章模块,...
Extjs界面设计器,可以根据可视化的设计界面,通过拖动组件和修改属性的方法,生成Extjs脚本,对于Extjs开发有很大的帮助,
本工程采用ExtJs4.0 开发,采用mvc开发模式,分为controller view model store。
ExtJS4.0.7的MVC模式。 欢迎大家下载。
extjs视图设计器,其中有安装说明和操作视频的网址。
通过使用ExtJS设计器,可以更方面的通过设计器的控件来调整布局,来操作界面
第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第十二讲.ExtJS之Ext常用函数 第十三讲.ExtJS之Ext常用函数(二) 第十四讲.初识Ajax 第十五讲.ExtJS对Ajax支持-注册用户实例 第十六讲.ExtJS对Ajax...
该系统结合struts+hibernate+spring使用四层架构设计, 采用extjs设计界面,实现用户登录及grid的搜索显示功能, 该系统没有完全开发完成, 实现了部分功能, 仅供参考者学习一些项目的设计思路和extjs的使用技巧....
extjs设计实例包含Grid和布局的设计
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
基于ExtJS的工作流流程图设计页面,方便快捷。
extjs资料extjs资料extjs资料extjs资料extjs资料
19、ExtJS之组件面向对象编程(一) 20、ExtJS之组件面向对象编程(一) 21、项目实战-需求分析、数据字典、数据库设计) r, `+ J( `$ l# d7 I$ h# W: U' r* a 22、项目实战-底层框架搭建、创建实体对象 23、项目实战...
EXTJS 一个在线设计器,纯JS实现,供大家参考
ExtJS 可视化设计器,附Ext安装文件、汉化文件和安装说明,绝对可用。
extjs前台设计工具:不错的前台设计工具,使用起来很方便。web应用设计前台工具首选。