ASP.NET AJAX(5)__JavaScript原生类型以及Microsoft AJAX Library什么是Microsoft AJAX LibraryObject原生类型Object.pro
什么是Microsoft AJAX Library
- ASP.NET AJAX的客户端部分
- 纯客户端框架
- 提供了JavaScript扩展和基础类库
Object原生类型
- ECMAScript Spec中定义:一个无序的集合,可以存放任意类型的对象
- 常作为字典使用
- 可以使用for-in遍历字典中的每一项
- 禁止扩展其prototype对象
- Miicrosoft AJAX Library并没有扩展Object 类型
Object.prototype
- toString()/toLocalString() 得到表示当前对象与环境无/有关的字符串
- valueOf() 返回表示该对象的value
- hasOwnProperty(propertyName) 对象上是否直接定义了某属性(直接!!!)
- isPrototypeOf(obj) obj是不是当前对象的prototype对象
- propertyIsEnumerable(propertyName)某属性是否可遍历(不考虑prototype链)
一个使用Object原生类型的示例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="info">
</div>
<script language="javascript" type="text/javascript">
function display(text) {
document.getElementById("info").innerHTML += (text + "<br/>");
}
function useAsDictionary() {
var obj=new Object();
obj["name"]="xiaoyaojian";//Key="name",Value="xiaoyaojian"
obj.salary=9000;//这是另外一种设置值的方式
display("Name:"+obj.name);
display("Salary:"+obj["salary"]);
display("____________________");
}
function usrForInStatement() {
var dictionary = new Object();
for (var i = 0; i < 10; i++) {
var key = "key_" + i;
dictionary[key] = Math.random();
}
delete dictionary["key_6"]; //删除Key为“key_6”的元素,不可只用dictionary["key_6"]=null这种方式
for (var key in dictionary) { //使用for-in遍历Object
display("Key:"+key+",value="+dictionary[key]);
}
}
useAsDictionary();
usrForInStatement()
</script>
</body>
</html>
Array原生类型
- 长度可变的数组对象,最大长度2^32-1,通常情况下,我们已经足够足够足够用啦
- 构造Array对象
new Array();//空数组
new Array();//长度为3的数组,当然,添加多于三个的元素也是可以的,只是初始长度为3
new Array(1,"Xiaoyaojian");//构造两个元素的数组
- length属性:数组长度,W/R
- toString()/toLocalString()方法:返回逗号分割的字符串
- concat([item1[,item2[,…]]])方法:添加元素,返回一个新数组,原数组不变
- push([item1[,item2[,…]]])方法:在数组尾添加一个或多个元素
- pop方法:从数组尾部去除并返回元素
- shift方法:从数组头去除并返回元素
- unshift([item1[,item2[,…]]])方法:在数组头添加一个或多个元素
Array.prototype
- join(separator)方法:返回以separator作为分隔符得到一个连接所有元素的字符串
- reverse()方法:将数组内所有元素逆转
- sort(compareFuncation)方法:参数为一个方法,用于比较两个元素
- slice(start,end)方法:返回一个新数组,包含从下标start开始到下标end-1的元素
- splice(start,deleteCount,[item1[,item2[,…]]])方法:影响当前数组,从下标start开始,删除deleteCount个元素,然后添加元素
一个使用Array原生类型的示例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="info"></div>
<script language="javascript" type="text/javascript">
function display(text) {
document.getElementById("info").innerHTML+=(text+"<br/>");
}
Array.prototype.display = function() {
window.display("a:"+this);
}
var a = new Array(1, 2, 3, 4, 5);
display("Array initialized");
a.display();
display("a.push(6,7)");
a.push(6, 7);
a.display();
display("a.shift():" + a.shift());
a.display();
display("a.unshift(8)");
a.unshift(8);
a.display();
display("a.pop()" + a.pop());
a.display();
display("a.concat(9,10)" + a.concat(9, 10));
a.display();
display("'['+a.join('][')+']':" + '[' + a.join('][') + ']');
a.display();
display("a.slice(2,5):" + a.slice(2, 5));
display("a.slice(2,-2)" + a.slice(2, -2));
a.display();
display("a.splice(3,2)");
a.splice(3, 2);
a.display();
display("a.splice(2,0,7,8)");
a.splice(2, 0, 7, 8);
a.display();
a.display("a.splice(3,1,9,10)");
a.splice(3, 1, 9, 10);
a.display();
display("a.reverse()");
a.reverse();
a.display();
display("a.sort()");
a.sort();
a.display();
display("a.sort(function(x,y){return y-x})");
a.sort(function(x, y) { return y - x });
a.display();
</script>
</body>
</html>
这样我们看结果,就能很清楚的看明白这些函数的作用和用法
Microsoft AJAX Library对Array原生类型的扩展
- 全都是静态方法(为了和其他类库兼容)
- 提供了一些常用的方法
- 提供了语义良好的方法名
- 大多数方法为简单封装
扩展的具体内容
- Array.enqueue(array,item)//入队列,将item添加到array末尾
- Array.dequeue(array)//出队列,返回并删除array的第一元素
- Array.addRange(array.items)//将items数组中所有元素添加至array末尾
- Array.contains(array.item)//如果array中包含item,则返回true,否则false
- Array.clear(array)//清除所有元素
- Array.insert(array.index.item)//将item插入到array中下标为index的位置
- Array.remove(array,index)//从array中移除元素item
- Array.removeAt(array,index)//从array中移除仪表为index的元素
- Array.clone(array)//返回一个与array相同的新数组
- Array.parse(value)//将表示数组的JSON字符串变味一个数组对象
- Array.indexOf(array,item,start)//获得item在array中的下标,从下标start开始查找,不存在则返回-1
- Array.add(array,item)//将item添加至array末尾
- Array.forEach(array,method,instance)//以instance为上下文this引用,将array中的每个元素一次作为参数,循环调用method方法
一个使用Array.forEach方法的示例
创建一个aspx的页面,因为我们要使用Microsoft AJAX Library为我们提供的对于Array的扩展,所以需要在页面中添加一个ScriptManager
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script language="javascript" type="text/javascript">
function method(elt, index, array) {//etc:枚举的当前元素,index:当前下标,array:当前被遍历的array
this.result += "[" + index + ". " + elt + "]";
}
var items = "i am xiaoyaojian".split(" ");
var obj = { result: "" };
Array.forEach(items,method,obj);
alert(obj.result);
</script>
</form>
</body>
</html>
这样我们就能清楚的看到Array.forEach这个方法的用户啦
Error原生类型
- 表示错误对象(EvalError,URIError,RangeError等继承Error)
- 捕获方式try{throw new Error(…)}catch(e){}
- Error对象IE和FireFox共有属性:message(错误信息)
Error浏览器特定属性
IE
- descript:同message
- number:错误编号,只有脚本引擎抛出的错误才有该属性
FireFox
- fileName:出现错误的页面
- lineNumber:出现错误对象的行号
- stack:出现错误时候的堆栈信息
一个关于错误的示例
创建一个html页面
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
try {
throw new Error("一个示例错误");
alert("s");
}
catch (e) {
var errorMsg = ("Message:" + e.message + "n");
if (!e.stack) {//判断是否为IE,IE没有Error.stack
errorMsg += "Description:" + e.description + "n";
errorMsg += "Number:" + e.number;
}
else {
errorMsg += "Line Number:" + e.lineNumber + "n";
errorMsg += "File Name:" + e.fileName + "nn";
errorMsg += "Stack Trace:n" + e.stack;
}
alert(errorMsg);
}
</script>
</body>
</html>
Error原生类型的扩展
- Error.creat(message,errorInfo)//创建新的Error对象,message属性设置为true,将errorInfo上的信息附加到Error
- Error.prototype.popStackFrame():为Error对象整理出更加直观的信息
一个示例
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>
Please view the page in FireFox
<script language="javascript" type="text/javascript">
function getNiceError() {
var e = Error.creat("Error Message", { customMessage: "Custom Message" });
e.popStackFrame();
return e;
}
try {
throw getNiceError();
}
catch (e) {
var errorMsg = ("Message:" + e.message + "n");
errorMsg += "Line Number:" + e.lineNumber + "n";
errorMsg += "File Name:" + e.fileName + "nn";
errorMsg += "Stack Trace:n" + e.stack;
alert(errorMsg);
}
</script>
</form>
</body>
</html>
在火狐中运行这个页面的时候,我们就可以看到更多的有用的错误信息
Function原生类型
- 与Array,String等类型处于同等地位
- 每个方法均为Function类型的实例– typeof(Array) == typeof(Function) == “function
- 方法调用时根据发起的对象来确定this上下文引用
- Function.prototype.apply(instance, args)
- Function.prototype.call(instance, [ arg1 [ ,arg2 [ , … ] ] ])
一个使用Function原生类型的示例
定义一个html页面
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="info"></div>
<script language="javascript" type="text/javascript">
function display(text) {
document.getElementById("info").innerHTML += text + "<br/>";
}
function aMethod() {
var result = this.toString();
for (var i = 0; i < arguments.length; i++) {
result += ", " + arguments[i];
}
return result;
}
var a = new String("i am string A");
var b = new String("i am string B");
a.aMethod = b.aMethod = aMethod;
display("aMethod():" + aMethod());
display("a.aMethod():" + a.aMethod());
display("b.aMethod():" + b.aMethod());
display("a.aMethod.call(b,1,2,3)" + a.aMethod.call(b, 1, 2, 3));
display("a.aMethod.apply(b,[1,2,3])" + a.aMethod.call(b,[ 1, 2, 3]));
</script>
</body>
</html>
我们看到,我们直接调用aMethod,出现的是object,实际上它的this当前指向window,而a.aMethod,this指向的是a对象,这里也能明显的看到call和apply的用法
Funcation类型类型扩展
- Function.createDelegate(instance,method)方法:得到一个方法的引用,执行它则会调用method,保证method方法的上下文this引用为instance
- Funcation.creatCallback(method,context)方法:得到一个方法引用,执行它时则会调用method方法,并将context作为 额外的参数传入
使用Function原生类型及扩展的一个扩展
创建一个aspx页面,添加一个ScriptManager
页面中添加如下代码
<asp:ScriptManager ID="s" runat="server" />
<input type="button" value="Click Me" id="btn" />
<script language="javascript" type="text/javascript">
var obj =
{
text: "xiaoyaojian",
onClick: function(e) {
alert(this.text);
}
}
obj.onClick();
</script>
这样,执行页面,就弹出一个“xiaoyaojian”
删除obj.onClick();添加$addHandler($get("btn"), "click", obj.onClick);,我们使用Microsoft AJAX Library提供的这种扩浏览器的方式,给按钮添加一个事件
点击按钮,将会弹出一个undefined,这里其实this指定的是当前的window对象,我们需要依旧把this指向obj,就需要这么做
var onClickDelegate = Function.createDelegate(obj, obj.onClick);
$addHandler($get("btn"), "click",onClickDelegate);
这样就解决了上面的问题了
我们修改上面的obj
var obj =
{
text: "xiaoyaojian",
onClick: function(e,args) {
alert(this.text+"n"+args);
}
}
这样,当我们再次点击按钮,就会弹出一个“xiaoyajian undifined”,因为这时只传入了一个参数
这样,我们就需要使用Funcation.creatCallback(method,context)这个方法,
改变onClickDelegate的定义
var onClickDelegate = Function.createCallback(Function.createDelegate(obj, obj.onClick),"xiaobai");
这时,我们传入了一个额外的参数给obj,这样,我们就得到了想要的效果
Boolean原生类型及其扩展
- 使用布尔值,而不要使用Bollean对象(简单的解释为布尔值属于值类型,而Boolean属于对象,不能简单的使用==这些做对比)
- Microsoft AJAX Library中提供的唯一扩展(parse静态方法,eg Boolean.parse("true")值为true)
Number原生类型
- 32为整数或者64为浮点数
- 浮点数范围(MAX_VALUE,MIN_VALUE)
- 极值(POSITIVE_INFINITY,NEGATIVE_INFINITY)
- Not an Number(NaN)
一个Number原生类型的示例
创建一个html页面
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="info"></div>
<script language="javascript" type="text/javascript">
function display(text) {
document.getElementById("info").innerHTML += text + "<br/>";
}
display("Max Value" + Number.MAX_VALUE);
display("Min Value" + Number.MIN_VALUE);
display("____________________________");
display("Postive infinity=" + Number.POSITIVE_INFINITY);
display("Negative infinity=" + Number.NEGATIVE_INFINITY);
display("____________________________");
display("1/0=" + (1 / 0));
display("Max Value*10=" + Number.MAX_VALUE * 10);
display("Max Value+10=" + (Number.MAX_VALUE + 10));
display("Infinity/10=" + Number.POSITIVE_INFINITY / 10);
display("______________________________");
display("NaN=" + Number.NaN);
display("parseInt('ABC')=" + parseInt('abc'));
display("3-'ABC'=" + (3 - 'ABC'));
display("(NaN==NaN)=" + (NaN == NaN));
display("(NaN!=NaN)=" + (NaN != NaN));
display("isNaN(NaN)="+isNaN(NaN));
</script>
</body>
</html>
通过这个示例的结果,我们就难很清晰的理解这些原生类型啦
Number原生类型的扩展
- 数值和字符串之间的转换
- 字符串->数值(Number.parseLocale(value),Number.parseInvariant(value))
- 数值->字符串(Number.prototype.format(format),Number.prototype.localFormat(format))
- localeFormat和parseLocale方法(需要设置EnableScriptGlobalization属性设置为true,以浏览器中设置的语言文化为依据,也可以通过设置Page.Culture来改变,格式信息会输出到页面中)
- parseInvariant和format方法(相当于语言环境为en-US)
一个使用Number原生类型扩展的示例
创建一个aspx页面
<asp:ScriptManager ID="s" runat="server" EnableScriptGlobalization="true"></asp:ScriptManager>
<div id="info"></div>
<script language="javascript" type="text/javascript">
function display(text) {
document.getElementById("info").innerHTML += text + "<br/>";
}
var num = 12345678.12345678;
display("num.format('p')=" + num.format("p"));
display("num.format('d')=" + num.format("d"));
display("num.format('c')=" + num.format("c"));
display("num.format('n')=" + num.format("n"));
display("_________________________________");
display("num.localeFormat('p')=" + num.localeFormat("p"));
display("num.localeFormat('d')=" + num.localeFormat("d"));
display("num.localeFormat('c')=" + num.localeFormat("c"));
display("num.localeFormat('n')=" + num.localeFormat("n"));
</script>
打开网页,我们就可以对比的看到各个格式代码与对应的格式啦,打开网页源文件,我们也可以看到关于格式的JSON字符串,以in为我们现在已经设置了EnableScriptGlobalization="true"
Date原生类型
- UTC时间:国际标准时间(格林威治时间)
- 表示日期和事件(一个相对于UTC时间1970-1-1 0时整的毫秒偏移量)
- Date.prototype.getTimezoneOffset() ,获得时差的分钟数
构造Date对象
- var date1=new Date();//表示当前事件对象
- var date2=new Date(0);//1970-1-1 0时整
- var date3=new Date(2011,9,17)//本地时间2011年10月17日0时 注意,月份是从0开始的
- var date4=new Date(Date.UTC(2011,9,17));//表示UTC时间2011年10月17日0时
Date对象->字符串
- 与操作系统无关,与脚本引擎有关(toString(),toDateString(),toTimeString(),toUTCString())
- 与操作系统有关(toLocaleString(),toLocaleDateString(),toLocaleTimeString(),因为和操作系统有关,所以没有toLocaleUTCString()这种东西的)
字符串->Date对象
- Date.parse(str) 返回表示Date的那个数字,只可识别特定的格式
- 与特定脚本引擎相关(t;Date.parse(new Date(t).toString());Date.parse(new Date(t).toUTCString());)
修改和获取Date对象属性
- getTime / setTime
- getFullYear / setFullYear / getUTCFullYear /setUTCFullYear
- getMonth / setMonth / getUTCMonth / setUTCMonth
- getDate / setDate / getUTCDate / setUTCDate
- getDay / setDay / getUTCDay / setUTCDay
- getHours / setHours / getUTCHours / setUTCHours
- getMinutes / setMinutes / getUTCMinutes /setUTCMinutes
- getSeconds / setSeconds / getUTCSeconds /setUTCSeconds
- getMilliseconds / setMilliseconds / getUTCMilliseconds/ setUTCMillisecond
- 这些都是语义明确的,就不多做解释啦
Date原生类型的扩展
- Date对象和字符串之间的转换
- 字符串->数值(Date.parseLocale(value,formats),Date.parseInvariant(value, formats))
- 数值->字符串(Date.prototype.format(format),Date.prototype.localeFormat(format))
- 预定义的format格式 i:与JavaScript内置功能相同 d:短日期格式 D:长日期格式 t:短时间格式 T:长时间格式 F:完整的时间日期格式 M, m:月份日期格式 Y, y:年和月份格式
一个使用Date原生类型的扩展的示例
创建一个aspx页面
添加如下代码
<asp:ScriptManager runat="server" ID="s" EnableScriptGlobalization="true" />
<div id="info">
</div>
<script language="javascript" type="text/javascript">
function display(text) {
document.getElementById("info").innerHTML += text + "<br/>";
}
var now = new Date();
display("now.localeFormat('d')=" + now.localeFormat('d'));
display("now.localeFormat('D')=" + now.localeFormat('D'));
display("now.localeFormat('t')=" + now.localeFormat('t'));
display("now.localeFormat('T')=" + now.localeFormat('T'));
display("now.localeFormat('F')=" + now.localeFormat('F'));
display("now.localeFormat('M')=" + now.localeFormat('M'));
display("now.localeFormat('Y')=" + now.localeFormat('Y'));
display("now.localeFormat('yyyy年,MM月,dd日,hhhh:mm:ss tt dddd')=" + now.localeFormat('yyyy年,MM月,dd日,hhhh:mm:ss tt dddd'));
var d = Date.parseLocale("11/9/8", "yy/M/d");
display(d.format("i"));
</script>
示例很简单,我就不多做解释了
String原生类型的扩展
- length:获得字符串长度
- charAt(pos):获得当前位置的字符(串)
- indexOf(str, position):查找字符串
- lastIndexOf(str, position):从后查找字符串
- match(regexp):使用正则表达式检验字符串
- replace(search, replaceValue):替换字符串
- search(regexp):在字符串搜索某个子串
- toUpperCase():将字符串转化为大写
- toLowerCase():将字符串转化为小写
- split(str):分割字符串至数组
- substring(start[, end]) 从下标start开始,到下标end-1为止
- slice方法 与substring方法功能几乎相同,如果start小于零,则表示倒数第n位(start +length),end亦是如此
- endsWith:返回布尔值,表明是否以某字符串结尾
- startsWith:返回布尔值,表明是否以某字符串开始
- trim:返回字符串,去处原字符串首尾空白
- trimEnd:返回字符串,去处原字符串结尾空白
- trimStart:返回字符串,去处原字符串起始空白
一个使用String原生类型扩展的示例
创建一个aspx页面,添加如下代码
<asp:ScriptManager ID="s" runat="server" EnableScriptGlobalization="true" />
<div id="info">
</div>
<script language="javascript" type="text/javascript">
function display(text) {
document.getElementById("info").innerHTML += text + "<br/>";
}
display(String.format("Today is {0}.", new Date()));
display(String.localeFormat("今天是{0:dddd}",new Date()));
</script>
这时,我们改变IE里的区域设置,就可以看到localeFormat这里的区别
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Elasticsearch Mapping是啥?
- 求水仙花数面试题 撸它
- 字典序???你是啥
- 【特征工程】时序特征挖掘的奇技淫巧
- 【Hive】Hive 的基本认识
- 《Nacos系列》之注册中心
- 《Nacos系列》之持久化
- 垃圾收集器详解及参数配置
- 《Nacos系列》之安装与启动
- 盘点 | Python自带的那些数据集
- 使用shuttle实现bytom上跨链资产交换
- (三)Mybatis-Plus代码生成器
- 【Code】关于 GCN,我有三种写法
- MySQL允许在唯一索引字段中添加多个NULL值
- [OHIF-Viewers]医疗数字阅片-医学影像-中间插播一下-es6-使用const加箭头函数声明函数相对于function声明函数有什么好处?