이전 프로젝트에서는 데이터 제품을 구매하고 비용을 지불하는 기능이 필요했습니다. 처음에는 객체 지향적 글쓰기를 감히 사용하지 않았습니다. 주된 이유는 내 아이디어를 명확히하지 않았기 때문입니다. 또한 데이터 제품은 당시에는 비교적 복잡 했으므로 감히 움직이지 않았습니다. 나는 또한 객체 지향적 인 작문 방법을 온라인으로 발견하고 아이디어를 정리하고 스스로 작성하려고 노력했습니다.
다음으로 객체 지향 쓰기 프로세스를 단계별로 분석합니다. 전체 프로세스는 대략 다음과 같이 나뉩니다.
1. 먼저 제품 목록의 데이터 양식 및 총 제품 세트를 다음과 유사하게 정의합니다.
var data = [{name : 'name', unitprice : 10, num : 2}]; var total = {tote : 0, totalnum : 0, 가격 : 0};데이터 배열 이름에서 단일 제품 이름을 나타내고 단일 가격은 단일 제품 단위 가격을 나타내고 NUM은 단일 제품 수량을 나타냅니다. 총 객체 유형에서는 제품 유형을 나타내고 TotalNum은 총 제품의 양을 나타내고 가격은 총 제품 가격을 나타냅니다.
2. 쇼핑 카트 기능 객체 쇼핑 카트를 만들고 다음과 같이 해당 속성을 설정하십시오.
기능 쇼핑 카트 (이름, 단위, 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 = {// 제품 추가 추가 : function () {var _this = this; data.push (_this.info); }, // 총 제품 세트 getTotal : function () {total.type = data.length; Total.totalnum = 0; Total.price = 0; for (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 ();}, // 제품 점검 : function (name) {for (var i = 0; i <data.length; i ++) {if (name == data [i] .name) 반환 i; }}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 = {유형 : 0, TotalNum : 0, 가격 : 0}; 함수 쇼핑 카트 (이름, 단위 가격, 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; for (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 (); }, check : function (name) {for (var i = 0; i <data.length; i ++) {if (name == data [i] .name) return i; }}}이 데이터 배열의 초기화 데이터는 배경에서 데이터 전송 될 수 있지만 데이터 양식은 정의 된 것과 동일해야하며 총 제품 세트를 얻으려면 getTotal 방법을 호출해야합니다.
마지막으로, 예를 들어 단순한 새로운 인스턴스화입니다.
var goods1 = 새로운 쇼핑 카트 ( '123', 100, 2) var goods2 = 새로운 쇼핑 카트 ( '456', 10, 3) var goods3 = 새로운 쇼핑 카트 ( '789', 1, 4) goods2.delect (); good3.changenum (2) goods2 = 새로운 쇼핑 카르 ( '1234', 11, 1) goods2.changenum (0).
결과를 인쇄하고 결과를 인쇄 할 수 있습니다/(^o^)/~
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.