1、函数式编程
//什么是函数编程由函数作为事件、功能、方法处理的中心(主要角色)。
//函数是js的一级公民:除了完成事件处理、基本运算,还可以作为另一个函数参数传递,返回值。
2、类库的使用
// underscore类库是一个扩展js函数功能类库,通过调用这个类库中的相关函数,可以快
捷的实现某些js原生函数不具备的功能。
underscore类库把所有的功能函数当做“_”对象的方法。如果需要使用某一个功能函
数,则必须通过访问对象方法的形式获取到该函数
// var a = [1, 2, 3];
// var b = _.each(a, function (num,a,b){console.log(num + 1)});
//
// console.log(b);
// var a = [1, 2, 3];
// var b = _.map(a, function(num){ return num * 3; });
//
// console.log(b);
var a = _.first([5, 4, 3, 2, 1], 3);
console.log(a);
3、请求并解析JSON数据
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
// 拼接请求参数
var obj = {
method: 'GET',
url: 'car.json',
data: '',
successFun: successFun,
failFun: failFun
};
// 调用AJAX请求函数
ajax(obj);
// 请求成功的回调函数
function successFun (data) {
// 解析请求下来的数据
// 把返回的json数据转换为js对象(对象可以通过属性获取到值)
var resultObj = JSON.parse(data);
// 获取到listContents属性下的数组(展示在页面中的数据就保存在这个数组中)
var contentsArray = resultObj.ListContents;
console.log(contentsArray);
// 在js中for...in...遍历时,自定义的变量中保存的是数组下标
var arr = new Array();
// 拿到的是分组的汽车数据
for (var i in contentsArray) {
var sectionObj = contentsArray[i];
// 继续解析分组信息的对象,找到该分组下的汽车信息
var carsArray = sectionObj.GroupInfo;
// 继续遍历汽车信息的数组,拿到数组中的汽车对象
for (var j in carsArray) {
var carObj = carsArray[j];
// 把解析出来的汽车数据转存进大数组中
arr.push(carObj);
}
}
// 检测arr数组中汽车信息的数量
console.log(arr);
// 解析arr数组,提取出汽车的信息
for (var k in arr) {
var busObj = arr[k];
console.log(busObj);
// 创建DOM节点,把数据拼接进对应的节点中
// 创建‘行’节点,每循环一次新建一行
var tr = document.createElement('tr');
// 创建列节点
var tdID = document.createElement('td');
var tdName = document.createElement('td');
var tdLogo = document.createElement('td');
// 把解析出来的数据添加进对应的节点中
tdID.textContent = busObj.BrandID;
tdName.innerText = busObj.MainBrandName;
// 创建出存放图片的img标签
var img = document.createElement('img');
img.src = busObj.imgURL;
// 把图片标签拼接进tdLogo标签中
tdLogo.appendChild(img);
// 把td标签拼接进tr中
tr.appendChild(tdID);
tr.appendChild(tdName);
tr.appendChild(tdLogo);
// 把tr标签拼接进文档流(拼接进table标签)
var table = document.getElementById('table');
table.appendChild(tr);
}
}
// 请求失败的回调函数
function failFun (data) {
alert(data);
}
</script>
3、使用对象作为参数传递
<!-- 在script标签中引入外部js文件,只有当这一对标签执行完毕后,外部文件才能被引入
(一个习惯:如果script标签是用来引入外部文件的,则不要在这对标签中写任何代码)-->
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
// 通过封装的函数来进行ajax请求
// 在创建请求函数多需要的对象时,对象中的属性名、方法名必须要和函数
中使用的属性名严格匹配,否则函数中将获取不到正确的属性值、方法函数
var obj = {
method: 'GET',
url: 'index.xml',
data: '',
successFun: function (data) {
// alert(data);
var root = data.getElementsByTagName('roots')[0];
// console.log(root);
},
failFun: function (data) {
alert(data);
}
};
ajaxFun(abc);
</script>