Dalam proyek sebelumnya, saya membutuhkan fungsi pembelian produk data dan membayarnya. Pada awalnya, saya tidak berani menggunakan tulisan yang berorientasi objek. Alasan utamanya adalah bahwa saya tidak mengklarifikasi ide -ide saya. Selain itu, produk data relatif rumit pada waktu itu, jadi saya tidak berani memindahkannya. Saya juga mencari beberapa metode penulisan yang berorientasi objek secara online, memilah ide-ide itu, dan ingin mencoba menulisnya sendiri.
Selanjutnya, saya akan menganalisis proses penulisan yang berorientasi objek langkah demi langkah. Seluruh proses secara kasar dibagi menjadi:
1. Pertama -tama tentukan formulir data dan total set produk dari daftar produk, mirip dengan:
var data = [{name: 'name', unitprice: 10, num: 2}]; var total = {type: 0, totalNum: 0, harga: 0};Jelas bahwa dalam nama array data mewakili nama produk tunggal, UnitPrice mewakili harga satuan produk tunggal, NUM mewakili kuantitas produk tunggal; Dalam jenis objek total mewakili jenis produk, TotalNum mewakili jumlah total produk, dan harga mewakili total harga produk.
2. Buat objek Belanja Fungsi Keranjang Belanja dan atur properti yang sesuai, sebagai berikut:
function shoppingCart (name, unitprice, num) {this.name = name; this.unitprice = unitprice; this.num = num; this.info = {name: this.name, unitprice: this.unitprice, num: this.num};}Gunakan info untuk menyimpan nama, harga satuan, dan jumlah produk tunggal, dan kemudian Anda perlu memasukkan info ini ke dalam array data dan menghitung total jumlah total produk, sehingga Anda perlu mengatur dua metode objek fungsi ini. Cukup tambahkan dua metode di bawah ini.info:
this.add ();
this.getTotal ();
Di sini kami ingin menjelaskan mengapa kedua metode ini ditempatkan dalam prototipe objek fungsi. Saat objek instantiasi baru, Anda perlu menambahkan informasi produk ini dan menghitung jumlah total produk, sehingga tidak perlu menggunakan objek instantiasi ini untuk memanggil kedua metode ini.
Kemudian gunakan properti prototipe objek dan masukkan semua metode di properti ini untuk menyebutnya, sebagai berikut:
ShoppingCart.prototype = {// Tambahkan produk Tambah: function () {var _this = this; data.push (_this.info); }, // Total set produk getTotal: function () {total.type = data.length; total.totalnum = 0; Total.price = 0; untuk (var i = 0; i <data.length; i ++) {total.totalnum+= data [i] .num; total.price += data [i] .num * data [i] .Unitprice; }}}3. Jika Anda menambahkan, Anda akan menghapus satu produk. Tambahkan metode untuk menghapus produk dalam atribut prototipe. Menghapus produk membutuhkan menghapus produk yang ditentukan berdasarkan logo. Di sini saya menghapusnya melalui nilai nama. Pada saat ini, metode diperlukan untuk menemukan produk yang sesuai dengan nama ini di array tanggal, sebagai berikut:
// hapus produk delect: function () {var _this = this; data.splice (_this.check (_this.name), 1); _this.getTotal ();}, // Periksa Periksa Produk: Fungsi (Nama) {untuk (var i = 0; i <data.length; i ++) {if (name == data [i] .name) return i; }}4. Ubah jumlah produk individual, sebagai berikut:
// Ubah kuantitas satu produk changenum: function (num) {var _this = this; if (num == 0) {_this.delect (); kembali; } var _index = _this.check (_this.name); data [_index] .num = num; _this.getTotal ();}Di sini Anda perlu melewati parameter untuk mengatur jumlah produk yang ditentukan.
Kode keseluruhan adalah sebagai berikut:
var data = array baru; var total = {type: 0, totalNum: 0, harga: 0}; function shoppingCart (name, unitprice, num) {this.name = name; this.unitprice = unitprice; this.num = num; this.info = {name: this.name, unitprice: this.unitprice, num: this.num}; this.add (); this.getTotal ();} shoppingCart.prototype = {add: function () {var _this = this; data.push (_this.info); }, getTotal: function () {total.type = data.length; total.totalnum = 0; Total.price = 0; untuk (var i = 0; i <data.length; i ++) {total.totalnum+= data [i] .num; total.price += data [i] .num * data [i] .Unitprice; }}, delect: function () {var _this = this; data.splice (_this.check (_this.name), 1); _this.getTotal (); }, changenum: function (num) {var _this = this; if (num == 0) {_this.delect (); kembali; } var _index = _this.check (_this.name); data [_index] .num = num; _this.getTotal (); }, periksa: function (name) {for (var i = 0; i <data.length; i ++) {if (name == data [i] .name) return i; }}}Data inisialisasi dari array data ini dapat berupa data yang dikirimkan dari latar belakang, tetapi formulir data harus sama seperti yang ditentukan, dan metode gettotal harus dipanggil untuk mendapatkan total set produk.
Akhirnya, ini adalah instantiasi baru yang sederhana satu per satu, misalnya:
var goods1 = new ShoppingCart('123', 100, 2 )var goods2 = new ShoppingCart('456', 10, 3 )var goods3 = new ShoppingCart('789', 1, 4 )goods2.delect();good3.changeNum(2)goods2 = new ShoppingCart('1234', 11, 1 )goods2.changeNum(0)Anda dapat mencetak data dan total dari hasil/(^o^)/~
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.