Question

RE：The Odin Project: Missile Command canvas game exercise.

这个项目提交的内容非常少（非常新或非常困难），可供参考的两个提交内容来自拥有比I更多经验的人。在更容易获得的提交内容如下：

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();
});

$（函数）中返回和后续方法调用背后的目的/含义/结构是什么？我不确定发生了什么，除了删除任何一套都会破坏一切。

我知道标题不是很具描述性，但我没有足够的信息来做很多事情。当我知道该怎么称呼它时会编辑。

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），该模块公开了许多公共方法（此处为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');
    });
});

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

Answer 2

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

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

return函数中的missileCommand语句确保与var myCommands = missileCommand()函数一致时返回包含initialize函数和{{1}值的对象功能。

Answer 3

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

返回的对象只是通过返回它们来公开这两个函数，以允许将它们称为：

function setupListeners()

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

寻求结构解释（揭示模块模式）

3 个答案: