`

阅读 Ext 学习Javascript(一)Core/Ext.js

阅读更多


从Library的角度去看,Ext (喜欢 中文的朋友可以到它的中 文站 看看)和Prototype  JQuery YUI没有太大区别,但它有它的优点,完整的OO支持、成熟的通用widgets并支持主题、良好的扩展性、快速的更新发布新的widgates、社区也 很热闹。最重要的是我个人比较喜欢它。

首先打开源代码看一下它的结构: ext 从core开始看吧

Ext = {version: '2.0-beta1'};
这一行代码是定义一个变量Ext,没有使用var表明作者的意思是要将它定义为全局的。等号右边是Json (Javascript object Notation)格式,等效于以下代码:
Ext = new Object();
Ext.version = '2.0-beta1';

window["undefined"] = window["undefined"];
这行代码需要说明的是window和Ext不同,它是内置的Borwser对象,无需代码声明。和C#等编译类语言不同,在js中当一个对象存在以后,我 们可以在任何时候对它的成员进行修改。对像成员的访问有两种方式:一是点记法(如Ext.version),二是索引法Ext["version"]。索 引法看上去麻烦,但实际上却很灵活,而且在有些场合(如下面将要提到的namespace override等函数)是不可替代的。如遍历对象的成员(属性集合中的每一项)。undefined在IE(js)5.5之后的版本中才有,这里的这种 写法就巧妙的兼容了旧版本的浏览器。理解了索引法对成员的访问后,来看一下Ext.apply方法。

Ext.apply = function(o, c, defaults){
    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;
};

这是一个相当关键的方法,它和Prototype中的Object.Extend是一样的(这里没有用extend是因为它被用到继承 Ext.extend上面了),实现了对象扩展的功能,即从对象c拷贝成员的功能(如果有默认配置,则先从默认配置扩展)。Ext有了这个方法后,紧接着 用这个方法对自己进行了丰富的扩展。扩展的时候用了下面这种写法:
(function(){var i=100;alert(i)})()
这种写法就是传说中的匿名函数,它的好处是函数内部定义的对象在函数外面永远无法访问,除此之外这个匿名函数也是不可被其它代码访问的,即使得对象之间不 容易被命名污染(在js中很多错误是由于对象命名冲突引起的)。按照通常的写法我们会这样写function a(){var i = 100;alert(i)};a();这样写就留下了一个对象a(在不要再用的时候就成了内存垃圾)。回到Ext对象,它给自己添加了几个很重要的成员:

  1. namespace   命名空间,js的命名空间其实就是对项链。如传入"a.b.c",则生成三个对象,并链接起来。需要说明的是 Ext.namespace("a.b.c")会出错,因为它内部把a指向了arguments,这样生成的对象在namespace的外边是不存在的。 在以后的文章里,会以Ext扩展的命名空间来逐一阅读理解。
  2. applyIf(o, c)  将对象c中非未定义成员扩展到o上
  3. addBehaviors(o) 
  4. id() 生成唯一对象ID,
  5. extend  对函数扩展,即类型继承。这是一个至关重要的成员,整个框架中类型的派生 都离不开它的支持。
  6. getDom 与Prototype的$一样
  7. type
  8. removeNode
  9. destroy
  10. num
  11. callback
  12. combine
  13. each
  14. urlDecode
  15. urlEncode

 

Js内置的类型有object string function number boolean array date

下面是Ext对内置对象和其原型的扩展

  1. Function.prototype
    1. createCallback 将当前函数应用到指定的对象上,并返回新的函数供调用执行
    2. createDelegate 也是返回一个新函数,差异在以后的章节详细阐述
    3. defer
    4. createSequence
    5. createInterceptor
  2. String
    1. escape  转义'和\符号
    2. leftPad 很像C#的PadLeft PadRight,自己写的时候往往忘记考虑传入空字符串,会造成死循环
    3. format  格式化字符串,类似C#的String.Format
  3. String.prototype
    1. toggle 交换两个,用于代替三值表达式
    2. trim 去掉空格
  4. Number.prototype.constrain
    1. indexOf
    2. remove
  5. Array
    1. indexOf
    2. remove
  6. Date.prototype.getElapsed 获取当前时间与该对象之间的毫秒数

继续 阅读Ext学习Javascript(二)Core/Ext.extend 从继承说起

分享到:
评论

相关推荐

    EXT学习札记--京华志

    **EXT**(Ext JS)是一种基于JavaScript的开源框架,用于构建现代化的Web应用程序。它利用Ajax技术,为用户提供流畅且响应式的交互体验。EXT提供了丰富的用户界面组件库,支持多种后端技术如ASP.NET、C#、JQuery等,...

    Ext.get与Ext.fly 的区别

    在阅读《Ext_Core手册.pdf》时,可以深入研究EXTJS的核心概念和API,了解更多关于`Ext.get`和`Ext.fly`的底层实现以及它们在不同场景下的应用策略。同时,理解EXTJS中的`Element`类和DOM操作对于提升EXTJS应用的性能...

    ext培训第一讲.doc 1/4

    - **ext-core.js**:压缩后的Ext核心组件,包括`sources/core`下的所有类。 - **ext-core-debug.js**:未压缩的Ext核心组件,同样包含`sources/core`下的所有类。 #### 三、EXT开发环境搭建 ##### Eclipse与...

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    <script type="text/javascript" src="ext-2.3.0/adapter/ext/ext-base.js"></script> <!-- ENDLIBS --> <script type="text/javascript" src="ext-2.3.0/ext-all.js"></script> <script type="text/javascript...

    Ext core 3.1.0的一个大Bug

    标题 "Ext core 3.1.0的一个大Bug" 暗示了我们在讨论JavaScript库Ext JS的核心组件在特定版本3.1.0中的一个重大问题。Ext JS是一款广泛使用的前端开发框架,提供了丰富的UI组件和强大的数据管理功能。在这个问题中,...

    Ext.ux.submit的例子

    Ext Core是Ext JS的一个轻量级版本,它包含了构建JavaScript应用程序所需的一些核心组件、布局和工具。虽然它没有完整的Ext JS框架那么强大,但非常适合那些只需要部分功能或希望减少页面加载时间的项目。 Ext.ux....

    Practical.Ext.JS.4.pdf

    在第一章“Core JavaScript and JavaScript Frameworks”中,作者首先带读者复习了核心JavaScript的知识,包括基础语法、对象模型和DOM操作等,为理解后续的Ext JS框架打好基础。接着,作者介绍了JavaScript框架的...

    Ext js 最新学习资料整合 包括API(3.0) cookbook ,in action

    Ext JS 是一个强大的JavaScript库,主要用于构建富互联网应用程序(RIA)。这个压缩包包含了关于Ext JS 3.0的最新学习资料,特别强调了API文档、Cookbook和一本名为"Ext In Action"的书籍,这些都是深入理解和掌握...

    Ext框架开发文档及ext-core.js

    EXT的核心库,ext-core.js,是一个轻量级的JavaScript库,提供了基本的UI组件和数据绑定功能,使得开发者能够创建复杂的交互式网页应用。EXT框架基于jQuery库,但扩展了更多面向对象的组件和布局管理功能。 EXT框架...

    Gwt-ext学习笔记之基础篇

    - 在项目的`public`目录中创建`js`文件夹,并将`ext-2.1`目录下的`adapter`、`resources`目录以及`ext-all.js`、`ext-core.js`等文件导入到`js`文件夹下。 3. **修改HTML宿主页面和模块配置文件** - 在`Register...

    Ext.ux.Upload.Dialog使用

    通常,这些依赖包括`ext-all.js`(或精简版`ext-core.js`)以及`ext-theme-neptune.js`(或其他主题文件)等。此外,还需要将`Upload.Dialog`的JavaScript文件和CSS样式文件引入到你的项目中。 接下来,创建一个`...

    Ext JS v3.1.1.zip

    Ext JS是一个强大的JavaScript库,专为构建富互联网应用程序(Rich Internet Applications, RIA)而设计。这个库在v3.1.1版本中提供了一系列高级功能,使得开发者能够创建高效、响应式且交互性强的Web界面。Ext JS的...

    (转载)GWT -EXT学习笔记-基础

    3. 在项目的`public`目录下新建`js`文件夹,并将`ext-2.1`目录下的`adapter`、`resources`以及`ext-all.js`、`ext-core.js`文件复制到`js`文件夹下。 **步骤二:修改HTML宿主页面和模块配置文件** 1. 修改`...

    Ext 学习总结 pdf版

    Ext JS是一个用于构建交互式Web应用程序的JavaScript库,其结构树通常包括以下几个关键组成部分: 1. **核心库(Core Library)**:包含Ext JS的基本功能,如DOM操作、事件处理等。 2. **用户界面(UI)部件**:提供了...

    Ext开发总结

    这通常包括`ext-all.js`(包含所有组件和功能)或`ext-core.js`(基础组件集,适用于轻量级应用),以及对应的样式文件`ext-all.css`。这些文件确保了Ext的基本功能和样式正常工作。 2. 添加和删除事件 事件处理是...

    EXT_JS实例,官方实例

    EXT_JS是一种基于JavaScript的开源富客户端框架,专为构建交互式、数据驱动的Web应用程序而设计。EXT JS的核心是EXT Core,它提供了一套高级的DOM操作和事件处理功能。EXT JS实例通常包括一系列预定义的组件、布局、...

    Ext2.0.2经典的一个JS组件带EXT中文手册.rar

    - `ext-core-debug.js`和`ext-core.js`:这些是ExtJS的核心库,包含基本的DOM操作、事件处理和一些基础组件,对于只需要使用一小部分功能的项目很有用。 3. **其他文件**: - `CHANGES.txt`:记录了ExtJS从上一...

    Gwt-ext学习笔记

    - 在项目的`public`目录中创建`js`文件夹,并导入`ext-2.1`目录下的`adapter`、`resources`目录以及`ext-all.js`、`ext-core.js`文件。 2. **修改HTML宿主页面**: - 在`Register.html`文件中添加CSS和JS链接: ...

Global site tag (gtag.js) - Google Analytics