文档章节

Javascript 设计模式学习之二 Module(模块)模式

p
 pengqinmm
发布于 2016/07/27 15:54
字数 532
阅读 10
收藏 0
点赞 0
评论 0

Module模式是什么?

Module模式使用闭包封装私有状态和组织,只提供一个公有API,避免将其泄露至全局作用域,类似一个立即调用的函数表达式

Module模式有什么好处?

Module模式能够使单独的对象拥有公有/私有方法和属性,从而屏蔽来自全局作用域的影响,这样就可以使得函数名在页面上与其他脚本定义的函数冲突的可能性降低

Module模式怎么使用?

一个简单的例子:

let testModule = (function () {
    let counter = 0;
    return {
        incrementCounter: () => {
            return ++counter;
        },
        resetCounter:()=>{
            console.log(`counter value prior to reset ${counter}`);
            counter = 0;
        }
    }
}());
testModule.incrementCounter();
testModule.resetCounter();

testModule对象的私有属性counter只能通过公开的方法testModule.incrementCounter, testModule.resetCounter访问,testModule是一个全局变量

要点:

  • 使用圆括号()将模块包起来,后面再加上一对圆括号,表示立即执行
  • 闭包内需要公开的方法和变量,需要放在return{}里
  • 在公开的方法内访问私有变量和方法

 

例子:购物车,模块本身是自包含在一个被称为basketModule的全局变量中

'use strict';

let basketModule = (function () {

    // 私有
    let basket = [];
    
    function doSomethingPrivate() {

    }

    function doSomethingElsePrivate() {
        
    }

    // 返回一个暴露出的公有对象
    return {
        // 添加item到购物车
        addItem: (values)=> {
            basket.push(values);
        },

        // 获取购物车里item数
        getItemCount: ()=> {
            return basket.length;
        },

        // 私有函数的公有形式别名
        doSomething:doSomethingPrivate,

        // 获取购物车中所有item的价格总值
        getTotal:function () {
            let itemCount = this.getItemCount(), // 如果用arrow,this会出现undefined
                total = 0;
            while(itemCount--){
                total += basket[itemCount].price;
            }
            return total;
        }
    }

    }());

basketModule.addItem({
    item:'bread',
    price:0.5
});


basketModule.addItem({
    item:'butter',
    price:0.3
});

console.log(basketModule.getItemCount()); //2
console.log(basketModule.getTotal()); // 0.8

该模块中,已经返回了一个object,它会被自动赋值给basketModule

Module模式的缺点:

  • 由于访问公有和私有成员的方式不同,当想改变成员的可见性时,需要修改每一个曾经使用过该成员的地方
  • 无法为私有成员创建自动化单元测试

 

 

参考资料

《Javascript 设计模式》  【美】Addy and Osmani

© 著作权归作者所有

共有 人打赏支持
p
粉丝 1
博文 57
码字总数 33227
作品 0
西安
程序员
JavaScript设计模式之观察者模式

前言 准备研究一下MVVM的一些东西,由于MVVM运用了观察者模式的思想,因此翻开了《JavaScript设计模式与开发实践》一书,将观察者模式学习了一遍,顺便有对一些常用的设计模式进行一些了解,...

Srtian ⋅ 05/22 ⋅ 0

你需要了解的23种JavaScript设计模式

为什么要学习设计模式? 在许多访谈中,你可能会遇到很多面向对象编程中的接口,抽象类,代理和以及其他与设计模式相关的问题。 一旦了解了设计模式,它会让你轻松应对任何访谈,并可以在你的...

java高级架构牛人 ⋅ 06/02 ⋅ 0

ES7 Decorator 装饰者模式

原作者:玄农 装饰模式 设计模式大家都有了解,网上有很多系列教程,比如 JS设计模式等等。 这里只分享 装饰者模式 以及在 如何使用 ES7 的 概念 装饰模式 v.s. 适配器模式 装饰模式和适配器...

_朴灵_ ⋅ 05/14 ⋅ 0

JavaScript 中常见设计模式整理

开发中,我们或多或少地接触了设计模式,但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式。本文意在梳理常见设计模式的特点,从而对它们有比较清晰的认知。 JavaScript 中...

牧云云 ⋅ 05/18 ⋅ 0

JavaScript 中常见设计模式-单例模式

     单例模式两个条件   确保只有一个实例   可以全局访问   适用   适用于弹框的实现,全局缓存   实现单例模式      JavaScript 中的单例模式   因为 JavaScript 是无...

webstack前端栈 ⋅ 05/19 ⋅ 0

js策略模式《JavaScript设计模式与开发实践》阅读笔记

