【JavaScript设计模式】-- 单例模式

<script type="text/javascript">
	var Singleton = function() {
		var _instance = null;
		
		return {
			getInstance : function() {
				if (!_instance) {
					_instance = ['a', 'b', 'c', 'd'];
				}

				return _instance;
			}
		}
	}();
	
	document.write(Singleton.getInstance());
</script>

保证只有一个实例对象,并且提供一个方法可让全局访问到此实例对象。

一些应用场景:

某些JavaScript的UI组件中,需要获取页面的DOM对象,只需要调用getInstance方法时返回该实例(调用时才判断是否已被初始化)的引用即可。

实际中的应用如一个Dialog框:alert型、confirm型、loading型、login型..,可能只在需要创建一次容器(为避免频繁对DOM树的修改引发DOM的reflow而导致的消耗系统资源或是产生内存泄露)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>单例模式</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="meteoric_cry" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta http-equiv='content-type' content='text/html;charset=utf-8' />
  <style type='text/css'>
	.tip {
		background-color:#68af02;padding:5px 14px;color:#fff; font-size:14px;position:absolute;
	}
  </style>
 </head>

 <body>
  
<button onclick="Dialog.getInstance().update('111111');">显示框</button>&nbsp;&nbsp;
<button onclick="Dialog.getInstance().update('内容已被修改');">修改内容</button>

<script type="text/javascript">
	var Dialog = function() {
		var inner;
		
		var _instance = null;
	
		return inner = {
			getInstance : function() {
				if (!_instance) {
					_instance = document.createElement("div");
					_instance.className = "tip";
					document.body.appendChild(_instance);
				}

				return inner;
			},
			update : function(str) {
				_instance.innerHTML = str;
			}
		}
	}();
	
</script>

 </body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象

最近在一直研究Silverlight下的数据绑定控件,发现有这样两个接口IEditableObject 和IEditableCollectionView,记录一...

20190
来自专栏C#

解析.NET对象的跨应用程序域访问(下篇)

    转眼就到了元宵节,匆匆忙忙的脚步是我们在为生活奋斗的写照,新的一年,我们应该努力让自己有不一样的生活和追求。生命不息,奋斗不止。在上篇博文中主要介...

22960
来自专栏web编程技术分享

eclipse常用快捷键

30560
来自专栏前端达人

2018年最全面的前端面试题都在这里了

意义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 注意: 1.尽可能少的...

5.9K70
来自专栏web前端

SASS学习笔记(一)

一、为什么使用SASS CSS不是编程语言,没有变量、条件语句等等,只是单纯的描述,因此为CSS加入编程元素(即“CSS预处理器”)。其基本思想:用一种专门的编...

21080
来自专栏cloudskyme

使用jquery-easyui写的CRUD插件(1)

写插件先看看jqeury的插件如何写,先了解一下如何写插件的代码。 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,...

39590
来自专栏软件开发

CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

CSS不像其它高级语言一样支持算术运算、变量、流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等。...

25450
来自专栏软件开发

前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

一、Vue的实例 1.1、创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue...

58770
来自专栏FreeBuf

XSS编码剖析

作者 0xExploit 0×00 引言 很多不了解html、js编码的童鞋挖掘xss漏洞时,都是一顿乱插,姿势对了,就能获得快感,姿势不对,就么反应。另外在f...

33680
来自专栏余生开发

base64图片转码

方法一: new fileReader().readAsDataURL(file) 方法二: var imgCanvas=document.createE...

67930

扫码关注云+社区

领取腾讯云代金券