jquery에 의존하여 자바에서 모듈 패턴을 구현하십시오.

Question

모듈 패턴을 구현하는 가장 좋은 방법은 무엇입니까? 모듈 코드는 예를 들어 jQuery와 같은 제 3 자 라이브러리에 달려 있습니까?

var someModule = (function(){ 
    //private attributes 
    var privateVar = 5; 

    //private methods 
    var privateMethod = function(){ 
     return 'Private Test'; 
    }; 

    return { 
     //public attributes 
     publicVar: 10, 
     //public methods 
     publicMethod: function(){ 
      return ' Followed By Public Test '; 
     }, 

     //let's access the private members 
     getData: function(){ 
      //make ajax call and do some processing and generate output 
      return privateMethod() + this.publicMethod() + privateVar; 
     } 
    } 
})(); //the parens here cause the anonymous function to execute and return 

someModule.getData(); 

제 질문은 자바 스크립트 파일에 패션과 같은 라이브러리에 모든 코드를 넣으려고합니다.

getData() 메서드에서 보았 듯이, 나는 ajax 호출을 할 계획이다. 나는 이것을 위해 jQuery 라이브러리를 사용하고 싶다. 이제 jQuery에 의존하면서 어떻게 자바 스크립트 모듈을 코딩합니까?

전체 라이브러리를 대신 jQuery 플러그인으로 만들어야합니까?

Answer 1

위대한 튜토리얼/예는 here 또는 here입니다. 이것이 모듈 패턴이 아니라는 것을 알고 있습니다 만, 필요한 경우 모듈을 통해 네임 스페이스를 확장 할 수있는 것과 함께 노출되는 모듈 패턴과 동일한 이점을 제공합니다. 아래는 그 예제의 코드입니다.

//Self-Executing Anonymous Func: Part 2 (Public & Private) 
(function(skillet, $, undefined) { 
    //Private Property 
    var isHot = true; 

    //Public Property 
    skillet.ingredient = "Bacon Strips"; 

    //Public Method 
    skillet.fry = function() { 
     var oliveOil; 

     addItem("\t\n Butter \n\t"); 
     addItem(oliveOil); 
     console.log("Frying " + skillet.ingredient); 
    }; 

    //Private Method 
    function addItem(item) { 
     if (item !== undefined) { 
      console.log("Adding " + $.trim(item)); 
     } 
    }  
}(window.skillet = window.skillet || {}, jQuery)); 

//Public Properties 
console.log(skillet.ingredient); //Bacon Strips 

//Public Methods 
skillet.fry(); //Adding Butter & Frying Bacon Strips 

//Adding a Public Property 
skillet.quantity = "12"; 
console.log(skillet.quantity); //12 

//Adding New Functionality to the Skillet 
(function(skillet, $, undefined) { 
    //Private Property 
    var amountOfGrease = "1 Cup"; 

    //Public Method 
    skillet.toString = function() { 
     console.log(skillet.quantity + " " + 
        skillet.ingredient + " & " + 
        amountOfGrease + " of Grease"); 
     console.log(isHot ? "Hot" : "Cold"); 
    };  
}(window.skillet = window.skillet || {}, jQuery)); 

try { 
    //12 Bacon Strips & 1 Cup of Grease 
    skillet.toString(); //Throws Exception 
} catch(e) { 
    console.log(e.message); //isHot is not defined 
} 

Answer 2

당신은 이런 식으로 뭔가를 시도 할 수 있습니다 :

var someModule = (function($){ 
    //private attributes 
    var privateVar = 5; 

    //private methods 
    var privateMethod = function(){ 
     return 'Private Test'; 
    }; 

    return { 
     //public attributes 
     publicVar: 10, 
     //public methods 
     publicMethod: function(){ 
      return ' Followed By Public Test '; 
    }, 

    //let's access the private members 
    getData: function(){ 
      //make ajax call and do some processing and generate output 
      $.ajax(/* ... */); 
       return privateMethod() + this.publicMethod() + privateVar; 
      } 
    } 
})(jQuery); //the parens here cause the anonymous function to execute and return 

someModule.getData(); 

그냥이 코드가 실행되기 전에 jQuery.js 포함되어 있는지 확인하십시오.