引用 extJs 2.0学习笔记(ext.js篇)
来源:互联网 发布:淘宝店为什么要刷销量 编辑:程序博客网 时间:2024/06/11 16:53
研究工具:Dreamweave cs3(装那个extJs 2.0插件老装不上)、Aptana(一个好处,好看代码,有括号匹配,json语法好是好,就是括号多了,搞清在哪儿结束) 发现,extJs的代码最喜欢用json语法定义,类基本上都是用json语法定义的。而不是在外面一大路的xx.prototype.yyyy=function(){……}。不过这种语法蛮清晰。我喜欢。 extJs时面只有一个类:Ext,它是一个静态类。提供了经常要用到的函数。 Ext.apply = function(o, c, defaults){ 这是apply函数,作用其实相当于克隆,它把对象c中的成员全部复制到o中去。如果有defaults,也把它的内容复制到o中。这儿其实揭示javascript的一种语法: javascript中的对象的成员有两种引用方法: 一、o.propertyName 二、o[propertyName] 这段代码关键就在o[p]=c[p]。这个要理解。尽管如此,但是不能像下面一样做: var newelem=new Object(); 下面一大段的代码,由于dw不好看代码,半天才晓得那儿是个(function(){……Ext.apply(Ext,{……}})(),这是我把概述出来。这样写呢,实在有点叫人别扭,作者的意图是想把这相关的一段全部放到括号中,以免造成理解上的混乱。能理解。不过,这种写法不大招人喜欢。 applyIf : function(o, c){ 这是applyIf的代码,事实上,在文档上面,它的描述有问题,应当是是当o,c两个对象都存在时,则把o中不存在,c中存在的属性复制到o中,且属性名不变。而不是所谓“如果o不存在时就把属性复制到o中”,哪有这种说法的。另外,判断一个对象是不是存在,最严谨的还是用typeof的方法。 addBehaviors : function(o){ 这个地方巧妙在于依赖于Ext.isReady。这个属性我估计应当是在onload第一行将它设成true的,它的作用就是用于标志当前是不是已经文档模型加载完了。前面几行的意思:如果dom模型还没有加载完,没有准备好,就将这些事件注册代码交给onload去做。即Ext.onReady。 如果DOM模型已加载完,那么就马上注册事件,区别:前者是延迟注册、后者是马上注册。为什么要延迟,因为DOM都没有创建完,有些元素在DOM树中还不存在,当然就没法设置它了。其余的地方则不足道,后面的关键就是Ext.select了。 id : function(el, prefix){ 这儿有一个技巧:prefix = prefix || "ext-gen",这是最简捷的代码啊。本来要一个if语句的。 extend、namespace两个函数硬是没有看懂,等水平高了再来研究。 urlEncode的源代码原理简单,但是,要是我的话还是没法写得这么清楚,主要是情况比较多。这儿主要是学到了数组的push,原来以为push只能传一个参数,没想到能一次传多个。发现,很多时候,在构造一个复杂的字符串时都是用到数组的。至于urlEncode的作用,就是把一个JSON对象编码成一个查询字符串。 each : function(array, fn, scope){ 这个函数的功能并不是像它的名字一样简单啊,这儿又学到了: 一、原来构造单元素数组可以直接这样写:a=[a]。 二、scope在这儿是默认伪调用者,同时,还把当前数组元素值、序号、数组引用都传过去了。这个可能在fn中用得着。要注意。 另外就是x===false这个语句要注意。要知道undefined==false。 callback : function(cb, scope, args, delay){ 吃了一惊,Function什么时候有个成员叫defer了?后来才知,defer是extJs扩展出来的。delay是时延。老实说scope这个东西不能言传只可意会,不看代码是不清楚的。事实上javascript中的确是存在defer属性的。用于修饰script元素的,确实是用于延迟script里面内容的加载。详情见此处。 destroy : function(){ 这个函数用来销毁对象,由代码可知一点,extJs鼓励大家在创建自己的类有必要的话就写destroy。如大量没用的dom元素。在这里,destory相当于析构造函数一样。至于removeAllListenners,remove这两个函数,它们是Ext.Element类的成员。 removeNode : isIE ? function(){ 这个代码作用显然,就是删除一个结点。但是这个代码的写法实在有点让人难以接受啊。最郁闷是如果ie,那么,那个参数n是怎么传进去的呢,因为外面罩住的那个函数没有参数,本来没有参数也好办,关键是外面的那个函数根本没有传参数给return里面的函数,这居然也能传进去,见识到了。 经过一番实验与琢磨,发现,其实并不是外面的函数能传参给里面的那个函数,实在是因为那个()用得好,如有: var do1=function(){return function(n){}}(); 关键是要外面的函数{}之后要马上“自调用”一下,这样就会返回一个结果,这个结果是个函数表达式,它就能传参了。所以如果外面的函数没有()的话,那么实际调用将必须写成:do1()(3)的形式,连写两个括号。。这个问题我想了好久,终于想清楚了。 createCallback : function(/*args...*/){ 顾名思意,回调。这个函数是对Function对象的原型扩展。所以,所有函数都有这个成员。例如: function A(){} B=A.createCallback(); B(); 最后B()执行调用的是A。有人说,既然调用B就相当于调用A,还不如直接用 function B(){A.apply(window,this.argments);} 的确,这样确实可以达到差不多的目的,但是,写代码要注意封装。尽管这只有一行代码,但是,相对于客户程序员来说,createCallback比apply亲切多了,而且,它还节省了不少字符,这就节省带宽。 什么时回调?让别人来调,那为什么不定义在那个调用者里面?因为,只有定义在别人的里面才可以获得别人的信息。 当然,在这儿我还是学到了一点,以前没意识到,怎样把外层的this传给内层的function。只需method=this。 有一些Ext下的函数并没有定义在ext.js中。如:Ext.onReady、Ext.reg、Ext.select、Ext.query。
if(defaults){
// no "this" reference for friendly out of scope calls
Ext.apply(o, defaults);
}
if(o && c && typeof c == 'object'){
for(var p in c){
o[p] = c[p];
}
}
return o;
};
Ext.apply(newelem,Ext.getDom("a1"));
Ext.getDom("form1").appendChild(newelem);
if(o && c){
for(var p in c){
if(typeof o[p] == "undefined"){ o[p] = c[p]; }
}
}
return o;
}
if(!Ext.isReady){
Ext.onReady(function(){
Ext.addBehaviors(o);
});
return;
}
var cache = {};
for(var b in o){
var parts = b.split('@');
if(parts[1]){ // for Object prototype breakers
var s = parts[0];
if(!cache[s]){
cache[s] = Ext.select(s);
}
cache[s].on(parts[1], o[b]);
}
}
cache = null;
}
prefix = prefix || "ext-gen";
el = Ext.getDom(el);
var id = prefix + (++idSeed);
return el ? (el.id ? el.id : (el.id = id)) : id;
}
if(!Ext.isArray(array)){
array = [array];
}
for(var i = 0, len = array.length; i < len; i++){
if(fn.call(scope || array[i], array[i], i, array) === false){ return i; };
}
}
if(typeof cb == "function"){
if(delay){
cb.defer(delay, scope, args || []);
}else{
cb.apply(scope, args || []);
}
}
}
for(var i = 0, a = arguments, len = a.length; i < len; i++) {
var as = a[i];
if(as){
if(typeof as.destroy == 'function'){
as.destroy();
}
else if(as.dom){
as.removeAllListeners();
as.remove();
}
}
}
}
var d;
return function(n){
if(n && n.tagName != 'BODY'){
d = d || document.createElement('div');
d.appendChild(n);
d.innerHTML = '';
}
}
}() : function(n){
if(n && n.parentNode && n.tagName != 'BODY'){
n.parentNode.removeChild(n);
}
}
// make args available, in function below
var args = arguments;
var method = this;
return function() {
return method.apply(window, args);
};
}
- 引用 extJs 2.0学习笔记(ext.js篇)
- 引用 extJs 2.0学习笔记(ext.js篇)
- extJs 2.0学习笔记(ext.js篇)
- 引用 extJs 2.0学习笔记(Ext.Element API总结)
- 引用 extJs 2.0学习笔记(Element.js篇)
- 引用 extJs 2.0学习笔记(DomHelper.js篇)
- extJs 2.0学习笔记(Ext.Panel篇一)
- extJs 2.0学习笔记(Ext.Panel篇二)
- extJs 2.0学习笔记(Ext.Panel篇三)
- extJs 2.0学习笔记(Ext.Panel篇三)
- extJs 2.0学习笔记(Ext.Panel篇四)
- extJs 2.0学习笔记(Ext.Panel终结篇)
- extJs 2.0学习笔记(Ext.data序论篇)
- extJs 2.0学习笔记(Ext.Panel篇一)
- extJs 2.0学习笔记(Ext.Panel篇二)
- extJs 2.0学习笔记(Ext.Panel篇三)
- extJs 2.0学习笔记(Ext.Panel篇四)
- extJs 2.0学习笔记(Ext.Panel终结篇)
- 引用 extJs 2.0学习笔记(DomHelper.js篇)
- static ,final, static final 的实际意义
- MapXtreme2004代码 读取TAB表中的元素
- asp.net(C#)上传下载及文件管理代码
- PE结构里的段名所指示的内容
- 引用 extJs 2.0学习笔记(ext.js篇)
- 一段旋转图元几何体的代码
- 任务栏 麦克风 关闭
- oracle数据库监听配置
- 网游企业圈钱十宗罪
- Smarty模板快速入门
- Spring结合Quartz实现多任务定时调用
- MapXtreme2004常用代码
- 实现ICollection