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 相关文章推荐
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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中SESSION过期设置
2021/03/09 PHP
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
Python编程argparse入门浅析
2018/02/07 Python
python如何使用unittest测试接口
2018/04/04 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python多任务之协程的使用详解
2019/08/26 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
美国汽车交易网站:Edmunds
2016/08/17 全球购物
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
shell程序中如何注释
2012/02/17 面试题
十佳青年个人事迹材料
2014/01/28 职场文书
基层党员公开承诺书
2014/05/29 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书