javascript设计模式之模块模式学习笔记


Posted in Javascript onFebruary 15, 2017

我们通过单体模式理解了是以对象字面量的方式来创建单体模式的;比如如下的对象字面量的方式代码如下:

var singleMode = {
  name: value,
  method: function(){
        
  }
};

模块模式的思路是为单体模式添加私有变量和私有方法能够减少全局变量的使用;如下就是一个模块模式的代码结构:

var singleMode = (function(){
  // 创建私有变量
  var privateNum = 112;
  // 创建私有函数
  function privateFunc(){
    // 实现自己的业务逻辑代码
  }
  // 返回一个对象包含公有方法和属性
  return {
    publicMethod1: publicMethod1,
    publicMethod2: publicMethod1
  };
})();

模块模式使用了一个返回对象的匿名函数。在这个匿名函数内部,先定义了私有变量和函数,供内部函数使用,然后将一个对象字面量作为函数的值返回,返回的对象字面量中只包含可以公开的属性和方法。这样的话,可以提供外部使用该方法;由于该返回对象中的公有方法是在匿名函数内部定义的,因此它可以访问内部的私有变量和函数。

我们什么时候使用模块模式?

如果我们必须创建一个对象并以某些数据进行初始化,同时还要公开一些能够访问这些私有数据的方法,那么我们这个时候就可以使用模块模式了。

理解增强的模块模式

增强的模块模式的使用场合是:适合那些单列必须是某种类型的实例,同时还必须添加某些属性或方法对其加以增强的情况。比如如下代码:

function CustomType() {
  this.name = "tugenhua";
};
CustomType.prototype.getName = function(){
  return this.name;
}
var application = (function(){
  // 定义私有
  var privateA = "aa";
  // 定义私有函数
  function A(){};

  // 实例化一个对象后,返回该实例,然后为该实例增加一些公有属性和方法
  var object = new CustomType();

  // 添加公有属性
  object.A = "aa";
  // 添加公有方法
  object.B = function(){
    return privateA;
  }
  // 返回该对象
  return object;
})();

下面我们来打印下application该对象;如下:

console.log(application);

javascript设计模式之模块模式学习笔记

继续打印该公有属性和方法如下:

console.log(application.A);// aa
console.log(application.B()); // aa
console.log(application.name); // tugenhua
console.log(application.getName());// tugenhua

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
索趣科技的答案
Feb 07 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 #Javascript
BootStrap实现带关闭按钮功能
Feb 15 #Javascript
Jil,高效的json序列化和反序列化库
Feb 15 #Javascript
Bootstrap模态框使用详解
Feb 15 #Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 #Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 #Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 #Javascript
You might like
隐性调用php程序的方法
2009/03/09 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
python hashlib加密实现代码
2019/10/17 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
环保倡议书500字
2014/05/15 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
学术会议通知范文
2015/04/15 职场文书
农业项目合作意向书
2015/05/08 职场文书
军事博物馆观后感
2015/06/05 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS