JavaScript设计模式---模块模式

本文探讨了JavaScript的模块模式,通过一个实例展示了如何利用模块模式创建一个具有私有属性和方法的购物车模块,外部只能通过提供的API来操作商品信息。
摘要由CSDN通过智能技术生成

关于单例及模块模式,之前写过一篇博客
模块模式返回一个对象,这个对象有一些私有属性和方法,并且提供了api来访问这些私有数据。

let singleton = function(){
 
    //私有变量和函数    
    let privateVariable = 10;
    function privateFunction(){
        return false;
    }
 
    //特权方法和属性
    return {
        publicProperty : true,
        publicMethod: function(){
            privateVariable++;
            return privateFunction();
        }
    }
}();

下面使用模块模式来实现一个简单的购物车。
购物车就是一个模块,商品信息是购物车的私有数据,外部无法访问,我们需要提供一些方法来操作商品信息。

let shoppingCart = function () {
	let goodsList = [];
	
	return {
		addItem: (item) => {
			goodsList.push(item);
		},
		removeItem: (index) => {
			goodsList.splice(index, 1);
		},
		getCount: () => {
			return goodsList.length;
		},
		getTotalPrice: () => {
			let price = 0;
			goodsList.forEach(item => {
				price += item.price;
			})
			return price;
		}
	}
}();
shoppingCart.addItem({
	name: 't-shirt',
	price: 199
});
shoppingCart.addItem({
	name: 'umbrella',
	price: 45
});
shoppingCart.addItem({
	name: 'shoes',
	price: 365.9
});

console.log(shoppingCart.getCount());
console.log(shoppingCart.getTotalPrice());

shoppingCart.removeItem(1);

console.log(shoppingCart.getCount());
console.log(shoppingCart.getTotalPrice());
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值