我想了解的JavaScript模块模式。 我已经看到了它应该是什么样子的例子，但我不知道如何使用它。
例如，一些事情发生在这里：
$('input#share').on("click", function() {
$('.loading').html('<img class="remove_loading" src="/graphics/loading.gif" />');
var message = $(".wallmessage").val();
if (message == ""){
$("#messageempty").jmNotify();
$('.remove_loading').remove();
} else {
addMessage(message);
}
return false;
});
function addMessage(message)
{
$.ajax({
url: '/test',
type: 'POST',
dataType: "json",
data: {'message' : message},
success: function(data) {
...
},
error: function() {
...
}
});
}
如何使用与上面的例子：
var myTest = function() {
var selectId;
function addMessage () {
// ...
}
return { // public interface
publicMethod1: function () {
// all private members are accesible here
}
};
};
var start = myTest();
我在哪里添加单击事件，声明我瓦尔，添加addMessage与Ajax调用函数。 并调用addMessage功能？ 我必须包装在一切$(document).ready(function()
任何人都可以提供一些线索这对我来说？
谢谢
这是一个非常坚持己见主题，但我会做到这一点（不完全知道您充分的应用和它做什么），有点像这样：
var myApp = (function() {
var someElement = $("#foo"); //some element I know I'll use lots
var addMessage = function(message) {
$.ajax({
url: '/test',
type: 'POST',
dataType: "json",
data: {'message' : message},
success: function(data) {
...
},
error: function() {
...
}
});
};
var inputClick = function(event) {
event.preventDefault();
//depending on if you'll reuse these selectors throughout the app I might have these as variables
$('.loading').html('<img class="remove_loading" src="/graphics/loading.gif" />');
var message = $(".wallmessage").val();
if (message == ""){
$("#messageempty").jmNotify();
$('.remove_loading').remove();
} else {
addMessage(message);
}
};
var bindFunctions = function() {
$("input#share").on("click", inputClick)
};
var init = function() {
bindFunctions();
};
return {
// EDIT: 27/12/16 - need to return init for 'usage' example to work
init: init,
addMessage: addMessage
//anything else you want available
//through myApp.function()
//or expose variables here too
};
})();
//usage
myApp.init();
你原来的模式编码是错误的，该函数必须有()在最后，使之被立即调用的函数，然后执行，该曝光的任何return statement 。
你不妨从我所做的一切略有不同，这只是一个基本的想法，但我希望它可能让你开始。
有人而回问关于这个模式的问题， 我的答案是解释为什么我们使用(function() {})(); 以及如何return语句的工作在这方面，如果你稍微被它迷惑，可能是值得一读太多。
透出模块模式用于这样的：
var moduleName = (function () {
var privateVariable = 'private';
var privateMethod = function () {
alert('this is private');
};
// this is the "revealed" part of the module
return {
publicVariable: 'public',
publicMethod: function () {
alert('this is public');
}
};
}());
您也可以定义公共变量/方法的士兵，然后露出一个参考他们，使他们公开。 这是偏好的问题。
在您的例子，如果你想addMessage是模块的一部分，你会做这样的：
var moduleName = (function () {
// this becomes public due to the reference exposure in the return below
var addMessage = function () {
// do whatever
};
// this is the "revealed" part of the module
return {
addMessage: addMessage
};
}());
moduleName.addMessage();
我们的想法是通过将你的代码段/ modules.Check这一点，如果你想看到的模块化设计模式的一个很好的使用和我们如何能从中受益的一些方法，以减少来自外界更好的代码管理的可视性它。
http://learn.jquery.com/code-organization/concepts/
与Java，JavaScript并没有对性能或方法的私人和公共的概念。 让我们创建一个对象调用的人其中有2个属性firstName和姓氏，并创造2种功能，这将是我们的属性干将。 在JavaScript中，我们可以创建功能的对象和这些功能的特性就像任何地方的任何其他属性进行访问。
var person={
"firstName":"Anoop",
"lastName":"Rai",
"getFirstName":function(){
return this.firstName;
},
"getLastName":function(){
return this.lastName;
}
};
console.log(person.getFirstName());
console.log(person.firstName);
如所预期的上面的代码11个印刷Anoop和Anoop。 嗯，这不是很好的面向对象的编程。 好了，我们成功实施干将，所以我们也应该有制定者，应该是公共的范围和性质应标记为私有范围（这些私人和公共的概念属于JAVA，C ++语言一样什么???）。 我们的意图是好的，可以让应用特定为Javascript的概念。 我们不想做person.firstName，我们希望直接预防属性的访问。 在由于私人和公共的像Java语言中，我们实现了性能的控制acccess，但在Javascript一切都是公开的。
JavaScript使用封闭的概念来实现之类的东西私人及公众。 这种模式被称为模块模式。 也就是说，从公共访问隐藏变量。 为了实施范围，在包装功能的代码（记住，范围是通过函数在Javascript实现）。
function createPerson(){
var returnObj={
"firstName":"Anoop",
"lastName":"Rai",
"getFirstName":function(){
return this.firstName;
},
"getLastName":function(){
return this.lastName;
}
};
return returnObj;
}
var person=createPerson();
console.log(person.getFirstName());
console.log(person.firstName);
现在上面也行打印Anoop和Anoop。 仍然没有成功。 只要属性被绑定到其将被直接访问的对象。 让我们来解开它。 相反性质的，我们做的功能范围（闭包变量）的变量。
function createPerson(){
var firstName="Anoop";
var lastName="Rai";
var returnObj={
"getFirstName":function(){
return firstName;
},
"getLastName":function(){
return lastName;
}
};
return returnObj;
}
var person=createPerson();
console.log(person.getFirstName());
console.log(person.firstName);
现在，上面的线条打印Anoop和不确定。 这是如何发生的呢？ 由于封闭的，当功能的getFirstName和getLastName创建功能整过的作用域链或者说指针相关的变量，即firstName和lastName。 对象returnObj不记得变量都不过函数对象，因为封闭的回忆。 看起来我们实现了我们想要的，但有一件事是左，这是firstName和lastName的受控访问setter方法。 让我们来实现setter方法。
function createPerson(){
var firstName="Anoop";
var lastName="Rai";
var returnObj={
"getFirstName":function(){
return firstName;
},
"getLastName":function(){
return lastName;
},
"setFirstName":function(name){
return firstName=name;
},
"setLastName":function(name){
return lastName=name;
}
};
return returnObj;
}
var person=createPerson();
console.log(person.getFirstName());
person.setFirstName("Kumar");
console.log(person.getFirstName());
我们成功修改的firstName但在可控制的方式。
http://jkoder.com/the-module-pattern-javascript-way-of-hiding-data-in-objects-from-public-access/
我有与MooTools的一些经验，但我是一个新手的jQuery。 我通过阅读文档，它看起来像来组织代码模块模式的最聪明的办法，所以我想这一点。 然而，有一点似乎是从风格缺少的是“自我”的概念，任何，因为IIFE中的每个变量是一个自包含的对象（没有双关语意）。
所以......也许这违背了整个目的，但你可以做这样的事情，而且还有它在该模块模式的风格是有效的所有方式是“有效”？
var feature = ( function () {
var self = {
config: {
option1: 'thing 1',
option2: 'thing 2'
},
init: function (options) {
// allow overriding the default config
jQuery.extend( self.config, options );
self.doSomething();
},
doSomething: function () {
},
};
return {
init: self.init
}
})();
我喜欢这个，我可以在内部参考所有使用“自我”的方法和属性。 我仍然能够暴露，我想用“回归”对象的方法，所以（我猜）没关系。 但我这样一个新手，这看起来很简单和（乍）优雅的，我必须失去了一个主要的疑难杂症。 这股与对象文本格式，这是我很熟悉，从MooTools的编码风格。 所以，也许我试图适应圆钉进方孔。 也许内部对象字面是没有必要的，因为不是“self.doSomething（）”，我只能说“DoSomething的”？ 是这样吗？
部分我喜欢这个，因为我可以设置的$就在“背景”的说法是“自我”，这似乎是一个双赢。
