Require.js库加载顺序问题：SPA商品页中_.filter报错排查

Hey，我之前开发RequireJS项目时也碰到过一模一样的问题，这个错误基本都是Underscore没正确加载，或者被其他库覆盖了全局的_变量导致的，给你几个实用的排查和解决方向：

1. 先检查RequireJS的配置是不是对的 #

Underscore早期版本不是AMD兼容的，所以得在RequireJS的配置里用shim来导出它的全局变量。你看看你的配置文件是不是这样写的：

require.config({
  paths: {
    'underscore': 'libs/underscore' // 这里要指向你项目里underscore.js的实际路径
  },
  shim: {
    'underscore': {
      exports: '_' // 确保把Underscore导出为全局的_
    }
  }
});

如果是新版本的Underscore（1.7及以上），本身支持AMD，但还是要确认路径没写错，别指向了空文件或者错误的位置。

2. 检查ViewModel里的依赖引入是否正确 #

看你的Sidebar ViewModel的define依赖数组里已经加了underscore，那一定要在回调函数里正确接收它，比如：

define(['jquery', 'underscore', 'knockout', 'core/get_product_list', 'core/read_set_data', 'text!view-model/sid...'], 
function($, _, ko, getProductList, readSetData, sidebarTemplate) {
  // 这里必须用回调里的_来调用filter，不能直接用全局的_（万一被覆盖了呢）
  var filteredProducts = _.filter(productList, function(product) {
    // 你的价格筛选逻辑
  });
});

要是你回调函数里把Underscore的参数写成了别的名字，或者漏了这个参数，那_就不是Underscore对象，自然找不到filter方法。

3. 排查是不是有其他库覆盖了_变量 #

比如jQuery有时候也会用_做临时变量，或者其他第三方库不小心占用了这个变量名。这时候可以换个方式引用Underscore：

• 要么用noConflict方法把Underscore的控制权拿回来：

  define(['underscore'], function(_) {
    var underscore = _.noConflict(); // 把Underscore存到underscore变量，归还_给其他库
    // 之后用underscore.filter来调用方法
    var filtered = underscore.filter(productList, function(p) {
      return p.price >= minPrice() && p.price <= maxPrice();
    });
  });
  

• 要么干脆在回调函数里不用_当参数名，换成underscore，从根源避免冲突：

  define(['jquery', 'underscore', 'knockout', ...], function($, underscore, ko, ...) {
    underscore.filter(...);
  });
  

4. 确认Underscore版本没问题 #

虽然_.filter是Underscore的核心方法，几乎所有版本都支持，但万一你用了特别古老的版本（比如0.5之前），可能会有差异。建议升级到最新的稳定版，确保方法存在。

5. 加个调试日志快速定位问题 #

在出现错误的那行代码前面加个console.log(_)，看看输出的是什么：

console.log(_); // 如果输出undefined、jQuery对象或者其他奇怪的东西，就说明Underscore没加载或者被覆盖了

这招能帮你快速定位到底是加载问题还是变量冲突问题。

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