在jQuery中依賴Javascript實現模塊模式

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庫。現在我怎麼編碼一個JavaScript模塊，而依靠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是包括在內。