EXT 源码学习与研究(一)

EXT 源码学习与研究(一)

1.
适配器

EXT 原来是Yahoo YUI JS的一个扩展, 依赖YUI的底层代码来处理跨浏览器问题. 目前,用户可选择第三方实现或EXT来适配. 当然, 用EXT是最佳选择.

2.
核心

核心是构建于适配之上的底层代码.

3.
作用域

var o1 =
{
    fVar : 15,
    fMethod : function(){
        alert('o1 ' + this.fVar);
    }
}

var o2 =
{
    fVar : 16,
    fMethod : function(){
        alert('o2 ' + this.fVar);
    }
}

// 在o2的作用域内执行,this=o1
o1.fMethod();  // o1 15

// 在o2的作用域内执行,this=o2
o1.fMethod.apply(o2);  // o1 16

这说明函数定义在哪并不重要.它可以随时切换调用者.因此, 在一个函数内使用this是要相当小心的. 它可以是o1也可以是o2,这要看你怎么调了.

函数中this通常是函数的调用者,而对象块this是对象自己.
注意: JS是没有类,只有对象和函数.

4.
delete

它只能删除对象的属性.
有些对象的属性是不能删除的,比如 window.undefined;原型链属性.
有些则是可以删除的,比如Ext.version.
注意: 删除的属性若没有定义,也会成功返回TRUE.
因此,对于undefined类型,有三种运算符是支持的.
a: typeof a
b: delete a
c: a = 1

5.
prototype & constructor

alert(Object.prototype == {}); // [object Object]       false
alert(Object.constructor); // function Function(){ native code }
alert(Function.prototype == (function(){})); // function prototype(){ native code }  false
alert(Function.constructor); // function Function(){ native code }
alert(String.prototype == ''); // ''  true
alert(String.constructor); // function Function(){ native code }
alert(Boolean.prototype == false);  // false  true
alert(Boolean.constructor); // function Function(){ native code }
alert(Number.prototype == 0); // 0  true
alert(Number.constructor); // function Function(){ native code }
alert(Ext.prototype == undefined); // undefined  true
alert(Ext.constructor); // function Object(){ native code }
alert(Date.prototype == new Date(0)); // [19700101] true
alert(Date.constructor); // function Function(){ native code }

每种类型的原型都是不同的,构造函数也是不同的.自定义对象若原型为undefined,则它的构造函数默认是 Object.prototype.constructor.
Object.prototype 就是真正的基对象.它似乎没有任何属性,但它不是{},也不是Global对象.
Function.prototype 是一个prototype 函数,它不返回任何值.
Function.constructor 也是一个函数, 它实际上就是Function对象本身.所有构造函数默认是Function.
不只这样,函数原型的构造器也是Function.

6.
Ext.apply(obj, config, defaults);

此方法将config,defaults的属性全部复制到obj对象中. config覆盖defaults的同名属性.

7.
Ext.extend(subObject, supObject, overides);
Ext.extend(supObject, overides);

继承.通过原型链来操作父类原型上的属性,同时可以覆盖父类原型上的属性.
将子类的原型指向父类的原型.
参考:
http://wangyu.iteye.com/blog/210849

8.
Ext.override(overrideObj, overrides)

覆盖或重写
将对象原型上的方法进行重写.

9.
Ext.namespace(...)

创建多个命名空间,命名空间用来限制变量的作用域.
此方法只返回最后的字符串创建的命名空间.

var o = Ext.namespace('TangLiang', 'TangLiang.NS');

alert(o == TangLiang);
alert(o ==  TangLiang.NS);

上面的代码相当于:
TangLiang = {};
TangLiang.NS = {};

10.
核心语法

定义匿名函数并执行
(function(){

})();

// 为什么要这样写,而不是直接写到顶层? 可能是与作用域有关系.

11. 类型转换

// 字符串转换成布尔型
isElement : function(v) {
            return v ? !!v.tagName : false; // '' false ; 'abc' true
        }

// 字符串转换成数组
"abc".match(/./g); //[a,b,c]

// 字符串转换成数字
parseInt('077'); // 77

// 数字转换成字符串
toString(77); // '77'

// 字符串转换成日期
new Date(YYYY/MM/DD); 

// 取当前时间
new Date();

// 取1970/01/01
new Date(0);

12.
createInterceptor
函数注入(BEFORE)

func.createInterceptor(funcInterceptor, this);
funcInterceptor();

// before of func exec funcInterceptor,
// if return [boolean true] exec func.

13.

useShims
遮罩

14.
核心语法

var o = {
    "fName" : function(){
        alert(this["fName"]);
    }
}
o.fName();

15.
=

var a, b, c;

// 等价于 c = (false || 0) = 0; b = (c = false || 0) = 0; a = (b = c = false || 0) = 0
a = b = c = false || 0; 
 
// 等价于 alert(c);
alert(a, b, c);  

16.

// 获取函数形参数量,实参数量
var add = function(a, b)
{
    alert(arguments.callee.length);  // 2
    alert(arguments.length);  // 1
    return a ? (b ? a + b : a) : 0;
}

alert(add(1));