前言和其他编程语言一样，Javascript也有很多设计模式，比如单例模式、代理模式、观察者模式等等，熟练使用Javascript设计模式可以让我们的代码逻辑是更清晰，更易于维护和重构。本文将介绍Javascript模式中比较常见和实用的模式——单例模式，主要分为概念和实例。在介绍示例的同时，也会对代码中的额外知识点进行讲解。单例模式的概念首先，什么是单例模式？可以这样理解：单例模式旨在保证一个类只有一个实例，提供全局访问点。可能有些人还不理解单例这个概念，可以想象一下生活中的一些例子。例如在注册账号时，如果我们注册的账号已经存在，系统会提示我们“该账号是否已经存在，请使用该账号登录”，除非注销原账号，否则我们无法再次创建相同的账号。这就是单例模式的生动体现。类似的例子还有网页的登录弹框。无论我们点击登录按钮多少次，界面上永远只会显示一个登录弹框，无法创建第二个。本文将以登录弹框为例，介绍如何使用单例模式。单例模式示例1.Demo展示演示地址为：弹出框示例2.代码展示构建单例模式弹出框实例的代码可能每个人写的不一样，但是目的是一样的：构建一个全局的独特且易于访问的弹出框。下面我们一步一步来实现这个例子。(1)获取DOM对象var$=function(id){returntypeofid==='string'?document.getElementById(id):id;};首先，为了方便后面对DOM的一些操作，我们这里采用函数式编程的原理，封装了元素对象获取目标id的方法，直接使用$(id)获取。(2)弹框构造器varModal=function(id,html){this.html=html;this.id=id;this.open=false;};这里我们声明了一个Modal作为弹框的构造函数，里面定义了公共属性html、id和open。html用来定义弹框里面的内容，id用来定义弹框的id名称，open用来判断弹框是否打开。(3)打开方法Modal.prototype.create=function(){if(!this.open){varmodal=document.createElement('div');modal.innerHTML=this.html;modal.id=this.id;document.body.appendChild(modal);setTimeout(function(){modal.classList.add('show');},0);this.open=true;}};我们在ModalMethod的原型链上定义了create，在方法里面我们create并在DOM中插入一个弹框，同时给弹框添加一个类为“show”的动画效果。这里简单介绍一下classList：classList是一个比className更方便操作元素类的属性，但是在兼容性上不兼容IE10以下版本：其提供的操作类的方法类似jQuery的，主要包括add(class1,class2,...)给元素添加一个或多个类名，类似于jQuery的addClass()remove(class1,class2,...)从元素中移除一个或多个类名，类似于jQuery的removeClass()contains(class)判断指定的类名是否存在，类似于jQuery的hasClass()这里我们使用add方法将show类添加到Modal中。(4)关闭方法Modal.prototype.delete=function(){if(this.open){varmodal=$(this.id);modal.classList.add('hide');setTimeout(function(){document.body.removeChild(modal);},200);this.open=false;}};定义好open方法后，我们在这里定义关闭弹框的方法，并为里面的弹框对象添加一个hide类的动画效果，***去除页面上的popover对象。(5)创建实例varcreateIntance=(function(){varinstance;returnfunction(){returninstance||(instance=newModal('modal','这是弹框'))}})();这是实现单例模式的重要部分，下面来分析一下知识点：使用闭包封装实例私有变量并返回一个函数使用||判断实例不存在的语法，则执行后者实例化的Modal方法，存在则直接返回实例，保证创建这个实例也可以理解为代理模式的一部分，即使只有一个弹出实例。(6)按钮操作varoperate={setModal:null,open:function(){this.setModal=createIntance();this.setModal.create();},delete:function(){this.setModal?this.setModal.删除（）：'';}};这里我们把按钮操作放在operate对象中，这样打开和关闭操作就可以通过this获取实例setModal。(7)绑定事件$('open').onclick=function(){operate.open();};$('delete').onclick=function(){operate.delete();};***我们给两个按钮分别绑定了open和delete方法，至此我们用单例模式实现的弹框demo就实现了。完整代码请查看：完整代码结论本文仅演示单例模式的一种实现。至于如何构建一个通用的单例模式，留给有兴趣的读者吧。文章灵感来自《Javascrit设计模式与开发实践》一书。