策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且是它们可以相互替换。 策略模式可以避免代码中的多重判断条件。 策略模式很好的体现了开放-封闭原则,将一个个算法(解决方...

RoyLuo ⋅ 05/19 ⋅ 0

js笔记三十之单例模式和工厂模式

单例模式 对象数据类型的作用: 把描述同一个实物(同一个对象)的属性和方法放在一个内存空间下,起到了分组的作用,这样不同事物之间的属性即使属性名相同, 相互也不会发生冲突 --- 这种分组编写...

uplyw ⋅ 05/26 ⋅ 0

JS单例模式《JavaScript设计模式与开发实践》阅读笔记

此文仅记录本人阅读《JavaScript设计模式与开发实践》这个本时的感受,感谢作者曾探写出这么好的一本书。如有冒犯,如有错误,请联系本人:luogao_lg@sina.com处理。 这一章让我知道了单例模...

RoyLuo ⋅ 05/17 ⋅ 0

从ES6重新认识JavaScript设计模式(二): 工厂模式

1 什么是工厂模式? 工厂模式是用来创建对象的一种最常用的设计模式。我们不暴露创建对象的具体逻辑,而是将将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂。工厂模式根据抽象程度...

Lee_tanghui ⋅ 04/05 ⋅ 0

JavaScript 中常见设计模式-代理模式

     代理模式   情景:小明追女生 A   非代理模式:小明 =花=> 女生A   代理模式:小明 =花=> 让女生A的好友B帮忙 =花=> 女生A   代理模式的特点   代理对象和本体对象具有一...

webstack前端栈 ⋅ 06/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vim编辑模式、vim命令模式、vim实践

vim编辑模式 编辑模式用来输入或修改文本内容,编辑模式除了Esc外其他键几乎都是输入 如何进入编辑模式 一般模式输入以下按键,均可进入编辑模式,左下角提示 insert(中文为插入) 字样 i ...

蛋黄Yolks ⋅ 26分钟前 ⋅ 0

大数据入门基础:SSH介绍

什么是ssh 简单说,SSH是一种网络协议,用于计算机之间的加密登录。 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码...

董黎明 ⋅ 45分钟前 ⋅ 0

web3j教程

web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API,用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成。 汇智网最新发布的web3j教程,详细讲解...

汇智网教程 ⋅ 52分钟前 ⋅ 0

谷歌:安全问题机制并不如你想象中安全

腾讯科技讯 5月25日,如今的你或许已经对许多网站所使用的“安全问题机制”习以为常了,但你真的认为包括“你第一个宠物的名字是什么?”这些问题能够保障你的帐户安全吗? 根据谷歌(微博)安...

问题终结者 ⋅ 52分钟前 ⋅ 0

聊聊spring cloud gateway的RedisRateLimiter

序 本文主要研究下spring cloud gateway的RedisRateLimiter GatewayRedisAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springframework/cloud/gateway/con......

go4it ⋅ 今天 ⋅ 0

169. Majority Element - LeetCode

Question 169. Majority Element Solution 思路:构造一个map存储每个数字出现的次数,然后遍历map返回出现次数大于数组一半的数字. 还有一种思路是:对这个数组排序,次数超过n/2的元素必然在中...

yysue ⋅ 今天 ⋅ 0

NFS

14.1 NFS介绍 NFS是Network File System的缩写 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导开发,最新为4.1版本 NFS数据传输基于RPC协议,RPC...

派派菠菜 ⋅ 今天 ⋅ 0

18.进入编辑模式 vim命令模式 实践

5.5 进入编辑模式 5.6 vim命令模式 5.7 vim实践 5.5 进入编辑模式: i 在当前字符前插入 I 在光标所在行的行首插入 a 在当前字符后插入 A 在光标所在行的行尾插入 o 在当前所在行的下一行插入...

王鑫linux ⋅ 今天 ⋅ 0

阻塞队列(2)--LinkedBlockingDeque底层实现

2.1 LinkedBlockingQueue是什么? 1.1 LinkedBlockingQueue是一个阻塞式的队列,继承自AbstractBlockingQueue,间接的实现了Queue接口和Collection接口。底层以链表的形式保存数据(双向链表,...

yokol ⋅ 今天 ⋅ 0

NFS介绍 NFS服务端安装配置 NFS配置选项

14.1 NFS介绍 14.2 NFS服务端安装配置 14.3 NFS配置选项 NFS介绍 NFS是Network File System的缩写;这个文件系统是基于网路层面,通过网络层面实现数据同步 NFS最早由Sun公司开发,分2,3,4三...

lyy549745 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部