了解JS Module Pattern的工作原理

我正在尝试理解jQuery中使用的js模块模式。 我已经编辑了几次，并试图在我的技能水平上做一个很好的练习（几个月新鲜的jquery）。

这篇文章没有直接的问题。 我更瞄准如何在大型网站中正确使用模块模式（以及jquery）的反馈和输入。

更新 ：我添加了一些示例，以便全面了解所有编写内容的方法，并尝试覆盖任何陷阱。

/* Not all browsers works with console.log, so we want to make sure that console.log is defined. This defines the consol.log and send the messages into an alert. */ if(!window.console) console = { log: function(s) { alert(s); // alert since we dont have the firebug console } }; // Check if namespace is defined if (typeof (CompanyName) === 'undefined') { CompanyName = {}; } // Or if AppName under CompanyName... if (typeof (CompanyName.AppName) === 'undefined') { CompanyName.AppName = {}; } // Our namespace CompanyName.AppName = (function ($) { // CHAINING var _first = function () { // Important to always start with "var" }, _second = function () { // Chained ( ...}, ) so it doesnt need "var" }, _third = "Just a var", // Variables just ends with , _four = "Another var"; // Closing the chain with ; var _anotherFirst = function () { // Previous chain of var's was ended with ; so this var needed "var" in order to start. }; g_globalVar = "I'm free!"; // When starting a var without "var", it becomes global. g_globalMethod = function () { alert("I'm free too!"); // Global method. }; g_chainedGlobalVarOne = "We are free!", g_chainedGlobalVarTwo = "We are free!"; // Private Variables var _privateVar = "privateVar: accessed from within AppLaunch.Admin namespace"; // Private Methods var _privateMethod = function () { log("privateMethod: accessed only from within AppLaunch.Admin"); }; // Last variable in a chain must always end with ; before the return {} function log() { if (window.console && window.console.log) window.console.log('[AppName] ' + Array.prototype.join.call(arguments, ' ')); }; return { init: function () { // Calling private _privateMethod(); // Calling Public this.myPublicMethod(); // Also Calling Public CompanyName.AppName.myPublicMethod(); // Calling Other namespace's Public Method (when exists) CompanyName.OtherNamespace.externalPublicMethod(); }, // Public myPublicMethod: function() { log("myPublicMethod"); }, // In a View (MVC), I could have a page called myPage where I want to init // some particular functions. myPage can be called just like init. myPage: function() { _second(); _third(); } } })(jQuery); // Initialize jQuery().ready(function() { CompanyName.AppName.init() CompanyName.AppName.myPublicMethod(); }); 

试图了解正在发生的事情（随意提供更正或更好的解释）：

 Company.AppName = (function ($) { ... 

这里创建了名称空间Company.AppName。 我在里面设置（$）所以我可以使用$，而不会与任何其他可能使用$的库冲突。

 })(jQuery); 

据我所知，方法和变量在这里返回到命名空间…}）（）; 通过在（）中添加jQuery，它会告诉它$表示jQuery。

初始化

我不确定这里的最佳做法是什么，但我会添加到目前为止我所知道的内容。

在js文件中初始化：

 jQuery(function() { AppLaunch.Admin.init(); }); 

从文件初始化：

  // Shorthand for jQuery(document).ready(function() { ... } jQuery(function($) { AppLaunch.Admin.init($('#someSelector')); });  

Answer 1

有很多地方可以让您深入解释模块模式; jQuery对它的使用非常标准。

这只是众多模块模式解释中的一个 。