Ext JS学习第九天 Ext基础之扩展原生的javascript对象

此文来记录学习笔记；

•Ext对于原生的javascript对象进行了一系列的扩展，我们把他们掌握好，更能深刻的体会Ext的架构，从而对我们的web开发更好的服务，

源码位置，我们可以从开发包的这个位置找到这几个扩展的js源码：

•extjs-4.1.1\src\core\src\lang\

•ExtJS扩展原生Javascript

–Ext.Object

–Ext.Number

–Ext.String

–Ext.Array

–Ext.Function

–Ext.Date

–Ext.Error

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Ext.Object

no.1 chain( Object object )

//Ext对于原生javascript对象的扩展

    //Ext.Object
    //1:chain 把当前传入的对象 当成新创建对象的原型
        var obj = {
            name:‘z3‘,
            age:10
        };
        var result = Ext.Object.chain(obj);
        alert(result.name);//z3
        alert(result.age);//10
        alert(result.hasOwnProperty(‘name‘)); //false    hasOwnProperty()用于判断属性是否是自己的，返回false说明name属性不是自己的，是obj的；obj是result的原型对象

no.2 each( Object object, Function fn, [Object scope] )

//2:each 变量当前对象 然后毁掉函数中暴露出三个属性 key、value、self 如果回调函数返回false则停止迭代
        var obj = {
            name:‘张三‘ ,
            age:20 ,
            sex:‘男‘
        };
        Ext.Object.each(obj,function(key , value , self){
            alert(key + ‘ : ‘ + value);
            if(age == 20){
                return false ;
            }
        });

no.3fromQueryString( String queryString, [Boolean recursive] ) : Object

将查询字符串转换回对象。 ...

Ext.Object.fromQueryString("foo=1&bar=2"); // 返回 {foo: 1, bar: 2}
Ext.Object.fromQueryString("foo=&bar=2"); // 返回 {foo: null, bar: 2}
Ext.Object.fromQueryString("some%20price=%24300"); // 返回 {‘some price‘: ‘$300‘}
Ext.Object.fromQueryString("colors=red&colors=green&colors=blue"); // 返回 {colors: [‘red‘, ‘green‘, ‘blue‘]}

Ext.Object.fromQueryString(
    "username=Jacky&"+
    "dateOfBirth[day]=1&dateOfBirth[month]=2&dateOfBirth[year]=1911&"+
    "hobbies[0]=coding&hobbies[1]=eating&hobbies[2]=sleeping&"+
    "hobbies[3][0]=nested&hobbies[3][1]=stuff", true);

// 返回
{
    username: ‘Jacky‘,
    dateOfBirth: {
        day: ‘1‘,
        month: ‘2‘,
        year: ‘1911‘
    },
    hobbies: [‘coding‘, ‘eating‘, ‘sleeping‘, [‘nested‘, ‘stuff‘]]
}

no.4 getKey( Object object, Object value )

var person = {
    name: ‘Jacky‘,
    loves: ‘food‘
};

alert(Ext.Object.getKey(person, ‘food‘)); // 弹出 ‘loves‘

no.5 toQueryObjects( String name, Object/Array value, [Boolean recursive] ) : Array

将一个name - value对转换为一个对象数组，支持内部结构的转换，对构造查询字符串非常有用。示例:

var objects = Ext.Object.toQueryObjects(‘hobbies‘, [‘reading‘, ‘cooking‘, ‘swimming‘]);

// objects此时等于:
[
    { name: ‘hobbies‘, value: ‘reading‘ },
    { name: ‘hobbies‘, value: ‘cooking‘ },
    { name: ‘hobbies‘, value: ‘swimming‘ },
];

var objects = Ext.Object.toQueryObjects(‘dateOfBirth‘, {
    day: 3,
    month: 8,
    year: 1987,
    extra: {
        hour: 4
        minute: 30
    }
}, true); // 递归

// objects此时等于:
[
    { name: ‘dateOfBirth[day]‘, value: 3 },
    { name: ‘dateOfBirth[month]‘, value: 8 },
    { name: ‘dateOfBirth[year]‘, value: 1987 },
    { name: ‘dateOfBirth[extra][hour]‘, value: 4 },
    { name: ‘dateOfBirth[extra][minute]‘, value: 30 },
];

no.6 getKeys( Object object ) : String[]

获取所有对象的key组成的数组

var values = Ext.Object.getKeys({
    name: ‘Jacky‘,
    loves: ‘food‘
}); // [‘name‘, ‘loves‘]

no.7 getSize( Object object ) : Number

获取此对象的所有自有属性的数目

var size = Ext.Object.getSize({
    name: ‘Jacky‘,
    loves: ‘food‘
}); // size 等于 2

no.8 getValues( Object object ) : Array
获取给定对象所有的值组成的数组。

var values = Ext.Object.getValues({
    name: ‘Jacky‘,
    loves: ‘food‘
}); // [‘Jacky‘, ‘food‘]

