javascript 了解 JS 模块模式的工作原理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4311949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Understanding how JS Module Pattern works
提问by olemarius
I'm trying to understand js module patterns in use with jQuery. I've edited this a couple of times and will try to end up with a good practice for my skill level (a couple of months fresh on jquery).
我正在尝试了解与 jQuery 一起使用的 js 模块模式。我已经编辑了几次，并会尝试以适合我的技能水平的良好实践结束（在 jquery 上几个月新鲜）。
There's no direct question in this post. I'm more aiming for feedback and inputs on how to properly use the module pattern (together with jquery) in a large scale website.
在这篇文章中没有直接的问题。我更倾向于关于如何在大型网站中正确使用模块模式（与 jquery 一起）的反馈和输入。
Update: I've added a bunch of examples in order to get an overview of all ways of writing things, and try to cover any pitfalls..
更新：我添加了一堆示例，以了解所有编写内容的方式，并尝试涵盖任何陷阱。
/*
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();
});
Trying to understand what's happening (Feel free to provide corrections or better explanations):
试图了解发生了什么（请随时提供更正或更好的解释）：
Company.AppName = (function ($) { ...
Here the namespace Company.AppName is created. I set ($) inside so I can use the $ without it conflicting with any other libraries that might use $.
这里创建了命名空间 Company.AppName。我在里面设置了 ($)，这样我就可以使用 $ 而不会与任何其他可能使用 $ 的库发生冲突。
})(jQuery);
As far as I know, the methods and variables are returned to the namespace here ...})(); and by adding jQuery inside () it'll tell it that the $ means jQuery.
据我所知，这里的方法和变量返回到命名空间...})(); 通过在 () 中添加 jQuery，它会告诉它 $ 表示 jQuery。
Initializing
初始化
I'm not sure what's best practice here, but I'll add what I know so far.
我不确定这里的最佳实践是什么，但我会补充我目前所知道的。
Initializing within js file:
在 js 文件中初始化：
jQuery(function() {
AppLaunch.Admin.init();
});
Initializing from a file:
从文件初始化：
<script type="text/javascript">
// Shorthand for jQuery(document).ready(function() { ... }
jQuery(function($) {
AppLaunch.Admin.init($('#someSelector'));
});
</script>
采纳答案by El Yobo
There are many places that will give you an in depth explanation of the module pattern; jQuery's usage of it is pretty standard.
有很多地方会给你深入讲解模块模式；jQuery 对它的使用非常标准。
This is just one of the many module pattern explanations out there.
这只是众多模块模式的解释之一。
