`

阅读 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-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 JS in Action, 2nd Edition

    Ext JS is a mature JavaScript web application framework that provides modern UI widgets and an advanced MVC architecture. It helps you manage tedious boilerplate and minimize hand-coded ...

    Ext+JS高级程序设计.rar

    第一部分 Ext Core 第1章 Ext Core重要概念 2 1.1 Ext.Element 2 1.1.1 获取HTMLElement节点的Ext.Element实例 2 1.1.2 CSS样式操作 3 1.1.3 DOM查询与遍历 4 1.1.4 DOM操作 6 1.1.5 事件处理 9 1.1.6 尺寸大小 13 ...

    Ext-Core.rar_javascript

    Ext Core是一款具有多项功能的轻型JavaScript库,基于MIT许可为大家服 务。

    ExtJSWeb应用程序开发指南(第2版)

    6.3.2 Ext.core.DomHelper.applyStyles() 6.3.3 createTemplate() 6.3.4 insertAfter() 6.3.5 insertBefore() 6.3.6 insertFirst() 6.3.7 insertHtml() 6.3.8 overwrite() 6.4 Ext.core....

    Ext 学习中文手册

    本文将简单地介绍Ext的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些JavaScript经验和初级了解HTML Dom。 目 录 EXT 中文手册 1 EXT简介 3 目錄 3 下载Ext 4 开始! 4 Element:...

    Ext JS高级程序设计

    今年,Ext JS不但推出了3.0版本,而且推出了Ext Core,准备在Web 2.0网站开发中占一席之地。Ext Core目前的亮点不多,但经过一段时间的发展后,应该会有不错的成绩。Ext JS 3.0有相当大的改进,譬如在Ext JS 2.x版本...

    Manning - Ext JS In Action 2014(Second Edition)

    SUMMARYExt JS in Action, Second Edition teaches Ext JS from the ground up. You'll start with a quick overview of the framework and then explore the core components by diving into complete examples, ...

    EXTJS 中文手册 电子书

    EXTJS学习必备. 电子书. EXT 中文手册 ................................................................................................................. 1 EXT简介 ...........................................

    Practical Ext JS 4

    After a quick refresher on some JavaScript basics, you will get to grips with Ext JS 4’s OO concepts (such as mixins) and familiarize yourself with its UI components and layout. You'll learn all the...

    ext-3.0.3.zip

    30bubble.jpg 凭借Ext 3.0的激情,这次发布在性能、可连续的兼容性上和伸缩性和UI升级方面都有改进,其中值得一提的是,其文件大小与2.0保持同一... * Ext Core轻型的JavaScript库 * Ext数据调用新方式 * UI新内容

    Ext JS 6 By Example(PACKT,2015)

    Ext JS is one of the most famous JavaScript frameworks used to create rich interactive web applications using techniques such as Ajax, DHTML, JSON, and DOM scripting. It provides a complete rich set ...

    ext_core_manual_zhcn

    Ext Core是一款具有多项功能的轻型JavaScript库,基于MIT许可为大家服务。在Ext Core中有 许多激赏的功能,在倡导快速Web开发的同时也本着高质量、可伸缩性的代码的指导思想进行着。 Core库对DOM操作、Ajax、事件、...

    Practical Ext JS 4.pdf

    Chapter 1: Core JavaScript and JavaScript Frameworks Chapter 2: Overview of Ext JS 4 Chapter 3: Understanding the Ext JS 4 API Chapter 4: Controls and Layout Chapter 5: Working with Data Chapter 6: ...

    ext JS API 实战

    ExtJS由一系列的类库组成,一旦页面成功加载了ExtJS库后,我们就可以在页面中通过javascript调用ExtJS的类及控件来实现需要的功能。ExtJS的类库由以下几部分组成: 底层API(core):底层API中提供了对DOM操作、查询...

    php.ini-development

    best practices at its core. But please be aware, these settings may break ; compatibility with older or less security conscience applications. We ; recommending using the production ini in production...

    Ext core手册

    Ext Core是一款具有多项功能的轻型JavaScript库,基于MIT许可为大家服 务。在Ext Core中有许多激赏的功能,在倡导快速Web开发的同时也本着高 质量、可伸缩性的代码的指导思想进行着。Core库对DOM操作、Ajax、事件、 ...

    2_corejava_tiger.rar

    我有全手套的java相关技术的笔记...14_javascript.rar; 15_ejb.rar; 16_spring.rar; 17_cvs.rar; 18_pl_sql.rar 需要下载的话,请输入相应关键字,便可搜到。 觉得好的话,支持我,我还会上传更多好的资源!谢谢!

    Ext Core手册

    Ext Core是一款具有多项功能的轻型JavaScript库,基于MIT许可为大家服务。在Ext Core中有许多激赏的功能,在倡导快速Web开发的同时也本着高质量、可伸缩性的代码的指导思想进行着。Core库对DOM操作、Ajax、事件、...

    EXT 中文帮助手册

    13 适配器Adapters 13 核心Core 13 Javascript中的作用域(scope) 13 事前准备 13 定义 13 正式开始 14 window对象 14 理解作用域 15 变量的可见度 15 EXT程序规划入门 16 事前...

Global site tag (gtag.js) - Google Analytics