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实现更改表格行顺序示例
Apr 30 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
Vue.js标签页组件使用方法详解
Oct 19 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.MVC的模板标签系统(五)
2006/09/05 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
js图片上传的封装代码
2017/08/01 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python 文件操作删除某行的实例
2017/09/04 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
python中怎么表示空值
2020/06/19 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
中学生运动会口号
2014/06/07 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang