
새로운 프로그래밍 언어를 배우는 가장 좋은 방법은 가능한 한 많은 프로젝트를 만드는 것입니다. 배운 내용을 중심으로 미니 프로젝트를 만들어보면 초보자로서 더욱 원활한 경험을 할 수 있을 것입니다.
목표는 자신의 기술을 보여줄 구체적인 프로젝트 없이 여러 튜토리얼 동영상을 계속 시청하는 무서운 장소인 '튜토리얼 지옥'을 피하고 대규모 프로젝트를 처리하는 데 필요한 자신감을 키우는 것입니다.
이번 글에서는 기본적인 자바스크립트 개념을 이용하여 초보자가 장바구니 시스템을 만드는 방법을 설명하겠습니다.
전제 조건
이 프로젝트를 시도하려면 다음에 대한 심층적인 지식이 필요합니다.
무엇을 구축할 것인가?
장바구니에는 사용자가 다음을 수행할 수 있는 시스템이 있습니다.
- 장바구니에 품목 추가
- 장바구니에서 항목 제거
- 장바구니 내용 보기
- 장바구니에 있는 품목의 총 가격 계산
1단계: 데이터 설정
시작하려면 항목에 대한 데이터를 보관할 배열 몇 개를 만들어야 합니다. 구체적으로 필요한 배열은 다음과 같습니다.
-
itemNames: 각 항목의 이름을 지정합니다.
-
itemPrices: 각 항목의 가격이 포함됩니다.
-
itemQuantities: 특정 항목의 사용 가능량이 얼마나 되는지 알려줍니다.
-
itemInStock: true 또는 false를 사용하여 품목의 재고 여부를 결정합니다.
1 2 3 4 | const itemNames = [ "Laptop" , "Phone" ];
const itemPrices = [1000, 500];
const itemQuantities = [1, 2];
const itemInStock = [true, true];
|
로그인 후 복사
2단계: 기능을 사용하여 장바구니 구축
장바구니 논리를 포함할 기본 장바구니 기능을 만들 예정입니다. 장바구니가 비공개로 유지되고 특정 기능만 상호 작용할 수 있도록 클로저를 사용할 것입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | const ShoppingCart = () => {
const cart = [];
const addItemToCart = (itemIndex) => {
if (itemInStock[itemIndex]) {
cart.push(itemIndex);
console.log(`${itemNames[itemIndex]} added to the cart`);
} else {
console.log(`${itemNames[itemIndex]} is out of stock`);
}
};
const removeItemFromCart = (itemIndex) => {
const index = cart.indexOf(itemIndex);
if (index > -1) {
cart.splice(index, 1);
}
};
const getCartItems = () => {
return cart.map(itemIndex => itemNames[itemIndex]);
};
const calculateTotal = () => {
return cart.reduce((total, itemIndex) => {
return total + itemPrices[itemIndex] * itemQuantities[itemIndex];
}, 0);
};
return {
addItemToCart,
removeItemFromCart,
getCartItems,
calculateTotal
};
};
|
로그인 후 복사
코드를 분석하려면:
-
addItemToCart(itemIndex): 색인을 기준으로 장바구니에 항목을 추가합니다(재고가 있는 경우에만).
-
RemoveItemFromCart(itemIndex): 색인을 사용하여 장바구니에서 항목을 제거합니다.
-
getCartItems(): 색인을 이름으로 변환하기 위해 map()을 사용하여 장바구니에 있는 항목의 이름을 반환합니다.
-
계산Total(): Reduce() 메소드를 사용하여 장바구니에 담긴 품목의 가격과 수량을 곱하여 총 가격을 계산합니다.
3단계: 장바구니 테스트
완성된 프로젝트를 테스트하여 필요에 따라 작동하는지 확인해야 합니다. 우리는 다음을 테스트할 예정입니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 | const myCart = ShoppingCart();
myCart.addItemToCart(0);
myCart.addItemToCart(1);
console.log(myCart.getCartItems());
console.log(myCart.calculateTotal());
|
로그인 후 복사
코드를 분석하려면:
- 다음과 같이 호출하여 장바구니 인스턴스를 생성합니다.
const myCart = shoppingCart();.
- itemNames 배열의 색인을 사용하여 장바구니에 항목을 추가합니다.
myCart.addItemToCart(0); 노트북 및 myCart.addItemTocart(1)의 경우; 전화용입니다.
- 장바구니에 있는 품목의 이름을 인쇄하기 위해 getCartItems()를 사용합니다
- 마지막으로calculateTotal()을 사용하여 총 가격을 계산합니다.
4단계: 장바구니에서 항목 제거
좋은 장바구니 시스템에서는 사용자가 장바구니에서 상품을 삭제할 수 있어야 합니다. RemoveItemFromCart()를 호출하여 이 작업을 수행할 수 있습니다.
1 2 3 4 5 6 7 | myCart.removeItemFromCart(1);
console.log(myCart.getCartItems());
console.log(myCart.calculateTotal());
|
로그인 후 복사
보너스: 장바구니 시스템의 폐쇄 이해
클로저는 장바구니 배열을 비공개로 유지하는 데 도움이 되며 ShoppingCart() 함수에서 반환된 함수를 통해서만 액세스할 수 있습니다.
- 장바구니 배열은 장바구니() 내부에 정의되며 외부에서 직접 접근할 수 없습니다. 그러나 addItemTocart(), RemoveItemFromCart(), getCartItems() 및 계산Total() 함수는 동일한 범위 내에 정의되어 있으므로 장바구니와 상호 작용할 수 있습니다.
- 클로저는 데이터 개인 정보 보호와 코드 구조를 유지하는 데 도움이 되는 JavaScript의 강력한 기능입니다.
결론
기본 배열과 함수를 사용하여 항목의 합계를 추가, 제거 및 계산할 수 있는 완전한 기능의 장바구니 시스템을 구축했습니다. 이 프로젝트의 가장 멋진 부분은 클로저를 사용하여 복잡한 객체나 클래스 없이도 상태를 캡슐화하고 관리한다는 것입니다.
최종 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | const itemNames = [ "Laptop" , "Phone" ];
const itemPrices = [1000, 500];
const itemQuantities = [1, 2];
const itemInStock = [true, true];
const ShoppingCart = () => {
const cart = [];
const addItemToCart = (itemIndex) => {
if (itemInStock[itemIndex]) {
cart.push(itemIndex);
console.log(`${itemNames[itemIndex]} added to the cart`);
} else {
console.log(`${itemNames[itemIndex]} is out of stock`);
}
};
const removeItemFromCart = (itemIndex) => {
const index = cart.indexOf(itemIndex);
if (index > -1) {
cart.splice(index, 1);
}
};
const getCartItems = () => {
return cart.map(itemIndex => itemNames[itemIndex]);
};
const calculateTotal = () => {
return cart.reduce((total, itemIndex) => {
return total + itemPrices[itemIndex] * itemQuantities[itemIndex];
}, 0);
};
return {
addItemToCart,
removeItemFromCart,
getCartItems,
calculateTotal
};
};
const myCart = ShoppingCart();
myCart.addItemToCart(0);
myCart.addItemToCart(1);
console.log(myCart.getCartItems());
console.log(myCart.calculateTotal());
myCart.removeItemFromCart(1);
console.log(myCart.getCartItems());
console.log(myCart.calculateTotal());
|
로그인 후 복사
배우는 것이 즐거웠기를 바랍니다. 더 멋진 프로젝트를 만들어가시기를 바랍니다!
위 내용은 배열과 함수를 사용하여 JavaScript로 초보자 친화적인 장바구니를 구축하기 위한 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!