您的位置:首页 > Web前端 > JavaScript

Microsoft Ajax Library 对javascript原生类型的扩展

2008-06-24 17:18 591 查看
什么是Microsoft Ajax Library?

·asp.net ajax 的客户端部分

·纯客户端框架(独立于服务器端的)

·提供了js扩展和基础类库

Javascript中常用的原生类型:

·Object

·Arrary

·Error

·Function

·。。。。。

Object原生类型

·一个无序的集合,可以存放任意的类型对象

·常作为字典使用,取值赋值使用 obj["itemname"] 或者 obj.itemname 其中key是字符串类型 value是任意类型

并且可以用for-in遍历字典中的每个项

·禁止扩展object的prototype对象,因为如果扩展了object的prototype对象,其扩展将会出现在所有的对象中,影

响for操作结果(Microsoft Ajax Library没有扩展object)

【code demo】:

var obj = new Object();

obj["name"] = "dongde";

obj.salary = 10000;

alert( obj["name"]+"的工资:"+obj.salary );

【code demo】:

var dict = new Object();

for (var i = 0; i < 10; i++)

{

var key = "key_" + i;

dict[key] = Math.random();

}

delete dict["key_8"];

for (var key in dict)

{

alert("Key: " + key + ", Value + " + dict[key]);

}

Array原生类型

·长度可变的数组对象,最大长度2^32-1

·创建Arrary

new Array();

new Array(3);

new Array(9,"dongde");

·常用方法:

concat 返回一个新数组,保存了原数组所有的元素和所有的参数

push 在数组尾添加一个或多个元素

pop 从数组尾去除并返回元素

shift 从数组头去除并返回元素

unshift 在数组头添加一个或者多个元素

join(sepatator) 返回以sepatator为分隔符的链接所有元素的字符串

reverse 逆转数组

sort(compareFunction) 比较两个元素, 可用于数字和字符串元素的排序 ,其他类型需要提供compareFunction参数

slice(start,end)返回新的数组,包括从下标start到end ,如果没有end表示返回从start到结尾的所有元素的一个新

数组, 如果start在end前或相同将返回空数组, 如果end参数为负数表示倒数第几个下标结束

splice splice(2,1) 删除元素(从下标为2开始删除一个元素)

splice(2.0,"aaa","bbb") 插入元素 (从下标2插入)

splice(2,1,"aaa","bbb") 替换元素

·Array原生类型的扩展

Array.enqueue(array,item); 入队列,将item添加至array尾

Array.dequeue(array); 出队列,删除并返回array的第一个元素

Array.addRange(array,items); 将items数组中的左右元素添加至array尾

Array.contains(array,item); 是否存在某个元素,存在返回true,否侧返回false

Array.clear(array); 清除array中的所有元素

Array.insert(array,index,item);

Array.remove(array,item); 移除item元素

Array.removeAt(array,index);

Array.clone(array); 返回一个和array相同的新数组

Array.parse(value);

Array.indexOf(array,item,start); 从start开始查找item元素,返回item的下标,如果没有item元素返回-1

Array.add(array,item); 和 Array.enqueue(array,item)效果一样

Array.forEach(array,method,instance);

Error原生类型

·表示错误对象

Function原生类型



·每个方法均为Function类型的实例

typeof(Array) = typeof(Function) = "function"

·方法调用时根据发起的对象来确定this上下文

·Function.call(instance,[arg1[,arg2[,...]]]) 和 Function.apply(instance,args)

每个Function都有两个方法call和apply ,instance作为方法调用时this的上下文引用

apply方法中的 args表示当调用时 args中的所有的元素依次传入

call方法中的 [arg1[,arg2[,...]]] 传入的对象依次写出就可以了

【code demo】:

function Show(content)

{

document.getElementById("divid").innerHTML += (content + "<br />");

}

function testMethod()

{

var result = this.toString();

for( var i=0;i < arguments.length;i++ )

{

result += (", " + arguments[i]);

}

return result;

}

var Mary = new String("My name is Mary");

var Lin = new String("My name is Lin");

Mary.testMethod = testMethod;

Lin.testMethod = testMethod;

show(testMethod()); //输出[object]

show(Mary.testMethod()); //输出 My name is Mary this指针指向Mary

show(Lin.testMethod()); //输出 My name is Lin this指针指向Lin

show("Mary.aMethod.call(b, 1, 2, 3): " + Mary.aMethod.call(Lin, 1, 2, 3)); //输出 My name is Lin,1,2,3 this指针指向Lin

show("Lin.aMethod.apply(a, [1, 2, 3]): " + Lin.aMethod.apply(Mary, [1, 2, 3])); //输出 My name is Mary,1,2,3 this指针指向Mary

var CC = new String("My name is CC");

show("Mary.aMethod.call(CC, 1, 2, 3): " + Mary.aMethod.call(CC, 1, 2, 3)); //输出 My name is CC,1,2,3 this指针指向CC

·Function原生类型扩展

Function.createDelegate(instance,method); 得到一个方法的引用,执行他侧会调用method方法,而且method的上下文this指向instance

Function.createCallback (method,context); 得到一个方法引用,执行他侧会调用method方法,并将context作为额外参数传入

【code demo】:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<input type="button" value="Click Me" id="btn" />

<script language="javascript" type="text/javascript">

var oo = {

textContext : "dongde",

onClick : function(e)

{

alert("你好:"+this.textContext);

}

}

oo.onClick();

</script>

//输出 你好:dongde

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<input type="button" value="Click Me" id="btn" />

<script language="javascript" type="text/javascript">

var oo = {

textContext : "dongde",

onClick : function(e)

{

alert("你好:"+this.textContext);

}

}

$addHandler($get("btn"), "click", oo.onClick); //Microsoft Ajax Library扩展方法,跨浏览器添加dom元素的事件

</script>

// 输出undefined



<asp:ScriptManager ID="ScriptManager1" runat="server" />

<input type="button" value="Click Me" id="btn" />

<script language="javascript" type="text/javascript">

var oo = {

textContext : "dongde",

onClick : function(e)

{

alert("你好:"+this.textContext);

}

}

// $addHandler($get("btn"), "click", oo.onClick); //Microsoft Ajax Library扩展方法,跨浏览器添加dom元素的事件

var onClickDelegate = Function.createDelegate(oo, oo.onClick);

$addHandler($get("btn"), "click", onClickDelegate);

</script>

//输出 你好:dongde

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<input type="button" value="Click Me" id="btn" />

<script language="javascript" type="text/javascript">

var oo = {

textContext : "dongde",

onClick : function(e,arg)

{

alert("你好:"+this.textContext+" "+ arg);

}

}

// $addHandler($get("btn"), "click", oo.onClick); //Microsoft Ajax Library扩展方法,跨浏览器添加dom元素的事件

// var onClickDelegate = Function.createDelegate(oo, oo.onClick);

var onClickDelegate = Function.createCallback(

Function.createDelegate(oo, oo.onClick), "wish you success");

$addHandler($get("btn"), "click", onClickDelegate);

</script>

//输出 你好:dongde wish you success

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