ThemesApp.zip


[출처] http://www.codeproject.com/Articles/108786/Encapsulation-in-JavaScript

[번역] 전희근(tource) - tource@naver.com

[라이센스] The Code Project Open License (CPOL)




소개

캡슐화는 객체지향에서 아주 중요한 개념 중 하나입니다. 

캡슐화를 하나의 클래스에 있는 private와 public 멤버들이 서로 묶여져 사용됩니다. 

모든 객체지향언어들은 이러한 개념을 지원하고 있으며, 자바스크립트 역시 캡슐화를 지원하고 있습니다.


이번 기사에서는 css파일을 동적으로 추가/삭제/대체할 수 있게 해주는 CssManager 라는 객체를 만들면서 캡슐화에 대해 배워 보겠습니다.


계획

- CssManager 객체를 감쌀 Managers라는 네임스페이스(패키지명)를 생성

- CssManager 라는 싱글톤 객체를 생성

- Stylesheet 추가/삭제/변경 할 수 있도록 public 메소드를 추가

- private 멤버들을 생성


코드

CssManager 객체를 감쌀 Managers 라는 네임스페이스(패키지명)를 생성


자바스크립트에서 네임스페이스를 만드는 일은 객체리터럴을 만드는 것과 같습니다.

var Managers = {}; //namespace

간단하죠?

이제 Manager 네임스페이스로 Managers 객체를 감쌀 수 있게 되었습니다.


CssManager 라는 싱글톤 객체를 생성

Managers.CssManager = { //singleton
}

'{' 과  '}' 사이 부분이 객체정의 부분입니다.


Stylesheet 추가/삭제/변경 할 수 있도록 public 메소드를 추가

자바스크립트에서 객체들은 key와 value를 갖는 associative array와 같은 형태를 가집니다.


그리고 두개의 파라메터를 가진 addStyleSheet 메소드를 만듦니다.

Managers.CssManager = {
  addStyleSheet: function(id, url){ //id - link's id, url - link's href
  }
}


addStyleSheet 메소드는 동적으로 스타일시트 링크를 생성하고 속성값을 정의 하여 head 영역에 붙이는 기능을 합니다.

Managers.CssManager = {
    addStyleSheet: function(id, url){
        var newStyleSheet = document.createElement("link");
        newStyleSheet.setAttribute("rel", "stylesheet");
        newStyleSheet.setAttribute("type", "text/css");
        newStyleSheet.setAttribute("id", id);
        newStyleSheet.setAttribute("href", url);
        document.getElementsByTagName("head")[0].appendChild(newStyleSheet);
    }
}


그리고 다른 두개의 메소드도 추가합니다.

Managers.CssManager = {
    addStyleSheet: function(id, url){    
        var newStyleSheet = document.createElement("link");
        newStyleSheet.setAttribute("rel", "stylesheet");
        newStyleSheet.setAttribute("type", "text/css");
        newStyleSheet.setAttribute("id", id);
        newStyleSheet.setAttribute("href", url);
        document.getElementsByTagName("head")[0].appendChild(newStyleSheet);
    },
    
    removeStyleSheet: function(id){    
        var currentStyleSheet = document.getElementById(id);
        if(currentStyleSheet){
            currentStyleSheet.parentNode.removeChild(currentStyleSheet);
        }
    },
        
    swapStyleSheet: function(id, url){
        this.removeStyleSheet(id);
        this.addStyleSheet(id, url);
    }
}

removeStyleSheet 메소드는 DOM에서 id에 해당하는 스타일시트를 삭제하는 기능을 담당하며

swapStyleSheet 는 이미 존재하는 스타일시트의 경로를 다른 스타일시트로 변경하는 기능을 합니다.


private 멤버 생성

지금까지 생성된 모든 멤버들은 public 멤버들입니다. 앞으로 private 멤버 두개를 추가해 보도록 하겠습니다. 


첫번째 객체는 document 객체를 참조하는 변수를 선언한 것입니다.

var doc = document;

두번째 객체는 여러 link 엘리먼트를 setAttribute() 메소드를 여러차례 실행하지 않고 한번에 설정하도록 하는 객체입니다.

var setAttributes = function(attributes){
}


다른 언어들과는 틀리게 자바스크립트에서는 private / public 지시자를 직접 명시할 순 없습니다. 

