intl-tel-input 项目中 isValidNumber 方法的正确使用方式

问题背景

intl-tel-input 是一个流行的国际电话号码输入库，它提供了电话号码格式验证和格式化功能。在最新版本 22.0.2 中，开发者发现当 utils.js 脚本以预加载方式引入时，isValidNumber 方法会返回 null，而不是预期的 true 或 false。

问题分析

在 intl-tel-input 20.3.0 版本中，无论 utils.js 是预加载还是懒加载，isValidNumber 方法都能正常工作。但在 22.0.2 版本中，该方法会检查 intlTelInput.utils 属性是否定义，如果未定义则返回 null。

这种变化导致了一些使用预加载方式的开发者遇到问题。预加载方式通常是将 utils.js 通过 script 标签直接放在页面头部加载，而不是使用库提供的 utilsScript 初始化选项进行懒加载。

解决方案

针对这个问题，项目维护者提供了几种解决方案：

1. 同时使用预加载和懒加载：保留预加载的 script 标签，同时在初始化时也配置 utilsScript 选项，指向相同的 URL。这样库会重用已缓存的脚本。

2. 手动挂载工具函数：在预加载 utils.js 后，手动将工具函数挂载到库对象上：

   intlTelInput.utils = window.intlTelInputUtils;
   

性能考量

在选择预加载还是懒加载时，需要考虑以下因素：

• 预加载：适合 utils.js 被多个页面共享且被打包到公共 bundle 中的场景。优点是缓存利用率高，缺点是会阻塞页面加载（因为 utils.js 大小超过 200KB）。

• 懒加载：适合单页面应用或 utils.js 使用频率不高的场景。优点是减少初始加载时间，缺点是可能需要额外的网络请求（除非浏览器缓存有效）。

最佳实践建议

1. 如果项目对首屏加载时间敏感，建议使用懒加载方式。

2. 如果项目已经将 utils.js 打包到公共 bundle 中，可以采用预加载+手动挂载的方式。

3. 对于多页面应用，确保懒加载的 utils.js 能被浏览器有效缓存，避免重复下载。

总结

intl-tel-input 库在 22.0.2 版本中对工具脚本的加载方式做了更严格的检查，这要求开发者根据实际场景选择合适的加载策略。理解不同加载方式的优缺点，可以帮助开发者做出更合理的架构决策，平衡性能和功能需求。