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 相关文章推荐
屏蔽Flash右键信息的js代码
Jan 17 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
JS检测图片大小的实例
Aug 21 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
深入了解Vue.js 混入(mixins)
Jul 23 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实现天干地支计算器示例
2014/03/14 PHP
php输入流php://input使用浅析
2014/09/02 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
名片管理系统python版
2018/01/11 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
ipython和python区别详解
2019/06/26 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
值传递还是引用传递
2015/02/08 面试题
JAVA程序员自荐书
2014/01/30 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
运动会入场词50字
2014/02/20 职场文书
员工入职担保书范文
2014/04/01 职场文书
ktv好的活动方案
2014/08/15 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
公路施工安全责任书
2015/05/08 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS