Javascriptでモジュールパターンを実装するjqueryに依存して

Question

モジュールコードはjQueryのようなサードパーティライブラリに依存しますが、モジュールパターンを実装する最良の方法は何ですか？

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

私の質問は次のとおりです。私はすべてのコードをjavascriptファイルでファッションのようにライブラリに入れることを計画しています。

getData()メソッドに表示されているように、私はajax呼び出しを行う予定です。私はこれのためにjQueryライブラリを使用したい。今、jQueryに依存しながら、どのようにJavaScriptモジュールをコーディングしますか？

ライブラリ全体を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が含まれていることを確認します。