JavaScript開發(fā)購物車之相關(guān)DOM操作(三)
本節(jié)主要對購物車中各種操作進行了封裝,比如商品個數(shù)統(tǒng)計,更新獲取本地數(shù)據(jù)等操作,方便代碼管理。
首先,根據(jù)id查看查看本地數(shù)據(jù)中是否含有指定的對象(商品)
其次,通過數(shù)組對象更新本地數(shù)據(jù),獲取商品的總數(shù)量
最后,根據(jù)商品標識更新本地數(shù)據(jù),再獲取本地數(shù)據(jù)。
<script> /* 功能:查看本地數(shù)據(jù)中是否含有指定的對象(商品),根據(jù)id 參數(shù):id:商品的標識 */ function checkObjByPid(id) { var jsonStr = cookieObj.get("datas"); var jsonObj = JSON.parse(jsonStr); //parse() 方法可解析一個日期時間字符串,并返回 1970/1/1 午夜距離該日期時間的毫秒數(shù)。 var isExist = false; for(var i = 0, len = jsonObj.length; i < len; i++) { if(jsonObj[i].pid == id) { isExist = true; break; } } return isExist; //return false; } /* 功能:更新本地數(shù)據(jù) 參數(shù):arr 數(shù)組對象 返回一個值:最新的本地轉(zhuǎn)換后的數(shù)組對象 * */ function updateData(arr) { var jsonStr = JSON.stringify(arr); cookieObj.set({ name: "datas", value: jsonStr }); jsonStr = cookieObj.get("datas"); return JSON.parse(jsonStr); } /* 獲取商品的總數(shù)量 返回:數(shù)字 */ function getTotalCount() { /*循環(huán)遍歷數(shù)組,獲取每一個對象中的pCount值相加總和*/ var totalCount = 0; //默認為0 var jsonStr = cookieObj.get("datas"); var listObj = JSON.parse(jsonStr); for(var i = 0, len = listObj.length; i < len; i++) { totalCount = listObj[i].pCount + totalCount; } return totalCount; } /* 更新本地數(shù)據(jù)根據(jù)pid id:商品的標識 */ function updateObjById(id, num) { var jsonStr = cookieObj.get("datas"); var listObj = JSON.parse(jsonStr); for(var i = 0, len = listObj.length; i < len; i++) { if(listObj[i].pid == id) { listObj[i].pCount = listObj[i].pCount + num; break; } } return updateData(listObj) } /* 獲取本地數(shù)據(jù) 返回 數(shù)組對象 * */ function getAllData() { var jsonStr = cookieObj.get("datas"); var listObj = JSON.parse(jsonStr); return listObj; } function deleteObjByPid(id) { var lisObj = getAllData(); for(var i = 0, len = lisObj.length; i < len; i++) { if(lisObj[i].pid == id) { lisObj.splice(i, 1); //splice() 方法向/從數(shù)組中添加/刪除項目,然后返回被刪除的項目。 break; } } updateData(lisObj); return lisObj; } </script>
注釋:
JSON.stringify
將 JavaScript 值轉(zhuǎn)換為 JavaScript 對象表示法 (Json) 字符串。
語法:JSON.stringify(value [, replacer] [, space])?
value:是必選字段。就是你輸入的對象,比如數(shù)組,類等。?replacer:這個是可選的。它又分為2種方式,一種是數(shù)組,第二種是方法。?
情況一:replacer為數(shù)組時,通過后面的實驗可以知道,它是和第一個參數(shù)value有關(guān)系的。一般來說,系列化后的結(jié)果是通過鍵值對來進行表示的。?所以,如果此時第二個參數(shù)的值在第一個存在,那么就以第二個參數(shù)的值做key,第一個參數(shù)的值為value進行表示,如果不存在,就忽略。
情況二:replacer為方法時,那很簡單,就是說把系列化后的每一個對象(記住是每一個)傳進方法里面進行處理。?
space:就是用什么來做分隔符的。?
1)如果省略的話,那么顯示出來的值就沒有分隔符,直接輸出來 。
2)如果是一個數(shù)字的話,那么它就定義縮進幾個字符,當(dāng)然如果大于10 ,則默認為10,因為最大值為10。
3)如果是一些轉(zhuǎn)義字符,比如“t”,表示回車,那么它每行一個回車。?
4)如果僅僅是字符串,就在每行輸出值的時候把這些字符串附加上去。當(dāng)然,最大長度也是10個字符。?
創(chuàng)建一個server.js文件把上面的JavaScript代碼放入其中。
<script type="text/javascript" src="server.js"></script>
以后從HTML頁面調(diào)用,實現(xiàn)功能模塊效果。