JavaScript 中函数表达式在动态脚本加载中的应用策略

函数表达式在动态脚本加载中用于延迟执行、避免全局污染、封装依赖及配合异步机制安全调用；需监听load事件或用Promise封装加载过程，再调用函数表达式；推荐使用const/let声明函数表达式防止变量提升陷阱。

函数表达式在动态脚本加载中主要用于延迟执行、避免污染全局作用域、封装依赖逻辑，以及配合 Promise 或回调完成异步加载后的安全调用。

确保脚本加载完成后再执行函数

动态插入的脚本默认异步加载，无法保证立即可执行。应监听 load 事件或使用 Promise 封装加载过程，再调用函数表达式：

• 用 script.onload 触发函数表达式，避免在脚本未就绪时调用未定义函数
• 把业务逻辑封装为具名或匿名函数表达式，在加载回调中调用，不提前暴露到全局
• 示例：加载完 lodash.js 后执行 const init = () => _.throttle(...); init();

用 IIFE 隔离作用域与依赖检查

脚本加载后可能需校验是否成功注入（如第三方库是否挂载到 window），此时可用立即执行函数表达式（IIFE）进行轻量级检测和初始化：

• (function() { if (typeof $ !== 'undefined') { /* jQuery 已就绪 */ } })();
• 避免重复执行，可在 IIFE 内部设置标志位（如 window._loaded_jquery = true）
• 适合多脚本并行加载场景，每个脚本加载后各自运行独立的检查逻辑

结合 Promise 实现链式加载与错误处理

将函数表达式作为 then 的参数，使加载流程更可控：

立即学习“Java免费学习笔记（深入）”；

• 封装 loadScript(src) 返回 Promise，成功 resolve 后传入函数表达式处理结果
• 利用 catch 捕获加载失败，并执行降级函数（如加载 CDN 备份或启用本地 polyfill）
• 多个脚本可 Promise.all([loadScript(a), loadScript(b)]).then(([a, b]) => { /* 组合函数表达式 */ })

避免变量提升陷阱，优先使用 const/let 声明函数表达式

函数声明会被提升，而函数表达式不会——这对动态加载很关键：

• 若写 const myUtil = function() { ... };，则必须等脚本加载完成、代码执行后才存在，符合预期
• 不要混用函数声明（function myUtil() {}）在动态 script 中，容易因提升导致未定义行为
• ES6 箭头函数也可作为表达式使用，但注意 this 绑定差异，适合无上下文依赖的工具函数