제4장 단례 모드

4.1 구현 사례 모델

var Singletion = function(name){
    this.name = name;
    this.instance = null;
}

Singletion.prototype.getName = function(){
    console.log(this.name);
}

Singletion.getIntance = function(name){
    if(!this.instance){

        this.instance = new Singletion(name);
    }
    return this.instance;
}
var a = Singletion.getIntance('sven1');
console.log(Singletion.instance); //{ name: 'sven1', instance: null }
var b = Singletion.getIntance('sven2')
console.log(Singletion.instance); //{ name: 'sven1', instance: null }
console.log(a===b); //true

혹은

var Singletion = function(name){
    this.name = name;

}

Singletion.prototype.getName = function(){
    console.log(this.name);
}

Singletion.getIntance = (function(){
    var instance = null;
    return function(name){
        if(!instance){
            instance = new Singletion(name);
        }
        return instance;
    }

})()
var a = Singletion.getIntance('sven1');
var b = Singletion.getIntance('sven2')
console.log(ba===b); // true

의의가 크지 않다

4.2 투명한 단일 모드

var CreateDiv = (function(){
    var instance;
    var CreateDiv = function(html){
        if(instance){
            return instance;
        }
        this.html = html;
        this.init();
        return instance = this;


    }
    CreateDiv.prototype.init = function(){
        var div = document.createElement('div');
        div.innerHTML = this.html;
        document.body.appendChild(div);
    }
    return CreateDiv;
})();
var a = new CreateDiv('sven1');
var b = new CreateDiv('sven2');
console.log(a===b);  //true

구조 함수가 이상해요.
이 단일 클래스를 일반적인 여러 개의 실례를 만들 수 있는 클래스로 만들고 제어를 삭제하면 불필요한 번거로움을 가져올 수 있습니다

4.3 에이전트로 단일 모드 구현

var CreateDiv = function(html){
    this.html = html;
    this.init();        
}
CreateDiv.prototype.init = function(){
    var div = document.createElement('div');
    div.innerHTML = this.html;
    document.body.appendChild(div);
}

var ProxySingletonCreateDiv = (function(){
    var instance;
    return function(html){
        if (!instance) {
            instance = new CreateDiv(html)
        }
        return instance
    }
})()

var a = new ProxySingletonCreateDiv('sven1');
var b = new ProxySingletonCreateDiv('sven2');

console.log(a===b);

일반 클래스를 만들면 여러 인스턴스가 생성됩니다.
캐시 에이전트의 응용 프로그램 중 하나

4.4 Javascript의 단일 모드

전역 변수가 가져오는 오염을 상대적으로 낮추다
1 네임스페이스 사용
객체 글꼴

var namespace1 = {
    a : function(){
        alert(1);
    },
    b:function(){
        alert(2);
    }
}

동적 생성 네임스페이스

var MyApp = {};
MyApp.namespace = function(name){
    var parts = name.split('.');
    var current = MyApp;
    for(var i in parts){
        if(!current[parts[i]]){
            current[parts[i]] = {};
        }
        current = current[parts[i]]
    }
}
MyApp.namespace('event');
MyApp.namespace('dom.style');
console.dir(MyApp); //{ namespace: [Function], event: {}, dom: { style: {} } }

// 
var MyApp = {
    event:{},
    dom:{
        style:{}
    }
}

2 폐쇄 패키지를 사용하여 개인 변수 봉인

var user = (function(){
    var _name = 'sven', _age = 29;
    return {
        getUserInfo : function(){
            return _name + '-' + _age;
        }
    }
})()

4.5 타성

웹 QQ의 첫 번째 해결 방안은 페이지를 불러올 때 이 div 창을 만들면 DOM 노드를 낭비하는 것이다
사용자가 로그인 단추를 눌렀을 때 만들기 시작하여 단례적인 효과를 잃었습니다
so

var createLoginLayer = (function(){
    var div;
    return function(){
        if(!div){
            div = document.createElement('div');
            div.innerHTML = ' '
            div.style.display = 'none';
            document.body.appendChild(div);
        }
        return div;
    }
})()

document.getElementById('loginBtn').onclick = function(){
    var loginLayer = createLoginLayer();
    loginLayer.style.display = 'block';
}

4.6 통용되는 타성 사례

    
    


 
 
    
var getSingle = function(fn){
    var result;
    console.log(result);
    return function(){
        console.log(result);
        return result || (result = fn.apply(this,arguments));
    }
}

var createLoginLayer = function(){
    var div = document.createElement('div');
    div.innerHTML = ' ';
    div.style.display = 'none';
    document.body.appendChild(div);
    console.log(1);
    return div;
};

var createSingleLoginLayer = getSingle(createLoginLayer);

document.getElementById('loginBtn').onclick = function(){
    var loginLayer = createSingleLoginLayer();
    loginLayer.style.display = 'block';
}


var createSingleIframe = getSingle(function(){
    var iframe = document.createElement('iframe');
    document.body.appendChild(iframe);
    console.log(2);
    return iframe;
});

document.getElementById("loginBtn1").onclick = function(){
    var loginLayer = createSingleIframe();
    loginLayer.src = 'http://www.baidu.com';
}
    



test.html:13 undefined
test.html:13 undefined
test.html:15 undefined
test.html:25 1
test.html:15 undefined
test.html:40 2

결점에 원 이벤트 귀속

var bindEvent = function(){
    $('div').one('click',function(){
        alert('click');
    });
};

var render = function(){
    console.log(' ');
    bindEvent();
}

render();
render();
render();


// getSingle ， 

var bindEvent = getSingle(function(){
    document.getElementById('div').onclick = function(){
        alert('click')
    }
    return true;
})

var render = function(){
    console.log(' ')；
    bindEvent();
}

render();
render();
render();