文档章节

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 中的设计模式

前言导读:这篇文章比较适合初步接触设计模式的同学,文中介绍了模块模式、单例模式、工厂模式、装饰者模式,例子都很浅显易懂。看完之后会对设计模式有一个初步的了解。 当你开始一个新的项...

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

小小小8021
10/18
0
0
《JavaScript设计模式与开发实践》模式篇(6)—— 命令模式

命令模式是最简单和优雅的模式之一,命令模式中的命令(command)指的是一个执行某些特定事情的指令。 应用场景 有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求...

嗨呀豆豆呢
12/15
0
0
Javascript设计模式与开发实践详见(一:单例模式)

设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设...

littl_Prince
2016/04/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

新手也能看懂,消息队列其实很简单

该文已加入开源项目:JavaGuide(一份涵盖大部分Java程序员所需要掌握的核心知识的文档类项目,Star 数接近 16k)。地址:https://github.com/Snailclimb/JavaGuide. 本文内容思维导图: 消息...

阿里云官方博客
19分钟前
1
0
如何在Chrome浏览器中启动deviceready事件(尝试调试phonegap项目)?

我正在开发PhoneGap应用程序,我希望能够在Chrome中调试它,而不是在电话上调试。但是,我在onGetReady()函数中初始化我的代码,该函数在PhoneGap触发“deviceready”事件时触发。由于Chr...

kisshua
今天
9
0
nginx中部署vue打包后的静态文件

如何在nginx中部署静态资源就不描述了, 请看我的这篇博客 将vue脚手架项目打包后的静态文件放到nginx上, 发现有个问题, 即url上有#, 怎么去掉这个#呢. 1 项目中router的mode 路由的mode要为h...

克虏伯
今天
13
0
JS容易理解错误的地方

在这端代码执行的末尾,你会不会hi变量回事函数中的hi了?你会不会认为这不是按引用传递了? 对值传递和引用传递产生质疑了? 1 var hi = {};2 function sayHello(hi) { ...

器石_
今天
9
0
Java开发学习--MongoDB

之前只学过sql,第一次使用非关系型数据库。以前对于关系型数据库与非关系型数据库的概念很模糊,通过这次的学习对这两者有了一个清晰的概念。 主键 在MongoDB中,主键名叫"_id",如果在生成...

微笑向暖wx
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部