private 멤버를 만들기 위해서는 Closures를 활용 해야하는데요, Closures는 private 멤버를 선언할 수 있도록 돕는 기능을 합니다. 여기서 Closures에 대해 자세히 언급하진 않겠습니다. 자, private 멤버가 생성되는 걸 보시죠.


CssManager에 Closures를 적용하여 수정하여 봅시다.

Managers.CssManager = (function(){ /* private space */ return{ //Public members addStyleSheet: function(id, url){ var newStyleSheet = doc.createElement("link"); setAttributes(newStyleSheet, { rel : "stylesheet", type : "text/css", id : id, href: url }); doc.getElementsByTagName("head")[0].appendChild(newStyleSheet); }, removeStyleSheet: function(id){ var currentStyleSheet = doc.getElementById(id); if(currentStyleSheet){ currentStyleSheet.parentNode.removeChild(currentStyleSheet); } }, swapStyleSheet: function(id, url){ this.removeStyleSheet(id); this.addStyleSheet(id, url); } } })();

위 코드에서는 Closures를 사용하여 익명함수가 스스로 실행 될 수 있도록 하였고, 그 함수는 public 메소드를 리턴하게 됩니다. 모든 return {...} 에서 리턴 된 메소드들은 public 멤버이며 function() {./* private space */...} 에 정의된 것들은 private 멤버입니다.


(function(){
    
    //Private members

    return{
        //Public members
    }
}();


두개의 private 멤버들을 추가해 보겠습니다.

Managers.CssManager = (function(){ 
    
    //Private members
    var doc = document;
    var setAttributes = function(element, attributes){
        for(attribute in attributes){
            element[attribute] = attributes[attribute];
        }
    }
        
    return{
        //Public members
        addStyleSheet: function(id, url){
            var newStyleSheet = doc.createElement("link");
            setAttributes(newStyleSheet, {
                rel : "stylesheet",
                type : "text/css",
                id : id,
                href: url
            });
            doc.getElementsByTagName("head")[0].appendChild(newStyleSheet);
        },

        removeStyleSheet: function(id){
            var currentStyleSheet = doc.getElementById(id);
            if(currentStyleSheet){
                currentStyleSheet.parentNode.removeChild(currentStyleSheet);
            }
        },
            
        swapStyleSheet: function(id, url){
            this.removeStyleSheet(id);
            this.addStyleSheet(id, url);
        }
    }
})();


사용법

CssManager 이 완성되었습니다!. 이제 동적으로 CSS를 변경하기위해, addStyleSheet  호출해 봅시다. 고유ID값을 파라미터에 넣어주시고, 아래와 같이 작성해 봅시다.

Managers.CssManager.addStyleSheet("myStyleSheet", "Default.css");

위와 마찬가지로, 삭제 메소드와 변경메소드도 사용해 봅시다.

Managers.CssManager.removeStyleSheet("myStyleSheet");
Managers.CssManager.swapStyleSheet("myStyleSheet", "Advanced.css");


모든 끝났군요. 읽어주셔서 감사하고 이 자료가 도움이 되었으면 좋겠네요. 첨부된 소스파일도 확인해주세요.





하나님 감사합니다. 

이렇게 좋은 정보를 서로와 나누게 해주셔서. 이 글을 읽는 모든 개발자에게 예수님의 사랑을 알게 해주세요.

심령이 가난한 자는 복이 있나니 천국이 그들의 것임이요 (마태복음 5장 3절)


by TOURCE Kunny 2013.02.06 12:48

거제도에서 서울로 컴퓨터 개발자가 되기 위해 상경한지 2년이 되었다.

건강문제로 많이 힘든 시절도 있었고 코딩을 하며 즐거운 일들도 많았는데, 

이제 다시 고향으로 내려가 개발자가 아닌 그냥 IT인 관련직에서 근무를 해볼까 한다.


다시 취미 개발자가 되는 것..

내 자신에게 많이 부끄럽다. 나와의 약속을 져버린 것 같아서 너무 부끄럽고 수치스럽다.


그렇다고 개발을 포기하는 건 아니다. 조금의 여유가 생겼으니 혼자만의 개발에 도전해보고싶다.

실무에서 개발보다 많은 경험을 해보진 못하겠지만, 나만의 작품을 만들어가며 발전하도록 노력하겠다.


지금 이 순간의 마음이 영원하길 바라며...

아자아자 화이팅!

by TOURCE Kunny 2013.02.06 11:00
| 1 |