JavaScript开发定时弹窗提醒扩展时遇到inRange未定义报错的排查求助

• 核心认知：inRange并非JavaScript原生内置的全局方法，其他项目里能正常运行，是因为那些项目引入了对应实现（比如Lodash工具库、项目内自定义的公共工具函数），当前项目未完成对应引入才会触发未定义报错。
• 结合浏览器扩展的开发特性，常见的触发原因有三类：
  • 作用域隔离问题：浏览器扩展会对content script、service worker、popup页面的脚本做独立作用域隔离，如果inRange的定义写在某类上下文的脚本里，却在另一类上下文的脚本中调用，跨作用域无法访问对应定义，就会触发报错。
  • 脚本加载顺序问题：如果引入了带inRange实现的第三方依赖，但没有在manifest.json的配置里把依赖脚本排在调用它的业务脚本之前，执行到调用语句时方法还未完成定义，同样会抛出未定义错误。
  • 代码迁移遗漏：从其他项目复用代码时，只拷贝了inRange的调用逻辑，没有把方法本身的实现拷贝到当前项目的对应作用域下。
• 可落地的解决方式：
  • 如果是依赖Lodash的inRange能力：正确完成库引入后，调用时需要带上Lodash的命名空间，即把判断语句改为if (_.inRange(currentTime,11.18,11.20))，避免因为漏写命名空间导致识别不到方法。
  • 如果是自定义实现的inRange方法：直接把方法定义补到当前调用代码的同作用域下即可，参考实现为：

    function inRange(value, min, max) {
      return value >= Math.min(min, max) && value <= Math.max(min, max)
    }
    

• 额外优化提示：当前代码计算currentTime的方式存在浮点数精度隐患，按“小时 + 0.01*分钟”的拼接方式很容易出现区间判断偏差，更稳妥的做法是把时间换算成总分钟数做判断，比如计算currentTotalMinute = currentHour * 60 + currentMinute，对应判断区间改为inRange(currentTotalMinute, 11*60+18, 11*60+20)，即可避免小数计算带来的判断错误。

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