求结构解释（Revealing Module Pattern）

Question

回复：The Odin Project: Missile Command canvas game exercise.

这个项目的投稿很少（要么很新，要么很难），可供参考的两篇投稿都是经验比我丰富的人，比较容易理解的投稿如下：

var missileCommand = (function() {

  //---------
  //hundreds of lines of game logic
  //including 'initialize' and 'setupListeners' methods
  //---------

  return {
    initialize: initialize,
    setupListeners: setupListeners
  };

})();

$( document ).ready( function() {
  missileCommand.initialize();
  missileCommand.setupListeners();
});

return 后面的 purpose/meaning/structure 和 $(function) 中的后续方法调用是什么？我不确定发生了什么，除了删除任何一组都会破坏一切。

我知道标题不是很详细，但我没有足够的信息来做很多事情。当我知道如何称呼它时会编辑它。

Answer 1

这里有两个完全独立的模式。

var missileCommand = (function() {

  //---------
  //hundreds of lines of game logic
  //including 'initialize' and 'setupListeners' methods
  //---------

  return {
    initialize: initialize,
    setupListeners: setupListeners
  };

})();

这是 revealing module pattern 的一个实现。它允许您创建一个模块 (missileCommand)，该模块公开了许多 public 方法（此处为 initialize 和 setupListeners）。它还允许您定义和存储私有方法和变量；将在您评论的区域内定义。

$( document ).ready( function() {
  missileCommand.initialize();
  missileCommand.setupListeners();
});

这是一个jQuery ready block。当 DOMContentLoaded 事件触发时，jQuery 将运行提供的功能。在这里，该函数调用 missileCommand.initialize()，然后调用 missileCommand.setupListeners()。

更多时候，您会看到用于将事件处理程序附加到元素的就绪块；

$(document).ready(function () {
    $('#some-selector').on('click', function () {
        alert('Hello');
    });
});

^{请注意，我的两个解释都是对每个主题的简短介绍。这两个链接（以及进一步的 Google-ing 术语）将为您提供更详细的解释。}

Answer 2

$ 是一个 jQuery 对象。它在这里所做的是将匿名函数（包含两个函数调用 initialize() 和 setupListeners()）绑定到事件 "ready"，当文档 (DOM ) 已满载。

你可以在 jQueryFind(myElement).whenCompletelyLoaded(myFunctionToExecuteOnEvent()) 中翻译它（这不是功能代码）

missileCommand 函数中的 return 语句确保比 var myCommands = missileCommand() 它 returns 一个包含 initialize 两个值的对象函数和 setupListeners 函数。

Answer 3

在那 100 行代码中，您肯定会找到 2 个匹配的函数声明：function initialize(){} 和 function setupListeners().

返回的对象通过返回它们以允许调用它们来简单地公开这 2 个函数：

missileCommand.initialize();
missileCommand.setupListeners();

返回对象的属性可以有不同的名称，但作者希望属性与函数名称匹配....属性的值只是对函数的引用先前声明的对象

求结构解释（Revealing Module Pattern）

Seeking explanation of structure (Revealing Module Pattern)

javascript

jquery

html5-canvas