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

动态加载脚本时，函数表达式是常用的工具之一，它能够延迟执行、避免全局污染、封装依赖逻辑，也能配合 Promise 或回调在异步加载完成后安全调用。简而言之，函数表达式可以确保代码在正确的时间、正确的范围内运行，避免混乱。

了解概念之后，实际应用中需要把握几个关键点。

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

动态插入的 标签默认是异步的，浏览器不会等待其加载完成再继续执行后续代码。如果直接调用脚本中定义的内容，很可能遇到 undefined 的问题。解决方案如下：

• 监听 script.onload 事件，在脚本下载并执行完毕后，再触发函数表达式。这是最直接的方法。
• 将业务逻辑封装为具名或匿名的函数表达式，放在 onload 回调中调用。这样脚本中的内容不会提前暴露到全局作用域，保持了代码的整洁性。
• 例如，加载完 lodash.js 后，可以写成 const init = () => _.throttle(...); init();——只有在脚本完全就绪后，箭头函数才会被调用。

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

有些情况下，脚本加载完成后需要确认其是否成功注入，例如第三方库是否挂载到 window 对象上。此时立即执行函数表达式（IIFE）非常适用——它轻量、自包含，适合做一次性检测和初始化。

• (function() { if (typeof $ !== 'undefined') { /* jQuery 已就绪 */ } })(); 这种写法不会污染全局作用域，同时能快速判断依赖是否加载成功。
• 为了避免重复执行，可以在 IIFE 内部设置一个标志位，例如 window._loaded_jquery = true，下次加载时直接跳过。
• 在多脚本并行加载的场景下，每个脚本加载完毕后各自运行一段独立的检查逻辑，IIFE 是最简便的方案。

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

使用回调嵌套处理多个脚本的加载顺序，代码容易变得混乱。更好的选择是使用 Promise——将函数表达式放入 then 中，整个流程变得更清晰可控。

• 封装一个 loadScript(src) 函数，返回一个 Promise。脚本加载成功时 resolve，失败时 reject，然后在 then 中传入函数表达式处理结果。
• 利用 catch 捕获加载失败的情况，执行降级函数——例如切换 CDN 备份，或启用本地 polyfill。这样即使主源出现故障，功能仍能正常使用。
• 如果需要同时加载多个脚本，使用 Promise.all([loadScript(a), loadScript(b)]) 并行拉取，等待所有脚本就绪后，在 then 中组合函数表达式进行后续处理。这样既提升了效率，也保证了可读性。

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

函数声明会被提升（hoisted），而函数表达式不会——这一差异在动态加载场景中尤为重要。

• 如果使用 const myUtil = function() { ... };，那么 myUtil 只有在脚本加载完成、该行代码执行后才会存在，完全符合动态加载的预期行为。
• 避免在动态 中混用函数声明（例如 function myUtil() {}），因为提升机制会导致其在脚本上下文内提前可用，容易引发未定义行为，增加调试难度。
• ES6 的箭头函数也可以作为表达式使用，但需要注意 this 绑定的差异。对于不依赖上下文的工具函数，箭头函数更加简洁；如果涉及 this 指向，则建议使用普通函数表达式。