文档章节

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

p
 pengqinmm
发布于 2016/07/27 15:54
字数 532
阅读 10
收藏 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
博文 61
码字总数 34818
作品 0
西安
程序员
JavaScript设计模式之观察者模式

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

Srtian
05/22
0
0
你需要了解的23种JavaScript设计模式

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

java高级架构牛人
06/02
0
0
python 与设计模式 ——工厂与单例

python 与设计模式 源码地址:[http://git.oschina.net/duoduo3_69/python_design_pattern][1] git checkout v001(这个版本与此篇博客相符) zarkpy里面运用了很多设计模式,以前一直很费解p...

duoduo3_69
2013/11/27
0
0
JavaScript设计模式系列三之单例模式(附案例源码)

文章初衷 设计模式其实旨在解决语言本身存在的缺陷 目前javaScript一些新的语法特性已经集成了一些设计模式的实现, 大家在写代码的时候,没必要为了用设计模式而去用设计模式, 那么我这边为什...

小钱钱阿圣
2017/09/22
0
0
使用合适的设计模式一步步优化前端代码

作者:晓飞 本文原创,转载请注明作者及出处 --- 在后端语言中,设计模式应用的较为广泛。如Spring中常见的工厂模式、装饰者模式、单例模式、迭代器模式。但是在日常的前端开发中,设计模式使...

iKcamp
2017/10/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

go语言学习总结

一、描述 go语言是直接将源码编译成二进制机器码的语言;它支持面向对象、也支持函数式编程;支持并发很容易; 二、基本语法学习路径 https://studygolang.com/subject/2...

盼望明天
12分钟前
1
0
JSP 九大内置对象及其作用域

JSP 中一共预先定义了 9 个这样的对象,分别为:request、response、session、application、out、pagecontext、config、page、exception ,下面就简单介绍下。 1、request 对象 request 对象...

几个栗子
24分钟前
0
0
Java中的坑之方括号

Java中的坑之方括号 这一段时间,在做项目的时候,发现了一个坑,这个坑说大不大,说小不小,不知道的足够喝一壶,知道的就可以轻松解决。 问题描述 在做数据统计的时候,遇见了如下形式的数...

星汉
34分钟前
1
0
[雪峰磁针石博客]python机器学习、web开发等书籍汇总

Building Machine Learning Systems with Python Third Edition - 2018.pdf 下载地址 Get more from your data by creating practical machine learning systems with Python Key Features ......

python测试开发人工智能安全
45分钟前
1
0
文件的压缩与解压(linux)

Linux下*.tar.gz文件解压缩命令 1.压缩命令:   命令格式:tar -zcvf 压缩后文件名.tar.gz 被压缩文件名 可先切换到当前目录下。压缩文件名和被压缩文件名都可加入路径。 2.解压缩命令: ...

qimh
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部