日期:2014-05-16 浏览次数:20336 次
首先声明一下,以下部分内容摘自网上
?
一、?有了上一篇ExtJs源码结构和ExtJs自带的调试工具后,下面介绍一下ExtJs最核心的部分ext-core
二、?首先看Ext.js文件
window.undefined = window.undefined;
?
该段代码是为了兼容不支持window.undefined对象的老版浏览器(估计现在没人用老版浏览器了,呵呵),详细说明可参考
有关window.undefined=window.undefined写法的理解
?
Ext = { /** * The version of the framework * @type String */ version : '3.3.1', versionDetail : { major : 3, minor : 3, patch : 1 } };
?
以上代码定义全局变量Ext
?
/** * ExtJs实现对象继承 * Copies all the properties of config to obj. * @param {Object} obj The receiver of the properties * @param {Object} config The source of the properties * @param {Object} defaults A different object that will also be applied for default values * @return {Object} returns obj * @member Ext apply */ Ext.apply = function(o, c, defaults){ // no "this" reference for friendly out of scope calls if(defaults){ Ext.apply(o, defaults); } if(o && c && typeof c == 'object'){ for(var p in c){ o[p] = c[p]; } } return o; };
?
ExtJs核心代码之一,主要实现对象的继承
该方法有两种执行
其一,只传o,c时直接将c上的所有属性/方法拷贝给o后返回;
其二,defaults也传时,会将defaults,c上的所有属性/方法都拷贝给o ,传三个参数时,首先拷贝defaults,然后再拷贝c,这个方法的实现蛮有意思的。
有了该方法后,ExtJs中对象之间的继承就变得容易多了,只要调用该方法,就可以把A对象上的所有方法复制到B对象上。
?
/** * Copies all the properties of config to obj if they don't already exist. * @param {Object} obj The receiver of the properties * @param {Object} config The source of the properties * @return {Object} returns obj */ applyIf : function(o, c){ if(o){ for(var p in c){ if(!Ext.isDefined(o[p])){ o[p] = c[p]; } } } return o; },
?
Ext.apply方法进行复制,它会覆盖子对象中的同名属性或方法的,ExtJs为了避免这种不必要的覆盖有提供了Ext.applyIf函数,该函数可以解决这个问题,在进行属性和方法复制时会判断子对象中是否已存在。
接下来是一个匿名函数,而且该匿名函数在初始化时即运行。执行完后给Ext上扩展了许多实用的属性和方法。
在匿名函数中首先定义了一些局部变量,比如判断浏览器种类、操作系统等。接下来的代码解决了IE6下css背景图不缓存的bug
?
// remove css image flicker // 解决IE6下css背景图不缓存bug if(isIE6){ try{ DOC.execCommand("BackgroundImageCache", false, true); }catch(e){} }
?
实现原理及说明可参见
解决IE6背景图片不缓存的BUG
?
接下来就是Ext.apply()的应用了,扩展了许多Ext实用方法和属性
?
其中Ext.isStrict 并非判断html文档模式为严格模式,而是指标准模式,如<!DOCTYPE HTML>声明会返回true。详细说明可参考用doctype激活浏览器模式 ,国内的秦歌 翻译了该篇文章
?
/** * 返回当前dom节点id,没有设置ExtJs会默认生成 * Generates unique ids. If the element already has an id, it is unchanged * @param {Mixed} el (optional) The element to generate an id for * @param {String} prefix (optional) Id prefix (defaults "ext-gen") * @return {String} The generated Id. */ id : function(el, prefix){ el = Ext.getDom(el, true) || {}; if (!el.id) { el.id = (prefix || "ext-gen") + (++idSeed); } return el.id; },
?
该方法为dom元素生成唯一id,如果该元素id存在则不重新生成。默认id前缀为ext-gen,也可通过传参prefix改变
?
ECMAScript 5已经发布半年多了,添加了一些新的API方法,如Array的indexOf,forEach等方法,部分新版本浏览器已经支持这些方法来,但我们想为老的浏览器扩展该方法。可能会这样写
?
var proto = Array.prototype; if(!proto.indexOf){ proto.indexOf = function(){ // ... } } if(!proto.forEach){ proto.forEach = function(){ // ... } }
?
上面书写即保证优先使用浏览器原生支持的API方法,不支持的使用自定义实现的。但这里每次都需要判断下Array原型上是否存在该方法。
google closure
? 实现方式类似使用了三元运算符,每次都要判断下,相对丑陋。网上有一些对google closure的 批评
,及一些效率低下的 具体分析
? ,批评者甚至包括大牛:Dmitry Baranovskiy
。相对来说,Ex