Js设计模式之创建型设计模式(一)、单例模式
goJhou 发布于2018-02 浏览:3337 回复:9
2
收藏

设计模式并不是一定要用的,而是当遇到问题时才会去使用的。在JS中,我们通常会遇到一些奇妙的问题。有全局污染类似的问题经常出现。设计模式就能解决这些问题。

创建型设计模式 就是 我们创建对象的几种方式。各有好坏,以具体情况为主

 

在开篇之前,我们先来看一段代码

上方申明了2个a,曾经踩过这种坑的朋友们就会知道结果,后者的a=3会将前者的a=1给覆盖掉。

这就是一个典型的全局污染案例,我们影响到了本不想影响到的变量。

如果用ES6的话,我们会使用let去申明

 这也是不行的,带来的是由js带来的错误:Uncaught SyntaxError: Identifier 'a' has already been declared

a已经被申明过了。

 

那如何有效的解决这样的全局污染呢?

 

单例模式是一种创建型设计模式。目的是为了预防全局污染,全局命名冲突的问题,并且他的实现不受场景限制,可以想用就用,是一个比较常用的设计模式。

 

接着我们来看看为了防止全局污染应用了单例模式的Js代码

上侧呢,就是为了解决全局污染而使用的单例模式。分别对变量和函数进行了封装。

 

我们取出一片进行讲解

//(function(){...})() 自执行匿名函数
var huangMo =(function(){		
	 //存放变量的对象
			var huangMoParam = {
				a:1,
				b:2
			};
         //返回一个json对象,内含方法
			return {
         //返回一个方法,方法返回指定变量 这样可以达到一个只读的效果
				getdata: function(val){
					return huangMoParam[val]
				}
			}
		})();

         //尝试读取a
		console.log(huangMo.getdata("a"));

 

当能理解了上方的,我想函数的封装也难不到你了

 

好啦,这就是单例模式啦,希望可以理解到其中的精髓

 

其实我发出的每一篇帖子,不仅仅是在教学,我自己也在学习喔~希望各位能与我一同学习,共同进步~

收藏
点赞
2
个赞
共9条回复 最后由用户已被禁言回复于2022-04
#11用户已被禁言回复于2018-07

百度的太规范了,缺少前辈们淌过是留下的精华感悟

0
#10goJhou回复于2018-07
#8 用户已被禁言回复
楼主的分享很有用,但是有一个问题。 我是一个菜鸟,这些东西我能看出很有用,然而自己是个小白,看的不是多明白。 希望楼主可以分享点小白教程。  
展开

自行百度javascript学习喔

0
#8用户已被禁言回复于2018-07

楼主的分享很有用,但是有一个问题。

我是一个菜鸟,这些东西我能看出很有用,然而自己是个小白,看的不是多明白。

希望楼主可以分享点小白教程。

 

0
#7goJhou回复于2018-02
#5 卡农LLLL回复
我看出来不是go神复制网上的东西的.全手写啊.成就大神果然是有原因的.我要跟你这个系列了.
展开

哈哈哈,欢迎,如果有问题欢迎跟进~

0
#6goJhou回复于2018-02
#4 卡农LLLL回复
go神....你发学习经验就发学习经验...我跑了龙套能申请盒饭不..哈哈哈哈
展开

给你俩积分,下一个

0
#5卡农LLLL回复于2018-02

我看出来不是go神复制网上的东西的.全手写啊.成就大神果然是有原因的.我要跟你这个系列了.

0
#4卡农LLLL回复于2018-02
#3 goJhou回复
来,代码里有彩蛋hhhh

go神....你发学习经验就发学习经验...我跑了龙套能申请盒饭不..哈哈哈哈

0
#3goJhou回复于2018-02
#2 荒墨丶迷失回复
go大神 前来助阵~ 

来,代码里有彩蛋hhhh

0
#2荒墨丶迷失回复于2018-02

go大神 前来助阵~ 

1
TOP
切换版块