在Browserify全局JS函数中使用jQuery的问题及优化咨询

1. 确保jQuery暴露到全局作用域 #

如果你的Bundle是通过打包工具（如Webpack/Rollup）构建的，默认jQuery会被封装在模块作用域内，无法被外部或Bundle内document.ready外的代码访问。你需要手动将jQuery挂载到window对象：

// 在Bundle入口文件中引入并挂载jQuery
import $ from 'jquery';
// 将jQuery和$绑定到全局window
window.jQuery = window.$ = $;

这样不管是document.ready内部还是外部的代码，都能直接使用$或jQuery调用库方法。

2. 正确定义全局可访问的fmlead函数 #

不能把window.fmlead放在document.ready内定义——因为页面中的调用（如index.html:7处的代码）会在DOM就绪前执行，此时函数还未被定义，必然抛出ReferenceError。

正确的做法是直接在Bundle的顶层作用域定义全局函数，同时如果函数内部依赖DOM就绪，可在函数内部嵌套$(document).ready()：

// 直接在顶层定义全局函数
window.fmlead = function() {
  // 若逻辑依赖DOM就绪，在此处嵌套ready回调
  $(document).ready(function() {
    // 这里写需要操作DOM的jQuery代码
    $('.target-element').hide();
  });

  // 非DOM依赖的逻辑可直接写在这里
  console.log('fmlead函数执行');
};

这样页面加载完成后，fmlead就会被挂载到window上，随时可以被调用；而内部的DOM操作会等待页面DOM就绪后执行。

3. 可选：避免全局污染的折中方案 #

如果不想完全暴露$到全局，可将jQuery封装在自执行函数中，同时仅暴露必要的全局函数：

(function($) {
  // 这里的$就是jQuery，仅在自执行函数内部可用
  $(document).ready(function() {
    // ready内的逻辑正常执行
  });

  // 仅暴露fmlead到全局
  window.fmlead = function() {
    $(document).ready(function() {
      // 函数内的DOM操作
    });
  };
})(window.jQuery = require('jquery'));

这种方式既保证了Bundle内可以正常使用jQuery，又不会污染全局作用域过多，同时fmlead依然能被外部调用。

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