Operasi DOM yang berkaitan untuk membangunkan troli beli-belah dengan JavaScript (3)

Bahagian ini terutamanya merangkumi pelbagai operasi dalam troli beli-belah, seperti mengira bilangan produk, mengemas kini dan mendapatkan data tempatan, dsb., untuk memudahkan pengurusan kod.

Pertama, semak sama ada data tempatan mengandungi objek (komoditi) yang ditentukan berdasarkan ID

Kedua, kemas kini data tempatan melalui objek tatasusunan dan dapatkan jumlah kuantiti produk

Akhir sekali, kemas kini data setempat mengikut pengenalan produk, dan kemudian dapatkan data setempat.

<script>
 /*
 功能：查看本地数据中是否含有指定的对象（商品），根据id
 参数：id：商品的标识
 */
function checkObjByPid(id) {
    var jsonStr = cookieObj.get("datas");
    var jsonObj = JSON.parse(jsonStr);
    //parse() 方法可解析一个日期时间字符串，并返回 1970/1/1 午夜距离该日期时间的毫秒数。
    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;
}

/*
 功能：更新本地数据
 参数：arr    数组对象
 返回一个值：最新的本地转换后的数组对象
 * */
function updateData(arr) {
    var jsonStr = JSON.stringify(arr);
    cookieObj.set({
        name: "datas",
        value: jsonStr
    });
    jsonStr = cookieObj.get("datas");
    return JSON.parse(jsonStr);
}

/*
 获取商品的总数量
 返回：数字
 */
function getTotalCount() {
    /*循环遍历数组，获取每一个对象中的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;
}

/*
 更新本地数据根据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)
}

/*
 获取本地数据
 返回 数组对象
 * */
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() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
            break;
        }
    }
    updateData(lisObj);
    return lisObj;
}
</script>

Anotasi:

JSON.stringify

Menukar nilai JavaScript kepada rentetan Notasi Objek JavaScript (Json).

Sintaks: JSON.stringify(value [, replacer] [, space])

value: ialah medan yang diperlukan. Ia adalah objek yang anda masukkan, seperti tatasusunan, kelas, dll. pengganti: Ini adalah pilihan. Ia terbahagi kepada 2 kaedah, satu tatasusunan, dan kedua kaedah.

Kes 1: Apabila pengganti ialah tatasusunan, kita boleh mengetahui melalui percubaan berikutnya bahawa ia berkaitan dengan nilai parameter pertama. Secara umumnya, hasil bersiri diwakili oleh pasangan nilai kunci. Oleh itu, jika nilai parameter kedua wujud pada yang pertama pada masa ini, maka nilai parameter kedua digunakan sebagai kunci, dan nilai parameter pertama diwakili oleh nilai Jika ia tidak wujud, ia tidak diendahkan.

Kes 2: Apabila pengganti ialah kaedah, ia sangat mudah, iaitu, menghantar setiap objek bersiri (ingat setiap satu) ke dalam kaedah untuk pemprosesan.

ruang: Apa yang digunakan sebagai pemisah.

　1) Jika ditinggalkan, nilai yang dipaparkan tidak akan mempunyai pemisah dan akan dikeluarkan secara langsung.
2) Jika ia adalah nombor, maka ia mentakrifkan berapa banyak aksara untuk inden Sudah tentu, jika ia lebih daripada 10, lalai ialah 10, kerana nilai maksimum ialah 10.
3) Jika ia adalah beberapa watak melarikan diri, seperti "t", yang bermaksud pemulangan gerabak, maka ia akan mempunyai satu pemulangan gerabak setiap baris.
　4) Jika ia hanyalah rentetan, tambahkan rentetan ini pada setiap baris apabila mengeluarkan nilai. Sudah tentu, panjang maksimum juga 10 aksara.

Buat fail server.js dan masukkan kod JavaScript di atas ke dalamnya.

<script type="text/javascript" src="server.js"></script>

akan dipanggil dari halaman HTML kemudian untuk mencapai kesan modul fungsi.