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()
        }