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 相关文章推荐
jQuery中get()方法用法实例
Dec 27 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 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小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
php实现插入排序
2015/03/29 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vue中实现高德定位功能
2019/12/03 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
浅析Python基础-流程控制
2016/03/18 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
2014学雷锋活动心得体会
2014/03/10 职场文书
保护环境倡议书500字
2014/05/19 职场文书
升职感谢信
2015/01/22 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
护理心得体会范文
2016/01/22 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技