「设计模式」JavaScript - 设计模式之单例模式与场景实践
单例介绍
上次总结了设计模式中的module模式,可能没有真真正正的使用在场景中,发现效果并不好,想要使用起来却不那么得心应手,
所以这次我打算换一种方式~~从简单的场景中来看单例模式,
因为JavaScript非常灵活,所以在使用设计模式的时候也带来了很强的灵活性,实现单例的方法也有很多,那就需要我们把握住单例模式的核心。
单例模式介绍:
单例模式是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。
在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象
作用:
1、模块间通信
2、系统中某各类的对象只能存在一个
3、保护自己的属性和方法,保证了所有的对象访问的都是同一个实例
注意事项:
1、注意this的使用
2、闭包容易造成内存泄露,不需要的尽快处理等待回收
简单场景
我们先来实现一个标准的单例模式:
1、如果实例存在就返回,实例不存在就创建新实例;
2、从全局命名空间中隔离出代码,从而为函数提供单一访问点:
var mySingleton = (function () {
// 实例保持Singleton的一个引用
let instance; // Singleton
// 私有方法和变量
function init() {
function privateMethod() {
console.log('I am private');
}
const privateVariable = ' I am also private ';
const privateRandomNumber = Math.random();
// 公有方法和变量
return {
publicMethod:function(){
console.log('I am public');
},
getRandomNumber:function(){
return privateRandomNumber;
}
}
} // 获取Singleton实例,如果存在就返回,不存在就创建新实例
return {
getInstance:function(){
if(!instance){
instance = init();
}
return instance;
}
} })(); // 测试
const singleA = mySingleton.getInstance();
const singleB = mySingleton.getInstance();
console.log( singleA.getRandomNumber() === singleB.getRandomNumber()); // true
console.log(singleA.publicMethod()) // I am public
下面写一个我们在场景中经常使用的一种简单的非标准的单例模式类型,
场景一:使用简单的单例模式实现一个可编辑表格
html
<table class="table table-bordered" id="js-table-test">
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>okaychen</td>
</tr>
<tr>
<td>2</td>
<td>StackOverflowChen</td>
</tr>
</table>
没使用单例模式之前,我们可能会这样处理:
$("#js-table-test td").click(function (argument) {
var m = $(this).html();
var s = "<input type='text' value='" + m + "' />";
$(this).html(s);
})
$("#js-table-test td").on('keyup','input',function(e){
e.stopPropagation();
var me = $(this);
if(e.keyCode==13){
me.val();
}
})
那么就让我们对比一下使用单例的代码 思路>>
1、使用自执行函数传递参数$,减少查询次数
2、使用简单的单例模式,为之后修改或者模块化打基础
提供单一访问点init,通过datas共享数据,render封装对应的元素,bind来绑定事件,_do来规范私有事件;
(function ($) {
// 命名空间
var index = {
init: function () {
// 入口
var me = this;
me.render();
me.bind();
},
datas: {
// 共享数据
num: 1
},
render: function () {
// 封装对应的元素
var me = this;
me.test = $('#js-table-test td');
},
bind: function () {
// 绑定事件
var me = this;
me.test.on('click', $.proxy(me['_do'], this));
},
_do: function (e) {
// 私有事件
var me = this;
var m = $(e.target).text();
var s = "<input type='text' value='" + m + "' />";
$(e.target).html(s);
console.log(me.datas.num ++)
}
}
index.init();
})(jQuery);
「设计模式」JavaScript - 设计模式之单例模式与场景实践的更多相关文章
- 「译」JavaScript 的怪癖 1:隐式类型转换
原文:JavaScript quirk 1: implicit conversion of values 译文:「译」JavaScript 的怪癖 1:隐式类型转换 译者:justjavac 零:提要 ...
- 「2014-3-13」Javascript Engine, Java VM, Python interpreter, PyPy – a glance
提要: url anchor (ajax) => javascript engine (1~4 articles) => java VM vs. python interpreter =& ...
- 【设计模式】Javascript设计模式——状态模式(行为型)
注:这个模式是非常聪明的,很有点数学中组合的意思,现在,来看下这个模式是怎么个思想. 问题提出:假如某个操作有三种可能,分别为1,2,3,还可能是组合,比如先执行1,再执行2或者先执行2再执行3或者1 ...
- 「前端」尚妆 UI 组件库工程实践(weex vue)
本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅! 前言 尚妆大前端团队使用 weex 进行三端统一开发有一段时间了,截止本文发表「达人店」APP大部分页面都已经用 weex 进行了重构 ...
- JavaScript设计模式-单例模式、模块模式(转载 学习中。。。。)
(转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性 ...
- JavaScript设计模式与开发实践 - 单例模式
引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...
- 探索Javascript设计模式---单例模式
最近打算系统的学习javascript设计模式,以便自己在开发中遇到问题可以按照设计模式提供的思路进行封装,这样可以提高开发效率并且可以预先规避很多未知的问题. 先从最基本的单例模式开始. 什么是单例 ...
- JavaScript设计模式_01_单例模式
最近项目不太忙,难得有时间看看书,平时挺喜欢js这门语言.也看过很多高级教程,觉得自己还是比较热衷于js的设计模式.这一次重温一下<JavaScript设计模式与开发实践>,开篇为单例模式 ...
- 再起航,我的学习笔记之JavaScript设计模式10(单例模式)
单例模式 单例模式(Singleton) : 又被称为单体模式,是只允许实例化一次的对象类.一个类有且仅有一个实例,并且自行实例化向整个系统提供. 命名空间 单例模式可能是JavaScript中我们最 ...
随机推荐
- windows 结束进程的详细过程
windows上如何结束进程的详细过程,下面附详细,图文说明 在cmd下,输入 netstat -ano|findstr 8080 //说明:查看占用8080端口的进程 在cmd下, ...
- 安装myeclipse2015 stable 3.0破解之后发生出现SECURITY ALERT:iNTEGRITY CHECK ERROR然后闪退解决方案
安装好myeclipse2015 stable以后也一步步按着破解文件的步骤来进行.打开myEclipse---->Subscription information--->Subscrip ...
- wireshark数据包分析实战 第二章
1,监听网络线路:即嗅探器的位置确定. 2,混杂模式:将网卡设置成混杂模式,网卡可以接受经过网卡的所有数据报,包括目的地址不是本网卡的数据报.这些数据都会发送给cpu处理,这样,wireshark就能 ...
- linux备份文件脚本
#!/bin/sh #Author: Opal TODAY=`date +%Y%m%d` YESTERDAY=`date -d"-1 day" +%Y%m%d` mkdir -p ...
- RTKLIB编译及RTCM数据读取样例
1.RTKLIB简介 RTKLIB是全球导航卫星系统GNSS(global navigation satellite system)的标准&精密定位开源程序包,RTKLIB由日本东京海洋大学( ...
- MySQL的备份与还原以及常用数据库查看命令
MySQL命令行导出数据库: 1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录 如我输入的命令行:cd C:\Program Files\MySQL\MySQL Serv ...
- Sql Server合并多行询数据到一行:使用自连接、FOR XML PATH('')、STUFF或REPLACE函数
示例表 tb 数据如下 id value ----- 1 aa 1 bb 2 aaa 2 bbb 2 ccc SELECT id, [val] = ( SELECT [value] + ',' FRO ...
- NodeJS 初学之安装配置环境
[TOC] 1.环境安装 操作系统: Ubuntu 16.04.2 LTS 1.1安装nvm ryan@ryan-900X5L:~/temp$ curl https://raw.githubuserc ...
- Java IO编程全解(一)——Java的I/O演进之路
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7419117.html JDK1.4之前的早期版本,Java对I/O的支持并不完善,开发人员在开发高性能I/O ...
- EasyUI Tree 树 ——实现多级别菜单的展示,以及与后台数据的交互
一 要引入的js css库 <link type="text/css" href="css/base.css" rel="stylesheet& ...