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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
关于JavaScript语句后面的分号问题
Dec 07 Javascript
Vue-Router的使用方法
Sep 05 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 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/08/31 PHP
PHP引用(&)各种使用方法实例详解
2014/03/20 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
PHP导入导出Excel代码
2015/07/07 PHP
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
python中pygame模块用法实例
2014/10/09 Python
用Python编写简单的微博爬虫
2016/03/04 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python创建文件备份的脚本
2018/09/11 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
Python对象转换为json的方法步骤
2019/04/25 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
python Gabor滤波器讲解
2020/10/26 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
校本教研工作制度
2014/01/22 职场文书
《假如》教学反思
2014/04/17 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
给领导的感谢信范文
2015/01/23 职场文书
食品安全主题班会
2015/08/13 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android