js单例模式

• 单例模式就是保证只实例化一次，一个类只有一个实例，下面结合具体实例作分析
• 弹窗，实现弹框的一种作法是先建立好弹框，而后使之隐藏，这样子的话会浪费部分没必要要的 DOM 开销，咱们能够在须要弹框的时候再进行建立，同时结合单例模式实现只有一个实例，从而节省部分 DOM 开销

对象字面量方式

var people={
    props:[],
	methods:[],
	data:{
	name:'zhan',
	age:25
	}
}

其余方式：

• 第一种：

function createPop() {
            const div = document.createElement('div')
            div.innerHTML = '弹框'
            div.style.display = 'none'
            document.getElementsByClassName('pop')[0].appendChild(div)
            return function (dis) {//这里返回弹窗的显示与隐藏的方法
                div.style.display = dis
            }
        }

        function createClass(fn) {
            var onlyClass = null;//这里是必要的，做为实例的容器
            if (!onlyClass) {//这里确保div只建立一次
                onlyClass = fn.call(this);
            }
            return onlyClass
        }

        var dialog = createClass(createPop)
        document.getElementById('open').onclick = function () {
            dialog('block');
        }
        document.getElementById('close').onclick = function () {
            dialog('none');
        }

• 第二种（提高）：

var singlePattern=(function () {
            //定义私有方法
            function createPop(parent) {
               var div = document.createElement('div')
                div.innerHTML = '弹框'
//                div.style.display = 'none'
                parent.appendChild(div)
                this.pop=div;
            }
			//这里来扩充实例的方法
            createPop.prototype.show=function () {
                this.pop.style.display='block'
            }
            createPop.prototype.hide=function () {
                this.pop.style.display='none'
            }
			//若是须要将弹窗加到其余dom中，须要调用该方法，会引发页面回流和重绘
			 createPop.prototype.append=function (parent) {
                parent.appendChild(this.pop)
            }
            var instance=null;
            return {//这里增长入口
                doPop:function (parent) {
                    if(Object.prototype.toString.call(instance).slice(-7,-1).toLowerCase()!=='object'){
                        instance=new createPop(parent) //
                    }
                    return instance
                }
            }

        })()
        var pop_parent=document.getElementsByClassName('pop')[0]

        document.getElementById('open').onclick = function () {
            singlePattern.doPop(pop_parent).show()
        }
        document.getElementById('close').onclick = function () {
            singlePattern.doPop(pop_parent).hide()
        }

• 第三种更改构造函数

能够加到任何dom中
 var singlePattern=function (parent) {
            function createPop(parent) {
                var div = document.createElement('div')
                div.innerHTML = '弹窗'
                parent.appendChild(div)
                this.pop=div;
                this.parent=parent;
            }
            createPop.prototype.show=function () {
                this.pop.style.display='block'
            }
            createPop.prototype.hide=function () {
                this.pop.style.display='none'
            }
            createPop.prototype.append=function (parent) {
                parent.appendChild(this.pop)
            }
            var instance=new createPop(parent),popParent=parent;
            singlePattern=function (parent) {//更改构造函数
                if(popParent!=parent){
                    popParent=parent
                    instance.append(parent)
                }
                return instance
            }
            return  instance
        }
        var pop_parent=document.getElementsByClassName('pop')[0];
        var pop_parent1=document.getElementsByClassName('pop1')[0];
        document.getElementById('open').onclick = function () {
           new singlePattern(pop_parent).show()
        }
        document.getElementById('open1').onclick = function () {
            new singlePattern(pop_parent1).hide()
        }

• 第四种给构造函数加属性，该属性为实例挂载点

var singlePattern=function (parent) {
            function createPop (parent) {
                var div = document.createElement('div')
                div.innerHTML = '弹窗'
                parent.appendChild(div)
                this.pop=div;
                this.parent=parent;
            }
            createPop.prototype.show=function () {
                this.pop.style.display='block'
            }
            createPop.prototype.hide=function () {
                this.pop.style.display='none'
            }
            createPop.prototype.append=function (parent) {
                parent.appendChild(this.pop)
            }
            if(typeof singlePattern.instance ==='object'){
                return singlePattern.instance
            }else {
                return singlePattern.instance=new createPop(parent);
            }

        }
        var pop_parent=document.getElementsByClassName('pop')[0];
        document.getElementById('open').onclick = function () {
           new singlePattern(pop_parent).show()
        }
        document.getElementById('close').onclick = function () {
            new singlePattern(pop_parent).hide()
        }