30分钟 带你浅入requirejs源码

由于最近项目想现实一个单页功能，用的是react ，而后看了一下react route，挖槽 gzip后16k？ 而后我简单写了一个纯单页(不支持多页的单页，全部入口都通过rewrite跑到index.html) 才200多行(后续放github)。

而后项目是用webpack打包的， 发现webpack的 require.ensure不支持变量加载的（至少暂时没发现）， 就是意味着我有多小页面，就得在main(入口里配多小页面的关系)  这样挫，领导会喷个人。

而后我今天早上起来，想看看requirejs是如何现实的

 

好前戏完毕 直入主题，你们都知道requrejs 有一个data-main 配置 ， 顾名思义就是 入口 相似c，java的main函数

 

main.js

require.config({
    paths: {
        'xm': 'xm',
        'adb': 'db'
    },
    waitSeconds: 50
})

requirejs(['xm', 'adb'], function(xm, db) {
    console.log(xm, 'main');

    db.db();

});

 

而后定义了2个文件 ，分别是xm.js 和db.js

//xm.js
define([], function() {
    return {
        name: 'xm',
        age: 22
    }
});

//db.js
define(['xm'], function(xm){

    return {
        db: function(){
            var who = xm.name;

            console.log(who, ' play');
        }
    }

})

 

首先，咱们把代码叠起来， 一览众山小

能够看到，其实requirejs 很简单， 只有3个api（按个人理解， 有错请指正）

一、requirejs， 引入定义的模块，并执行callback的代码
二、require，只引入，不执行
三、define，定义一个模块

而后具体看实现的地方

前面1000多行都是 内部调用的 function的实现，例如判断函数啊， 是否数组啊，遍历，反向遍历  etc.. ，太细节 就很少说了

 

着重看看后面的req变量的实现， 原本想加些标注的， 可是发现 每行都是重点， 正如小时候老师让咱们画重点，常常半页书都画上， 不如不画了  囧。

 

一、这里requirejs 就是上面说到的1的实现
二、config其实就是一系列的配置，例如base路径，path(配短名字)， urlArgs(问号后加时间戳之类的),shim(没有用define声明的模块，全局注入)   etc..
三、nextTick 其实就是一个定时器， 按你代码 加入的模块，逐个依次 建立script标签 引入到页面
四、而后 引入require的时候，他会默认加了一个版本，默认初始化(注意这行 req({}) )， 默认错误提示等等
五、define函数的实现

 

好，有了上面已经知道require大概有些什么了， 而后来一块儿看看某几个重要的细节点。
首先代码里先看看data-main这个关键词 ，其实就是遍历全部的TagName为script的，找到data-main， 而后处理了一下路径

而后最后一行，其实才是真正的main入口初始化

 
而后第一次require会根据配了的data-main 如下列处理后，经过req.load 自动引入main.js 

 

第一次自动调用requirejs 内容基本都是默认值，没啥好看的，  来 一块儿看看咱们main.js 里主动调用的requrejs、

而后 继续跟下去  发现最后调用了Module的有个each，而后是会调用本身的fetch，load进行一个一个按顺序像main加载步骤同样 加载

 

 

 

由于时间缘由，有些太细的点就不深刻一一步析  但愿此文对初了解requirejs的同窗有所帮助，谢谢观看完毕。