- 浏览: 181474 次
最新评论
-
adamed:
zhangwenzhuo 写道为什么this.get()会返回 ...
jQuery源码历代记5 -
zhangwenzhuo:
为什么this.get()会返回本身的呢?
jQuery源码历代记5 -
narutolby:
支持下~,哈哈~
jQuery历代记1 -
cpszy:
mark下
jQuery历代记1 -
gleams:
支持你
jQuery历代记1
ExtJS老大在官方论坛的一个回复,转到这里收藏下
The split onRender/render and their siblings are the result of a deep inheritance chain and a desire to not duplicate code. They are based on a common OO design pattern called Template Method.
The control structure (inversion of control) that is the result of the application of a template pattern is often referred to as the Hollywood Principle: "Don't call us, we'll call you." Using this principle, the template method in a parent class controls the overall process by calling subclass methods as required.
Let's me paint a simple picture.
Now looking at this code, it seems very straight forward and it can't fail right? However, what happens when you add a subclass?
Look at the result of the 2 options:
Option 1 has a few problems.
a) There's no way to know if the event was cancelled, so you can't stop the manager logic. You could return false if it is cancelled but then you have different return types and the API suffers.
b) The most serious issue is the "quit" event gets fired prematurely. While in this example that might be a problem, but in a Component that involves rendering and you need to know that the component is fully rendered, it would be a major issue.
Option 2 has a few problems as well:
a) The beforequit event no longer fires in advance and can no longer allow for cancellation of the action. This is a major problem.
b) The manager logic has to come first - this is a major problem especially when rendering a component and your based class is probably rendering something the subclass needs (e.g. this.el!)
Using a Template Method, we can solve this problem easily:
So not only does this solve the problem described above easily, it also means all subclasses no longer have to worry about wrapping things in events since the base class will handle that automatically.
Another even more important benefit of "Template Method" that is not present in this simple example but that is used in Component rendering is that then you can have a defined execution flow in a base class and you know all subclasses will be complete with what they need to do at each step before continuing to the next step.
Regards,
Jack
The split onRender/render and their siblings are the result of a deep inheritance chain and a desire to not duplicate code. They are based on a common OO design pattern called Template Method.
引用
Quote:
The template method is used to:
* let subclasses implement behaviour that can vary
* avoid duplication in the code: you look for the general code in the algorithm, and implement the variants in the subclasses
* to control at what point(s) subclassing is allowed.
The template method is used to:
* let subclasses implement behaviour that can vary
* avoid duplication in the code: you look for the general code in the algorithm, and implement the variants in the subclasses
* to control at what point(s) subclassing is allowed.
The control structure (inversion of control) that is the result of the application of a template pattern is often referred to as the Hollywood Principle: "Don't call us, we'll call you." Using this principle, the template method in a parent class controls the overall process by calling subclass methods as required.
Let's me paint a simple picture.
var Employee = function(){ .... this.addEvents({ beforequit: true, quit: true }); } Ext.extend(Employee, Ext.util.Observable, { quit : function(){ if(this.fireEvent('beforequit', this) !== false){ // "important logic" that must run when // when an employee quits this.fireEvent('quit', this); } return this; } }
Now looking at this code, it seems very straight forward and it can't fail right? However, what happens when you add a subclass?
var Manager = Ext.extend(Employee, { quit : function(){ // Option 1 is to call the base class first Manager.superclass.quit.call(this); // then do custom Manager quit logic ... Manager logic ... // Option 2 is to do the Manager specific logic first ... Manager logic ... // and then call the base class Manager.superclass.quit.call(this); return this; } });
Look at the result of the 2 options:
Option 1 has a few problems.
a) There's no way to know if the event was cancelled, so you can't stop the manager logic. You could return false if it is cancelled but then you have different return types and the API suffers.
b) The most serious issue is the "quit" event gets fired prematurely. While in this example that might be a problem, but in a Component that involves rendering and you need to know that the component is fully rendered, it would be a major issue.
Option 2 has a few problems as well:
a) The beforequit event no longer fires in advance and can no longer allow for cancellation of the action. This is a major problem.
b) The manager logic has to come first - this is a major problem especially when rendering a component and your based class is probably rendering something the subclass needs (e.g. this.el!)
Using a Template Method, we can solve this problem easily:
var Employee = function(){ .... this.addEvents({ beforequit: true, quit: true }); } Ext.extend(Employee, Ext.util.Observable, { quit : function(){ if(this.fireEvent('beforequit', this) !== false){ this.onQuit(); this.fireEvent('quit', this); } return this; }, onQuit : function(){ // "important logic" that must run when // when an employee quits } } var Manager = Ext.extend(Employee, { onQuit : function(){ Manager.superclass.onQuit.call(this); .. Manager logic ... } });
So not only does this solve the problem described above easily, it also means all subclasses no longer have to worry about wrapping things in events since the base class will handle that automatically.
Another even more important benefit of "Template Method" that is not present in this simple example but that is used in Component rendering is that then you can have a defined execution flow in a base class and you know all subclasses will be complete with what they need to do at each step before continuing to the next step.
Regards,
Jack
发表评论
-
jQuery Mobile插件开发1
2012-10-17 14:31 3587最近的项目使用jQuery Mobile开发别克手机官网 ... -
localStorage、sessionStorage用法总结
2012-10-15 17:25 88455localStorage和sessionStorage ... -
Bit This 视觉差滚动效果分析
2012-07-06 11:44 2848Bit This 是一家位于西班牙马德里的代理公司。 ... -
深入详解EXT2.3事件增加及删除源码
2012-02-23 11:06 1476先看addListener也就是Ext里面的on方法 ... -
答复: [原创]ExtJS 2.3源码分析(2012年02月21日更新)
2012-02-21 13:51 922临时详解下下面的代 ... -
JAVA验证中文正则
2012-02-20 22:03 1183public static void main(String[ ... -
HTML5 Geolocation小结
2012-02-20 17:23 1199HTML5中 Geolocation主要包 ... -
HTML5中JSON的原生支持
2012-02-20 17:22 10231、可以直接使用JSON.stringify(jsonobje ... -
JavaScript函数变换
2012-02-20 17:16 903在编写JS框架时有时会遇到编写的方法涉及复杂的操作或需要定义特 ... -
如何在MyEclipse中修改Maven本地仓库位置
2010-06-17 23:14 84221、本地需要安装Maven。这里假设安装在D:\Program ... -
目前已出版的基本Flex4书籍(是英文已出版)
2010-04-01 13:40 23821、Professional BlazeDS: Creatin ... -
JavaScript系列视频
2010-03-24 11:18 905大家好,由我和CSDN的学生大本营合作进行JavaScript ... -
Flex4正式版命名空间的变化
2010-03-24 11:03 1322与之前的FLEX3相比,在FLEX4的beta版(包括beta ... -
如何使用ExtJS构建应用系统3
2009-12-30 16:14 1346原文地址:http://blog.extjs.eu/know- ... -
如何使用ExtJS构建应用系统2
2009-12-30 16:13 2087原文地址:http://blog.extjs.eu/know- ... -
如何使用ExtJS构建应用系统
2009-12-30 16:10 3003原文地址:http://blog.extjs.eu/know- ... -
《数据仓库生命周期工具箱》读书笔记 1
2009-11-05 13:39 1163今天读的是这本书的第6 ... -
《数据仓库》读书笔记 4
2009-10-26 17:55 876今天开始读数据仓库的第四章,这一章讲解的是数据仓库中的粒度。 ... -
《数据仓库》读书笔记 3
2009-10-16 15:07 914这两天读了《数据仓库》第三章,这一章讲解的是设计数据仓库。 ... -
《数据仓库》读书笔记 2
2009-10-15 10:12 895读了数据仓库第2章,这 ...
相关推荐
Extjs4 中Line chart使用Ajax数据源绘图,具体请参考文章http://blog.csdn.net/cl11404303/archive/2011/05/31/6457951.aspx
这里主要介绍了ExtJS常用组件的样式修改,包括工具栏样式修改、菜单样式修改、树形菜单样式修改、表格样式修改、按钮样式修改等。
Extjs中文文档,包含Extjs的基本语法和各个类的详细说明以及用法。
Extjs 中文API文档,有对Extjs相关API的中文说明
ExtJs 实例+ExtJs中文教程 大量ExtJs的实例和目前最好的ExtJs中文教程,学习ExtJs的朋友可以参考一下
extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例
ExtJs中文API,比较全面!并且提供了很多的例子!! ExtJs中文API,比较全面!并且提供了很多的例子!! ExtJs中文API,比较全面!并且提供了很多的例子!! ExtJs中文API,比较全面!并且提供了很多的例子!!
ExtJS中文文档,很好,很强大!绝对值得一看哦!
全面的extjs api 使用的中文帮助文档 二合一 实用 本人正在用 很不错
extjs3.3的中文文档
绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!
此压缩包中完全能实现的功能是在extjs中让本地照片预览,并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据...
只有年月选择--dateYM.html (这个在EXTJS4.0和4.1下显示都是可以的) 2.扩展日期选择时分秒--dateTimeField4.0.html (这个只在EXTJS4.0下显示可以) EXTJS4.1文件夹下面包括 1.只有年月选择--dateYM.html ...
新手学习,初学extjs时用刚刚好,里边有三个例子,还有一个我自己写的例子(简单粗暴动态菜单),还有一个中文API
extjs 中文 api chm格式的!可以跟好的帮助你学习富客户端技术!!!!!!
收集了ExtJS中文站上的资料,共52篇文章,保留了文章的原始风貌,支持关键字查询,里面的内容可以选择后ctrl-C拷出来。赚个辛苦分。
extjs4.1 中文API
第一讲:extjs4.0概述和HELLO WORD程序 第二讲:extjs4.0的新特性 第三讲:extjs4.0数据模型--Model 第四讲:extjs4.0的数据代理-Proxy 第五讲:extjs4.0的读写器reader,writer 第六讲:extjs4.0的数据集store 第七...
Extjs 中文文档 学习文档
extjs中使用FusionChart举例