no.9 merge( Object destination, Object... object ) : Object

递归的合并任意数目的对象，但是不引用他们或他们的子对象。看栗子

var extjs = {
    companyName: ‘Ext JS‘,
    products: [‘Ext JS‘, ‘Ext GWT‘, ‘Ext Designer‘],
    isSuperCool: true,
    office: {
        size: 2000,
        location: ‘Palo Alto‘,
        isFun: true
    }
};

var newStuff = {
    companyName: ‘Sencha Inc.‘,
    products: [‘Ext JS‘, ‘Ext GWT‘, ‘Ext Designer‘, ‘Sencha Touch‘, ‘Sencha Animator‘],
    office: {
        size: 40000,
        location: ‘Redwood City‘
    }
};

var sencha = Ext.Object.merge(extjs, newStuff);

// 此时extjs和sencha等于
{
    companyName: ‘Sencha Inc.‘,
    products: [‘Ext JS‘, ‘Ext GWT‘, ‘Ext Designer‘, ‘Sencha Touch‘, ‘Sencha Animator‘],
    isSuperCool: true,
    office: {
        size: 40000,
        location: ‘Redwood City‘,
        isFun: true
    }
}

no.10 toQueryObjects( String name, Object/Array value, [Boolean recursive] ) : Array
举个栗子：

var objects = Ext.Object.toQueryObjects(‘hobbies‘, [‘reading‘, ‘cooking‘, ‘swimming‘]);

// objects此时等于:
[
    { name: ‘hobbies‘, value: ‘reading‘ },
    { name: ‘hobbies‘, value: ‘cooking‘ },
    { name: ‘hobbies‘, value: ‘swimming‘ },
];

var objects = Ext.Object.toQueryObjects(‘dateOfBirth‘, {
    day: 3,
    month: 8,
    year: 1987,
    extra: {
        hour: 4
        minute: 30
    }
}, true); // 递归

// objects此时等于:
[
    { name: ‘dateOfBirth[day]‘, value: 3 },
    { name: ‘dateOfBirth[month]‘, value: 8 },
    { name: ‘dateOfBirth[year]‘, value: 1987 },
    { name: ‘dateOfBirth[extra][hour]‘, value: 4 },
    { name: ‘dateOfBirth[extra][minute]‘, value: 30 },
];

no.11 toQueryString( Object object, [Boolean recursive] ) : String

将一个对象转换成编码的查询字符串

不递归:

Ext.Object.toQueryString({foo: 1, bar: 2}); // 返回 "foo=1&bar=2"
Ext.Object.toQueryString({foo: null, bar: 2}); // 返回 "foo=&bar=2"
Ext.Object.toQueryString({‘some price‘: ‘$300‘}); // 返回 "some%20price=%24300"
Ext.Object.toQueryString({date: new Date(2011, 0, 1)}); // 返回 "date=%222011-01-01T00%3A00%3A00%22"
Ext.Object.toQueryString({colors: [‘red‘, ‘green‘, ‘blue‘]}); // 返回 "colors=red&colors=green&colors=blue"
递归:

Ext.Object.toQueryString({
    username: ‘Jacky‘,
    dateOfBirth: {
        day: 1,
        month: 2,
        year: 1911
    },
    hobbies: [‘coding‘, ‘eating‘, ‘sleeping‘, [‘nested‘, ‘stuff‘]]
}, true); // 返回如下字符串(换行和url-decoded是为了便于阅读的目的):
// username=Jacky
//    &dateOfBirth[day]=1&dateOfBirth[month]=2&dateOfBirth[year]=1911
//    &hobbies[0]=coding&hobbies[1]=eating&hobbies[2]=sleeping&hobbies[3][0]=nested&hobbies[3][1]=stuff

–Ext.Number

constrain( Number number, Number min, Number max ) : Number

检查给定的数值是否在约束的范围内,如果再范围内就返回此数值。否则，如果大于最大值则返回最大值，如果小于最小值则返回最小值

注意本方法不改变给定的数值本身

randomInt( Number from, Number to ) : Number

返回一个随机数

toFixed( Number value, Number precision )

小数取舍

alert(Ext.Number.toFixed(3.1415926,5));//结果为 3.142

capitalize( String string ) : String

返回首字母大写的字符串

trim( String string ) : String

看栗子

var s = ‘  foo bar  ‘;
alert(‘-‘ + s + ‘-‘);         //alerts "- foo bar -"
alert(‘-‘ + Ext.String.trim(s) + ‘-‘);  //alerts "-foo bar-"

今天就到这里吧，明天继续说Ext.Array，Ext.Function，Ext.Date，Ext.Error；每天进步一点点

给各位推荐个文章网www.fishcmonkey.com,学习之余提高文学修养；

时间： 2024-10-25 13:01:38

Ext JS学习第九天 Ext基础之扩展原生的javascript对象的相关文章

