一次痛苦的seajs查“错”经历

关于Seajs这里无需多讲，作为一个前端开发或多或少都是听过它的大名。

最近接手一个项目，模块编写使用CMD规范，加载使用Seajs。OK，暂时也不太好更改这种模式，那就遵循现有的规范来写代码吧。

但是在查看页面加载的文件列表时，我瞬间一脸懵逼，为啥呢？多出来几个“不速之客”！如下图

截图1

好吧，这么说，可能大家还是一脸懵逼，六神无主，我们来看看具体的代码

    function getData() {
        //执行获取数据前需要加载2个依赖的模块
        var $u = require('WebTools'),
            $ = require('jquery');
    }

一眼看上去简直是非常理想的模块按需加载的思路，getData函数的执行需要依赖于WebTools和jquery这2个模块，但是在它执行之前是不需要加载这2位大爷的，因此，我们在这个函数内部采取希望引入相应的模块。一切设想都是美好的，这里同样如此。

然后，代码运行，在getData还未执行时，我“惊喜”地发现，模块居然被引入了。发现这个问题以后，我在seajs的全局配置文件中，看是否这2个模块走了“快速”通道被预加载了，然后，配置文件如下：

    preload: ['jquery','commonTemplate','WebTools']

哦，原来是在这里设置了模块预加载啊，问题的症结原来是出在这里？于是，我把这句配置代码注释掉，刷新页面，尼玛...那几个模块文件还是被加载了。

难道是缓存？不说了，我要清缓存了，清完缓存，刷新页面，模块还是被引用了！！！啥也不说了，让我哭会儿先。这个时候看来没什么招了，那就去seajs的官方文档上瞅瞅去。

从文档上，链接到了<a href="http://www.zhangxinxu.com/sp/seajs/docs/rules.html" target="_blank">[张老师的博客]，我直接把关键的信息贴到下面

这里写图片描述

从这上面的说明，告诉我们，模块的加载实现不是运行时的，seajs会解析js静态文本，提取require的模块对应的文件并将它们加载到页面上。而且，不管这个require代码是否执行，都不影响它的加载。ps.让seajs做一个固执的美男子。

为了验证这段话的真实性，于是我注释掉没有执行的require代码，这些模块果然没有被加载，看来真是这个原因，原来我们一直以为的按需加载都是自己误解下的“按需加载”。

那么，我们想在这里按需加载，代码不执行时不加载相应的模块，就得使用上面提到的

    require.asyc('./a.js',function(a){
        //a是加载成功的模块输出
    })

经过这个“痛苦”迷惑的过程，终于把问题搞清楚了。其实归根结底还是由于自己在使用一个框架之前没有非常深入地去了解它的机制，没有了解透彻的第三方库或者框架对于我们的项目而言无异于酣睡的猛虎/定时的炸弹。切忌人与亦云，自勉！

----前端C罗