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中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
利用vue实现模态框组件
Dec 19 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
详解node.js 事件循环
Jul 22 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遍历数组的几种方法
2012/03/22 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python 文件和输入输出小结
2013/10/09 Python
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
Python实现生活常识解答机器人
2021/06/28 Python