文档章节

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
博文 62
码字总数 34998
作品 0
西安
程序员
JavaScript设计模式入坑

JavaScript设计模式入坑 介绍 设计模式编写易于维护的代码。 设计模式的开创者是一位土木工程师。Σ( ° △ °|||)︴,写代码就是盖房子。 模式 模式一种可以复用的解决方案。解决软件设计中...

小小小8021
10/18
0
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

没有更多内容

加载失败,请刷新页面

加载更多

初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
6
0
现场看路演了!

HiBlock
昨天
16
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
9
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
19
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部