为何移除custom.min.js的$(function(){...})后initLoadMore函数才生效？

这个问题本质是JavaScript的作用域规则在作祟，我给你掰扯清楚：

核心原因：函数的作用域被锁死了 #

当你把initLoadMore函数放在$(function(){...})（也就是jQuery的DOM就绪回调函数）内部时，这个函数就变成了该回调函数的局部函数——它的作用域被牢牢限制在这个回调函数里，外部的任何代码（包括你页面里另一个独立的$(function(){...})回调）都没法访问到它。

而当你去掉外层的$(function(){...})包裹时，initLoadMore就直接被定义在了全局作用域（也就是挂载到浏览器的window对象上），这时候页面里的DOM就绪回调就能轻松找到这个全局函数了。

不用硬删外层包裹的解决方案 #

你没必要非得去掉DOM就绪的包裹（毕竟很多时候我们需要等DOM加载完再初始化逻辑），可以用这几种更合理的方式解决：

1. 把函数暴露到全局作用域 #

在回调函数内部，把initLoadMore赋值给window对象，让它变成全局可访问的函数：

$(function(){
  function initLoadMore(){
    // 你的加载更多逻辑
  }
  // 暴露到全局，让外部能访问
  window.initLoadMore = initLoadMore;
});

这样页面里的$(function(){ initLoadMore(); })就能正常调用了。

2. 把调用逻辑移到同作用域内 #

如果页面里调用initLoadMore的代码不需要和其他逻辑分离，可以直接把调用代码放到custom.min.js的那个$(function(){...})里面：

$(function(){
  function initLoadMore(){
    // 你的加载更多逻辑
  }
  // 直接在这里调用，同作用域无需跨域访问
  initLoadMore();
});

这样就完全不存在跨作用域访问的问题了。

3. 用模块化方案（适合现代项目） #

如果你的项目支持ES6模块化或者CommonJS，可以把initLoadMore封装成模块导出，然后在页面代码里导入使用：

// custom.js 里导出函数
export function initLoadMore(){
  // 你的逻辑
}

// 页面代码里导入并调用
import { initLoadMore } from './custom.js';
$(function(){
  initLoadMore();
});

这种方式更规范，还能避免全局作用域被污染。

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