Ext JS4学习方法分享
日期:2013-12-06点击次数:7500
Ext js 4并不只是对Ext js 3的简单的升级、增加功能,而是完全的重构,以获得更好的性能。ext js是一个很强大的js框架,加之Ext js 4版本的出现,把ext js又推向了一个新的高点。Extjs4框架是java script较复杂的框架之一,无论是从其设计角度还是使用其开发的角度,Extjs4都值得深入学习。下面分享一下我的学习方式。
下载解压API后,在目录extjs-4.2.0\src\core\src中可以看到文件Ext.js和Ext-more.js,这俩个文件包含了Ext的基本定义、基本的属性和方法以及四个重要的方法:apply、applyIf、override和extend.
就用Ext.js的apply方法来说下我的学习方式:
先了解下apply方法的用途:是将所有配置对象的成员复制到对象。
看下源代码:
Ext.apply = function(object, config, defaults) {
if (defaults) {
Ext.apply(object, defaults);
}
if (object && config && typeof config === 'object') {
var i, j, k;
for (i in config) {
object[i] = config[i];
}
if (enumerables) {
for (j = enumerables.length; j--;) {
k = enumerables[j];
if (config.hasOwnProperty(k)) {
object[k] = config[k];
}
}
}
}
return object;
};
如果默认defaults存在,先递归调用apply方法进行复制(注意递归时调用的apply方法defaults参数位置为配置对象的位置)。
如果俩个参数存在,即对象存在、配置对象在、并且配置对象的类型为“object”,开始进行复制,使用for…in语句遍历配置对象的成员,然后将其复制到对象。
一些浏览器的for…in语句不支持枚举从Object对象继承的的'hasOwnProperty'、'valueOf'、'isPrototypeOf'、'propertyIsEnumerable'、'toLocaleString'、'toString'、
'constructor'属性所以需要进行专门的复制
(function() {
var global = this,
objectPrototype = Object.prototype,
toString = objectPrototype.toString,
enumerables = true,
enumerablesTest = { toString: 1 },
iif (typeof Ext === 'undefined') {
}
Ext.global = global;
for (i in enumerablesTest) {
enumerables = null;
}
if (enumerables) {
enumerables = ['hasOwnProperty', 'valueOf', 'isPrototypeOf', 'propertyIsEnumerable',
'toLocaleString', 'toString', 'constructor'];
}
/**
* An array containing extra enumerables for old browsers
* @property {String[]}
*/
Ext.enumerables = enumerables;
用Object.prototype判断当前浏览器的for…in语句是否支持枚举Object对象原型的toString属性,如果浏览器支持属性Object.prototype,则enumerables被负值为null,如enumerables值 为true,说明要执行特殊的复制方法,enumerables的指针便会指向包含这些属性的数组。enumerables不为null则要特殊复制,在复制的for循环中,需要使用hasOwnProperty方法进行判断该参数是否为config对象中的属性,如果存在便复制。
有时会遇到一些不常用的js方法或属性,需要自己去查找资料学习,通过分析这些代码可以从其设计理念中知道如何去学习和使用这个框架,还可以从中提高自己写代码的水平和对java script更多的认识。
软件部 王涛