javascript - sea.js使用require函数在click事件中加载模块为什么预先下载？-PHP中文网问答

问题如下代码

`
    //a.js
        define(function(require, exports, module){
         console.log('a.js执行');
             return {
                  hello: function(){
                       console.log('hello, a.js');
                  }
             }
        });
    //b.js
    define(function(require, exports, module){
         console.log('b.js执行');
         return {
              hello: function(){
                   console.log('hello, b.js');
              }
         }
    });
    //main.js
    define(function(require, exports, module){
         console.log('main.js执行');
         var a = require('a');
         a.hello();    
         $('#b').click(function(){
              var b = require('b');
              b.hello();
         });
    
    });
    `

我看原作者是这么说的(中括号中的内容)：

【定义模块时无需罗列依赖数组，在factory函数中需传入形参require,exports,module，然后它会调用factory函数的toString方法，对函数的内容进行正则匹配，通过匹配到的require语句来分析依赖，这样就真正实现了commonjs风格的代码。
上面的main.js执行会输出如下：
main.js执行
a.js执行
hello, a.js
a.js和b.js都会预先下载，但是b.js中的代码却没有执行，因为还没有点击按钮。当点击按钮的时候，会输出如下：
b.js执行
hello, b.js
可以看到b.js中的代码此时才执行。这样就真正实现了“就近书写，延迟执行“，不可谓不优雅。】

我不是很理解里面为什么b.js会预先下载，按照代码意思不是点击后才开始require('b')吗？请大神解答一下。。另外如果需要看原文的话点击这个链接原文链接

// Execute a module Module.prototype.exec = function () { var mod = this //此处省略... // Exec factory var factory = mod.factory var exports = isFunction(factory) ? factory.call(mod.exports = {}, require, mod.exports, mod) : factory if (exports === undefined) { exports = mod.exports } //此处省略... return mod.exports }

全部回复(4)

PHPz2017-04-11 12:01:16 4楼

赞 +0

添加回复

天蓬老师2017-04-11 12:01:16 3楼

你想问变量提升了？

高洛峰2017-04-11 12:01:16 2楼

我自己联系到了作者，最终揭开了谜团，由于在知乎回答过了，所以想解惑的点开去看看吧传送门

阿神2017-04-11 12:01:16 1楼

seajs 的加载机制也是使用的往DOM里面插入<script>标签的办法。在遍历文件require的时候，就会使用加载机制进行加载。这种往DOM里面插标签的方式，会使得被加载好的js文件立即执行（包括模块的define方法）。这就是预加载。
而define中的模块体，其实就是个function，seajs通过下面的代码来进行调用执行模块体，所以就可以懒执行。