专栏首页布尔阅读Ext 学习Javascript(一)Core/Ext.js

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

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

首先打开源代码看一下它的结构:

从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 从继承说起

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Ext整体印象

    其实国内不乏有自己开发自己框架的公司,比如上海的道锐(不如Ext全面,更侧重于其业务经验)等,一直以来我们关心的重点都在服务器端(如程序结构、设计模式、数据库设...

    用户1183026
  • Ext JS 6 新特性和工具

    Ext JS 6 新特性和工具 Ext JS 6 带来很多新特性、工具和改进。以下是一些亮点: • 合并了 Ext JS & Sencha Touch - 在 ...

    用户1183026
  • 游标清除重复数据

    有时候导数据会把数据导重,需要根据某些信息清除掉重复数据,同学做信息机业务的,不小心把用户信息导重复了,造成不能发短信。我帮他写了个游标来清理重复数据。memb...

    用户1183026
  • [翻译]Ext JS 教程-类系统 原

    <h3>类系统</h3> <p>ExtJS 史上第一次进行了重整新的类系统的大重构。新的架构以ExtJS 4.X所编写的每一个类作为后盾,因此在你编写代码以前...

    LeoXu
  • Ext整体印象

    其实国内不乏有自己开发自己框架的公司,比如上海的道锐(不如Ext全面,更侧重于其业务经验)等,一直以来我们关心的重点都在服务器端(如程序结构、设计模式、数据库设...

    用户1183026
  • ExtJS中xtype一览

    基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带...

    hbbliyong
  • 对于Ext.data.Store 介紹 与总结,以及对以前代码的重构与优化

         对于Ext.data.Store 一直不是很了解,不知道他到底是干嘛的有哪些用处,在实际开发中也由于不了解也走了不少弯路, store是一个为Ext器...

    hbbliyong
  • extjs 基础部分

    创建对象的方法:     使用new 关键字创建对象。       new  classname ([config])     使用Ext.create方法创建...

    用户1197315
  • EXTJS7 eventedConfig用法

    路过君
  • 扒虫篇- Bug日志 Ⅷ

    不执行的原因是 在VC中使用这个ImageUploaderManager时,需要设置为全局变量,如果是局部变量的话,很快会被销毁掉,其中的代理自然不会执行了。

    進无尽

扫码关注云+社区

领取腾讯云代金券