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学习笔记之Helloworld
Dec 22 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
JS实现小米轮播图
Sep 21 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实现验证码功能
2006/10/09 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php函数连续调用实例分析
2015/07/30 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
JavaScript内存管理介绍
2015/03/13 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python切图九宫格的实现方法
2019/10/10 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
如何将字串String转换成整数int
2015/02/21 面试题
杭州-DOTNET笔试题集
2013/09/25 面试题
毕业生自荐书模版
2014/01/04 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
读书之星事迹材料
2014/05/12 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
护士2015年终工作总结
2015/04/29 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS