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

川长思鸟来 2022-02-20 11:51 201阅读 0赞

关于单例及模块模式，之前写过[一篇博客][Link 1] 。  
模块模式返回一个对象，这个对象有一些私有属性和方法，并且提供了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());

[Link 1]: https://blog.csdn.net/latency_cheng/article/details/76583067

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript设计模式（六）：架构型设计模式-同步模块模式(SMD)、异步模块模式(AMD)

JavaScript设计模式 - 架构型设计模式 \`同步\`和\`异步\` 死心眼-同步模块模式同步模块模式——SMD（Synchronous

蔚落/ 2024年04月01日 15:49/ 0 赞/ 100 阅读

相关【JavaScript 设计模式】工厂模式

JavaScript 设计模式系列文章： [设计模式总览][Link 1] [工厂模式][Link 2] [单例模式][Link 3] [观察者模式/

妖狐艹你老母/ 2022年12月02日 15:09/ 0 赞/ 236 阅读

相关 JavaScript -- 设计模式结构性设计模式-外观模式

外观模式：指提供一个统一的接口去访问多个子系统的多个不同的接口，为子系统中的一组接口提供统一的高层接口。 ![watermark_type_ZmFuZ3poZW5naGVpd

朴灿烈づ我的快乐病毒、/ 2022年10月03日 00:33/ 0 赞/ 224 阅读

相关 JavaScript设计模式--组合模式

组合模式是操劳过度的JavaScript程序员的福音。。。。。。因为，使用组合模式可以使用一条命令就（递归的）实现复杂的行为。而这些行为是通过被委托给各个对象来实现

爱被打了一巴掌/ 2022年06月16日 20:59/ 0 赞/ 188 阅读

相关 JavaScript - JavaScript设计模式：工厂模式

转载博主：[文章深入浅出][Link 1] 1 什么是工厂模式? 工厂模式是用来创建对象的一种最常用的设计模式。我们不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数

痛定思痛。/ 2022年04月15日 20:37/ 0 赞/ 267 阅读

相关 JavaScript设计模式---模块模式

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

川长思鸟来/ 2022年02月20日 11:51/ 0 赞/ 202 阅读

相关 JavaScript -- 设计模式结构性设计模式-代理模式

代理模式，顾名思义就是为其他对象提供一种代理以控制对这个对象的访问。现实生活中有很多这样的例子，比如演员的经纪人，代理服务器等。 ![watermark_type_ZmF

逃离我推掉我的手/ 2022年01月09日 12:05/ 0 赞/ 293 阅读

相关 javascript设计模式 - 工厂模式

1 ：工厂模式 - 简单的说：就是创建一个对象，最后再返回这个对象！如： function createBook(name, time, type) {

亦凉/ 2021年09月16日 03:28/ 0 赞/ 392 阅读

相关 JavaScript设计模式——工厂模式

介绍将 new 操作单独封装遇到 new 操作时，就要考虑是否使用工厂模式来看代码： class Product { constru

小灰灰/ 2021年08月24日 19:11/ 0 赞/ 516 阅读

相关 JavaScript设计模式(三十三)【同步/异步模块模式】

/ 异步模块模式AMD之前，当然还有同步模块模式同步模块的代码较为简单，如string.trim 这样的模块对应的就是{string:{trim:{}}}这样的结

左手的ㄟ右手/ 2021年07月04日 23:59/ 0 赞/ 346 阅读