网页编程--JSON对象封装的三种方式
2017年08月28日 20:12:43
阅读数:170
首先,先说添加属性或方法的两种方式
1)通过原型对象: 克隆对象.prototype.属性名/函数名=xxx ---更改的是所有克隆对象
2)通过克隆对象: 克隆对象.属性名/函数名=xxx ---更改的是当前克隆对象
下面说JSON封装三种方式:
先做一个JS输出工具,--peintln(print)
-
//print函数--输出到页面
-
function print(str){
-
document.write(str+" ");
-
}
-
function println(str){
-
/*
-
if(typeof(str)=="undefined"){ //undefined数据,判断类型时,要用引号
-
document.write("<br>");
-
}else{
-
document.write(str+"<br>");
-
}
-
*/
-
if(str==undefined){ //undefined数据,判断值时,不要用引号
-
document.write("<br>");
-
}else{
-
document.write(str+"<br>");
-
}
-
}
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<title>JSON对象</title>
-
<script type="text/javascript" src="../day4/js/out.js"></script>
-
</head>
※封装方式1 通用格式: this.变量名或函数名 = ...
-
function Person(name,age){
-
//给this对象(Function对象)添加属性
-
this.name = name;
-
this.age = age;
-
//给this对象添加方法(函数)
-
this.toString = function(){
-
println("Person信息:"+this.name+","+this.age);
-
};
-
this.getName =function(name){
-
return this.name;
-
};
-
this.setName = function(name){
-
this.name = name;
-
};
-
}
测试代码:
-
var p = new Person("Jack",22);
-
// p.setName("TOM");
-
//alert(p.name+ "," + p.age);
-
p.toString();
※方式二(类似创建值对象。new一个空对象,在外部给对象添加成员)
-
var obj = new Object();
-
obj.name = "Rose";
-
obj.age = "25";
-
obj.toString=function(){
-
println(this.name+","+this.age);
-
};
-
obj.toString();
※※方式三(数据封装,我们以后用得最多的就是这种方式,以致我们以后讲JSON,一般指的就是这种)
1.数组(用中括号): 读取元素时用: 数组[下标]
-
//小知识点: for(变量 in 对象){
-
...//对象每一个变量进行操作,其中的变量:若变量为数组时为下标,
-
}
-
var arr = ["aa",10,true,u];
-
for( x in arr){
-
document.write(x+" "); //下标: 0 1 2 3
-
}
-
document.write("<br>");
-
for( x in arr){
-
document.write(arr[x]+" "); //元素值: aa 10 true 张三,24
-
}
-
document.write("<br>");
重点:
2.Map(用大括号)
/*格式:var Map = {key:value,key1:value2...}
*1.key可以是字符串,也可以不是,可以加引号也可不加
*2.如果key符合变量规则,则元素访问方式可以是:map.key1或者map["key1"]
* 如果不符合只能是map["key1"];
*/
-
var map = {
-
"name":"张飞",
-
"age":25,
-
"getName":function(){return name;},
-
};
-
println(map.name);
-
println(map.age);
-
println(map.getName);
-
println(map["name"]);
-
println(map["age"]);
-
/*
-
*1)对象.属性--属性名必须符合变量名的命名规则,否则不行
-
*2)对象["属性名"]--通吃所有Map
-
*/
-
var datas ={
-
8:"aa",
-
3:"张良",
-
aa:20
-
};
-
println(datas["8"]);
下面做一个小小练习:
-
<script type="text/javascript">
-
var map = {
-
"employees": [
-
{ "firstName":"Bill" , "lastName":"Gates" },
-
{ "firstName":"George" , "lastName":"Bush" },
-
{ "fir stName":"Thomas" , "lastName":"Carter" }
-
],
-
name:"来自W3Cschool例"
-
};
-
// alert(map.name); //AC
-
// alert(map["name"]); //AC
-
// alert(map.employees[1].firstName);//Ok
-
// alert(map["employees"][1]["lastName"]);//AC
-
</script>
测试结果如下:都通过!!
JSON对象封装用map方式是最常用的,但是一般JS高手会用方式一,不过感觉差不多.......