وظيفة عربة التسوق الموجهة نحو جافا سكريبت

في المشروع السابق ، كنت بحاجة إلى وظيفة لشراء منتجات البيانات ودفع ثمنها. في البداية ، لم أجرؤ على استخدام الكتابة الموجهة للكائنات. السبب الرئيسي هو أنني لم أوضح أفكاري. علاوة على ذلك ، كانت منتجات البيانات معقدة نسبيًا في ذلك الوقت ، لذلك لم أجرؤ على نقلها. بحثت أيضًا عن بعض أساليب الكتابة الموجهة نحو الكائنات عبر الإنترنت ، وفرز الأفكار ، وأردت محاولة كتابتها بنفسي.

بعد ذلك ، سأقوم بتحليل عملية الكتابة الموجهة نحو الكائن خطوة بخطوة. تنقسم العملية برمتها تقريبًا إلى:

1. حدد أولاً نموذج البيانات ومجموعة المنتج الإجمالية لقائمة المنتجات ، على غرار:

 var data = [{name: 'name' ، unitprice: 10 ، num: 2}] ؛ var total = {type: 0 ، totalNum: 0 ، price: 0} ؛

من الواضح أنه في اسم صفيف البيانات يمثل اسم منتج واحد ، يمثل Unitprice سعر وحدة منتج واحد ، ويمثل NUM كمية منتج واحد ؛ في إجمالي نوع الكائن يمثل نوع المنتج ، ويمثل TotalNum كمية إجمالية من المنتجات ، ويمثل السعر سعرًا إجماليًا للمنتجات.

2. قم بإنشاء CART Function Object Compling CONSPORT وضبط خصائصها المقابلة ، على النحو التالي:

 وظيفة التسوق (الاسم ، unitprice ، num) {this.name = name ؛ this.unitprice = Unitprice ؛ this.num = num ؛ this.info = {name: this.name ، unitprice: this.unitprice ، num: this.num} ؛}

استخدم معلومات لحفظ الاسم وسعر الوحدة وكمية منتج واحد ، ثم تحتاج إلى وضع هذه المعلومات في مجموعة البيانات وحساب إجمالي عدد المنتجات ، لذلك تحتاج إلى تعيين طريقتين من كائن الوظيفة هذا. فقط أضف طريقتين أدناه this.info:

this.add () ؛

this.getTotal () ؛

هنا نريد أن نشرح سبب وضع هاتين الطريقتين في النموذج الأولي لكائن الوظيفة. عندما تكون كائن إنشاء مثيل جديد ، تحتاج إلى إضافة معلومات المنتج هذا وحساب العدد الإجمالي للمنتجات ، لذلك ليست هناك حاجة لاستخدام كائن مثيل لاستدعاء هاتين الطريقتين.

ثم استخدم خاصية النموذج الأولي للكائن ووضع جميع الطرق في هذه الخاصية للاتصال بها ، على النحو التالي:

 shoopcart.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 () ؛} ، }}

4. تعديل كمية المنتجات الفردية ، على النحو التالي:

 // تعديل كمية منتج واحد changenum: function (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 ، price: 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 () ؛} shorpingcart.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: function (num) {var _this = this ؛ if (num == 0) {_this.delect () ؛ يعود؛ } var _index = _this.check (_this.name) ؛ البيانات [_index] .num = num ؛ _ this.getTotal () ؛ } ، تحقق: الدالة (الاسم) {for (var i = 0 ؛ i <data.length ؛ i ++) {if (name == data [i] .name) return i ؛ }}}

يمكن أن تكون بيانات التهيئة لمجموعة البيانات هذه تنتقل من الخلفية ، ولكن يجب أن يكون نموذج البيانات هو نفسه كما هو محدد ، ويجب استدعاء طريقة getTotal للحصول على إجمالي المنتجات.

أخيرًا ، من السهل إنشاء مثيل جديد واحدًا تلو الآخر ، على سبيل المثال:

 VAROMS1 = جديد التسوق ('123' ، 100 ، 2) VAROMS2 = جديد التسوق ('456' ، 10 ، 3) VARMERS3 = جديد التسوق (789 '، 1 ، 4) البضائع.

يمكنك طباعة البيانات والإجمالي من النتائج/(^o^)/~

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.