Question

这是我要理解的代码行。

    var UIController = (function(){

       var domItems = {

          questInsertBtn: document.getElementById('question-insert-btn')

       };

   return{
      getDomItems: domItems
   }
})();

以上行与

相同吗

 questInsertBtn =  document.getElementById('question-insert-btn');

Answer 1

他们做的事情截然不同。

共同点：它们都尝试解析表达式document.getElementById('question-insert-btn')。该表达式请求对函数document.getElementById的调用，并且该表达式解析为从调用该函数返回的值。

在这种情况下，该函数使用一个参数（文本字符串'question-insert-btn'）调用。

material查找（在当前HTML文档中）其id属性与该参数匹配的HTML元素，然后返回该元素。这就是将存储在questInsertBtn变量中的内容。

您显示的第一行代码：

questInsertBtn：document.getElementById（'question-insert-btn'）;

很可能不是完整的语句，如果尝试将其作为语句，则会出现错误。

不过，您可能会在语句的一部分中看到这样的一行。请显示整个语句，以便我们知道该行的一部分。

第二行：

questInsertBtn = document.getElementById（'question-insert-btn'）;

如果仅是一条语句，则表示The document.getElementById function。它将questInsertBtn之后右侧表达式中的值分配给名为=的变量。有关表达式的解析方法，请参见上文。

Answer 2

不，他们不一样。在第一种情况下，questInsertBtn是对象的键，并且该键的值为document.getElementById('question-insert-btn');。但是独立 questInsertBtn: document.getElementById('question-insert-btn');没有任何意义

在第二种情况下，questInsertBtn似乎是一个变量，而document.getElementById('question-insert-btn');是分配给该变量的值

Answer 3

我将尽力解释您的代码。首先，您有一个变量（UIController），该变量将存储self-invoking函数返回的值：

var UIController = (function()
{
    ...
})();

其次，self-invoking函数的返回值将是一个对象，该对象具有名为key的唯一getDomItems和一些值。该某个值将是一个由名为key的{{1}}及其值（实际上是方法questInsertBtn的结果）组成的对象：

getElementById('question-insert-btn')

总而言之，所有代码所做的就是使用将具有以下结构的对象初始化变量... var domItems = {questInsertBtn: document.getElementById('question-insert-btn')}; return {getDomItems: domItems}; ...：

UIController

其中var UIController = { "getDomItems": { "questInsertBtn": value } }是函数value的结果。您可以在下一个示例中自行检查它，也许从getElementById('question-insert-btn')进行的调试将比我的解释更好：

console.log()

var UIController = (function()
{
    var domItems = {questInsertBtn: document.getElementById('question-insert-btn')};
    console.log("domItems: ", domItems);
    return {getDomItems: domItems};
})();

console.log("UIController: ", UIController);

我能知道什么吗？

3 个答案: