在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是包括在内。