$(document).ready()两种写法差异：为何传入命名函数后失效？

你遇到的问题核心是语法错误，以及对两种写法的执行逻辑理解有偏差：

先看两种写法的细节 #

能正常运行的写法（你贴的代码不全） #

你贴的第一个代码里，在$(document).ready()的匿名函数内部定义了displayRows()，但要让它生效，你肯定在实际代码里调用了这个函数（比如加了displayRows();），完整的可运行代码应该是这样：

$(document).ready(function() {
  function displayRows(){
    var catRow = $('<tr class="category-row">'
    + '<th>'
    + '...........'
    + '</th>'                                                         
    + '</tr>');
    $('#cat tbody').append(catRow);
  }
  displayRows(); // 必须调用才会执行函数逻辑
});

无法生效的写法（语法错误） #

你贴的第二个代码里，最后多写了一个闭合大括号}，导致JavaScript引擎解析失败，代码直接报错终止：

// 错误写法：最后多了一个}
$(document).ready(
  function displayRows(){
    var catRow = $('<tr class="category-row">'
    + '<th>'
    + '...........'
    + '</th>'                                                         
    + '</tr>');
    $('#cat tbody').append(catRow);
  }
}); // 这里的});应该是);

修正后的正确写法 #

如果把语法错误修正，直接传入命名函数给$(document).ready()是完全可以正常运行的，写法如下：

$(document).ready(function displayRows(){
  var catRow = $('<tr class="category-row">'
  + '<th>'
  + '...........'
  + '</th>'                                                         
  + '</tr>');
  $('#cat tbody').append(catRow);
});

这种写法里，displayRows作为ready的回调函数，会在DOM加载完成后自动执行，不需要额外调用。

总结 #

1. 你第一个写法能生效，是因为在匿名函数内部定义并调用了displayRows()；
2. 第二个写法失效的直接原因是多了一个大括号，导致语法错误；
3. 修正语法后，直接传命名函数给ready()是完全可行的，和匿名函数写法效果一致。

内容的提问来源于stack exchange，提问作者userV