1、函數(shù)式編程
//什么是函數(shù)編程由函數(shù)作為事件、功能、方法處理的中心(主要角色)。
//函數(shù)是js的一級公民:除了完成事件處理、基本運算,還可以作為另一個函數(shù)參數(shù)傳遞,返回值。
2、類庫的使用
// underscore類庫是一個擴展js函數(shù)功能類庫,通過調用這個類庫中的相關函數(shù),可以快
捷的實現(xiàn)某些js原生函數(shù)不具備的功能。
underscore類庫把所有的功能函數(shù)當做“_”對象的方法。如果需要使用某一個功能函
數(shù),則必須通過訪問對象方法的形式獲取到該函數(shù)
// 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數(shù)據
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
// 拼接請求參數(shù)
var obj = {
method: 'GET',
url: 'car.json',
data: '',
successFun: successFun,
failFun: failFun
};
// 調用AJAX請求函數(shù)
ajax(obj);
// 請求成功的回調函數(shù)
function successFun (data) {
// 解析請求下來的數(shù)據
// 把返回的json數(shù)據轉換為js對象(對象可以通過屬性獲取到值)
var resultObj = JSON.parse(data);
// 獲取到listContents屬性下的數(shù)組(展示在頁面中的數(shù)據就保存在這個數(shù)組中)
var contentsArray = resultObj.ListContents;
console.log(contentsArray);
// 在js中for...in...遍歷時,自定義的變量中保存的是數(shù)組下標
var arr = new Array();
// 拿到的是分組的汽車數(shù)據
for (var i in contentsArray) {
var sectionObj = contentsArray[i];
// 繼續(xù)解析分組信息的對象,找到該分組下的汽車信息
var carsArray = sectionObj.GroupInfo;
// 繼續(xù)遍歷汽車信息的數(shù)組,拿到數(shù)組中的汽車對象
for (var j in carsArray) {
var carObj = carsArray[j];
// 把解析出來的汽車數(shù)據轉存進大數(shù)組中
arr.push(carObj);
}
}
// 檢測arr數(shù)組中汽車信息的數(shù)量
console.log(arr);
// 解析arr數(shù)組,提取出汽車的信息
for (var k in arr) {
var busObj = arr[k];
console.log(busObj);
// 創(chuàng)建DOM節(jié)點,把數(shù)據拼接進對應的節(jié)點中
// 創(chuàng)建‘行’節(jié)點,每循環(huán)一次新建一行
var tr = document.createElement('tr');
// 創(chuàng)建列節(jié)點
var tdID = document.createElement('td');
var tdName = document.createElement('td');
var tdLogo = document.createElement('td');
// 把解析出來的數(shù)據添加進對應的節(jié)點中
tdID.textContent = busObj.BrandID;
tdName.innerText = busObj.MainBrandName;
// 創(chuàng)建出存放圖片的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);
}
}
// 請求失敗的回調函數(shù)
function failFun (data) {
alert(data);
}
</script>
3、使用對象作為參數(shù)傳遞
<!-- 在script標簽中引入外部js文件,只有當這一對標簽執(zhí)行完畢后,外部文件才能被引入
(一個習慣:如果script標簽是用來引入外部文件的,則不要在這對標簽中寫任何代碼)-->
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
// 通過封裝的函數(shù)來進行ajax請求
// 在創(chuàng)建請求函數(shù)多需要的對象時,對象中的屬性名、方法名必須要和函數(shù)
中使用的屬性名嚴格匹配,否則函數(shù)中將獲取不到正確的屬性值、方法函數(shù)
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>