ในโครงการก่อนหน้านี้ฉันต้องการฟังก์ชั่นการซื้อผลิตภัณฑ์ข้อมูลและชำระเงินสำหรับพวกเขา ในตอนแรกฉันไม่กล้าที่จะใช้การเขียนเชิงวัตถุ เหตุผลหลักคือฉันไม่ได้ชี้แจงความคิดของฉัน ยิ่งกว่านั้นผลิตภัณฑ์ข้อมูลค่อนข้างซับซ้อนในเวลานั้นดังนั้นฉันจึงไม่กล้าที่จะย้ายพวกเขา ฉันยังพบวิธีการเขียนเชิงวัตถุออนไลน์จัดเรียงความคิดและต้องการที่จะพยายามเขียนด้วยตัวเอง
ต่อไปฉันจะวิเคราะห์กระบวนการเขียนเชิงวัตถุทีละขั้นตอน กระบวนการทั้งหมดแบ่งออกเป็น:
1. ก่อนกำหนดรูปแบบข้อมูลและชุดผลิตภัณฑ์ทั้งหมดของรายการผลิตภัณฑ์คล้ายกับ:
var data = [{name: 'name', unitprice: 10, num: 2}]; var total = {type: 0, totalNum: 0, ราคา: 0};เป็นที่ชัดเจนว่าในชื่ออาร์เรย์ข้อมูลแสดงถึงชื่อผลิตภัณฑ์เดียว UnitPrice แสดงถึงราคาหน่วยผลิตภัณฑ์เดียว NUM แสดงถึงปริมาณผลิตภัณฑ์เดียว ในประเภทวัตถุทั้งหมดแสดงถึงประเภทผลิตภัณฑ์ TotalNum แสดงถึงปริมาณทั้งหมดของผลิตภัณฑ์และราคาแสดงถึงราคารวมของผลิตภัณฑ์
2. สร้างฟังก์ชั่นการช็อปปิ้งวัตถุช้อปปิ้งคาร์ทและตั้งค่าคุณสมบัติที่สอดคล้องกันดังนี้:
Function ShoppingCart (ชื่อ, UnitPrice, num) {this.name = name; this.unitPrice = UnitPrice; this.num = num; this.info = {ชื่อ: this.name, unitprice: this.unitprice, num: this.num};}ใช้ข้อมูลเพื่อบันทึกชื่อราคาต่อหน่วยและปริมาณของผลิตภัณฑ์เดียวจากนั้นคุณต้องใส่ข้อมูลนี้ลงในอาร์เรย์ข้อมูลและคำนวณจำนวนรวมของผลิตภัณฑ์ทั้งหมดดังนั้นคุณต้องตั้งค่าสองวิธีของวัตถุฟังก์ชันนี้ เพียงเพิ่มสองวิธีด้านล่างนี้ info:
this.add ();
this.getTotal ();
ที่นี่เราต้องการอธิบายว่าทำไมทั้งสองวิธีนี้จึงถูกวางไว้ในต้นแบบของวัตถุฟังก์ชัน เมื่อวัตถุอินสแตนซ์ใหม่คุณต้องเพิ่มข้อมูลผลิตภัณฑ์นี้และคำนวณจำนวนผลิตภัณฑ์ทั้งหมดดังนั้นจึงไม่จำเป็นต้องใช้วัตถุอินสแตนซ์นี้เพื่อเรียกใช้สองวิธีนี้
จากนั้นใช้คุณสมบัติต้นแบบของวัตถุและวางวิธีการทั้งหมดในคุณสมบัตินี้เพื่อเรียกมันดังนี้:
ShoppingCart.prototype = {// เพิ่มผลิตภัณฑ์เพิ่ม: function () {var _this = this; data.push (_this.info); }, // ชุดผลิตภัณฑ์ทั้งหมด getTotal: function () {total.type = data.length; Total.totalnum = 0; total.price = 0; สำหรับ (var i = 0; i <data.length; i ++) {total.totalnum+= data [i] .num; total.price += data [i] .num * data [i] .unitprice; -3. ถ้าคุณเพิ่มคุณจะลบผลิตภัณฑ์เดียว เพิ่มวิธีการลบผลิตภัณฑ์ในแอตทริบิวต์ต้นแบบ การลบผลิตภัณฑ์ต้องลบผลิตภัณฑ์ที่ระบุตามโลโก้ ที่นี่ฉันลบมันผ่านค่าชื่อ ในเวลานี้จำเป็นต้องใช้วิธีการเพื่อค้นหาผลิตภัณฑ์ที่สอดคล้องกับชื่อนี้ในอาร์เรย์วันที่ดังนี้:
// ลบผลิตภัณฑ์ DELECT: function () {var _this = this; data.splice (_this.check (_this.name), 1); _this.getTotal ();}, // ตรวจสอบการตรวจสอบผลิตภัณฑ์: ฟังก์ชั่น (ชื่อ) {สำหรับ (var i = 0; i <data.length; i ++) {ถ้า (ชื่อ == data [i] .name) ส่งคืน i; -4. ปรับเปลี่ยนปริมาณของแต่ละผลิตภัณฑ์ดังต่อไปนี้:
// แก้ไขปริมาณของผลิตภัณฑ์ changenum เดียว: ฟังก์ชั่น (num) {var _this = this; if (num == 0) {_this.delect (); กลับ; } var _index = _this.check (_this.name); ข้อมูล [_index] .num = num; _this.getTotal ();}ที่นี่คุณต้องผ่านพารามิเตอร์เพื่อตั้งค่าปริมาณผลิตภัณฑ์ที่ระบุ
รหัสโดยรวมมีดังนี้:
var data = new Array; var total = {type: 0, TotalNum: 0, ราคา: 0}; function ShoppingCart (ชื่อ, UnitPrice, NUM) {this.name = name; this.unitPrice = UnitPrice; this.num = num; this.info = {ชื่อ: 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; สำหรับ (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: ฟังก์ชัน (num) {var _this = this; if (num == 0) {_this.delect (); กลับ; } var _index = _this.check (_this.name); ข้อมูล [_index] .num = num; _this.getTotal (); }, ตรวจสอบ: ฟังก์ชั่น (ชื่อ) {สำหรับ (var i = 0; i <data.length; i ++) {if (name == data [i] .name) ส่งคืน i; -ข้อมูลการเริ่มต้นของอาร์เรย์ข้อมูลนี้สามารถส่งข้อมูลจากพื้นหลังได้ แต่แบบฟอร์มข้อมูลจะต้องเหมือนกันตามที่กำหนดไว้และวิธีการ getTotal จะต้องถูกเรียกให้รับชุดผลิตภัณฑ์ทั้งหมด
ในที่สุดมันก็เป็นอินสแตนซ์ใหม่ที่เรียบง่ายทีละตัวตัวอย่างเช่น:
var goods1 = new Shoppingcart ('123', 100, 2) var goods2 = new Shoppingcart ('456', 10, 3) var goods3 = new Shoppingcart ('789', 1, 4) สินค้า 2.delect (); good3.changenum (2) สินค้า 2 = ใหม่คุณสามารถพิมพ์ข้อมูลและรวมออกจากผลลัพธ์/(^o^)/~
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น