Ext JS学习第十天 Ext基础之扩展原生的javascript对象（二）

此文来记录学习笔记: 今天继续说Ext.Array,Ext.Function,Ext.Date,Ext.Error ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Ext.Ar

Ext JS学习第八天 Ext基础之认识Ext.js 和Ext-more.js

此文来记录学习笔记: •认识Ext.js 和Ext-more.js •首先,我们要知道这2个js文件的作用,这俩个文件包含了Ext的一些基础定义.基本的属性和方法,我们要重点学习和深入底层代码进行研究. •如果所示:API位置 . •Ext.js方法详解: –Ext.apply&Ext.applyIf –Ext.extend –typeOf –isEmpty.isIterable.isFunction.isArray... –Iterate 下面从栗子中看看这些方法是实际使用方法,请看栗子代码吧

Ext JS学习第十二天 Ext基础之操作dom ； get与fly 方法

此文用来记录学习笔记 •嗯!首先,什么是DOM(Document Object Model) –W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并更改文档的内容.结构和样式. –其实DOM是一种通用的模型.不止在我们的HTML中存在,也可以在其他文件中存在,相信你最熟悉的就是XML了吧,其实还有很多... –DOM的发展也非常的漫长,版本延续,产生了0级DOM.1级DOM.2级DOM和最新的3级DOM,那么相对成熟的就是从2级DOM以后了.每

Ext JS学习第五天我们所熟悉的javascript（四）

此文用来记录学习笔记: •javascript之对象.面向对象 •可能对于高级语言你可能了解甚至精通OOP面向对象,那么对于javascript你又熟悉多少呢?我们一起来学习javascript面向对象,这样非常有帮助我们理解Ext的基础架构,Ext本身就是一个JS面向对象的框架. •使用json对象(JavaScript Object Notation) –JS对象的特性 –对于js来说json对象非常的重要,我们要学会如何操作json对象 •面向对象的概念 –如何定义一个类.如何实例化对象.

Ext JS学习第五天 Ext_window组件（一）

此文来记录学习笔记 •第一个组件:Ext.window.Window.对于组件,也就是Ext最吸引开发者的地方,那么我们要真正的使用Ext的组件,首先必须学会阅读API文档. –xtype:组件的别名 –Hierarchy 层次结构 –Inherited mixins 混入的类 –Requires 该组件需要使用的类 –configs:组件的配置信息 –properties:组件的属性 –methods:组件的方法 –events:组件的事件 •window组件常用属性和方法讲解: •confi

Ext JS学习第五天 Ext_window组件（二）

此文用来记录学习笔记 •上一讲我们已经学过了window的使用,那么在这将中,我们将结合然后把Ext中需要注意的地方,以及组建的使用给予介绍.indow做几个Web开发的经典示例. •ExtWeb实战300例: –例1:点击按钮打开一个window,window重复创建的问题 •重点分析:这个问题是初学者经常会犯错的地方,一般来说简单的代码不会产生此问题,但是如果以后代码复杂以后,这个问题如果发生调试起来会非常麻烦!! 附上栗子代码 1 Ext.onReady(function () { 2 3

Ext JS学习第三天我们所熟悉的javascript（二）

•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式.每种方式他们都会有区别,分别为: –function语句形式 –函数直接量形式 –构造函数形式 •函数中的arguments对象 –argument的作用一:接受函数的实际参数 –argument的作用二:用于做递归操作栗子代码 1 //Function 函数 2 //

Ext JS学习第二天我们所熟悉的javascript（一）

此文用来记录学习笔记: •ExtJS是一个强大的javascript框架,如果想真正的掌握ExtJS,那么我们必须要对javascript有一定的认识,所以很有必要静下心来,抱着一本javascript书籍,恶补一番.推荐书籍<javascript高级程序设计>.<javascript设计模式>. •在这里我们学习一下可能你从未接触过的javascript,这些javascript知识是我们要学好ExtJS这个框架非常有必要的.必备的知识.我们需要掌握的内容有: –javascri

Ext JS学习第四天我们所熟悉的javascript（三）

此文用来记录学习笔记: •javascript之函数 •this关键字的使用 –this关键字总是指向调用者,谁调用函数,this就指向谁 •call.apply的使用 –call和apply主要应用与框架底层,用于绑定函数的执行环境/作用域 •块的概念 –和高级程序语言不同,js里没有块的概念,我们一般用小括号包裹块级作用域 •闭包:掌握闭包必须要深入清楚的概念 –执行环境 –作用域链 –垃圾回收机制附上栗子代码 1 // This 关键字在javascript里的使用 2 //this

Ext JS学习第九天 Ext基础之 扩展原生的javascript对象

Ext JS学习第九天 Ext基础之 扩展原生的javascript对象的相关文章

Ext JS学习第九天 Ext基础之扩展原生的javascript对象

Ext JS学习第九天 Ext基础之扩展原生的javascript对象的相关文章