requireJs 原理探究以及demo实现

写在前面：

大家在开发中，天天在使用requireJs，对于require的核心原理，以及如何实现一个简单的require肯定有所了解，我们今天就聊聊require 。

在require中，根据AMD(Asynchronous Module Definition)的思想，即异步模块加载机制，其思想就是将代码分为一个一个模块分块加载，来提高代码的重用。

简单流程概括

1. 我们在使用requireJs时，都是在页面上只引入一个require.js，把data-main指向我们的main.js
2. 运行main.js时，执行里面的require和define方法，requireJs会把这些依赖和回调方法都用一个数据结构存起来
3. 当页面加载时，requireJs 会根据依赖预先先把需要的js通过document.createElement的方法引入dom中，这样，被引入dom的script便会执行
4. 依赖的js也是根据requireJs的规范来写的，所以他们也会有define或者require方法，同样类似第二步这样循环向上查找依赖，同样会存起来
5. 当js需要用到依赖返回的结果,requireJs会把保存的方法拿出来并且运行

测试代码

下面是我自己写的requirJs代码的测试

index.html

<script src="./myrequire.js" type="text/javascript"></script>
<script type="text/javascript">
    require(['util', 'math', 'num'], function (util, math, num) {
        num = math.getRadom() + '_' + num;
        num = util.formatNum(num);
        console.log(num);
    });
</script>

util.js

define([], function () {
    return {
        formatNum: function (n) {
        if (n < 10) return '0' + n;
        return n;
        }
    };
});

math.js

define(['num'], function (num) {
  return {
    getRadom: function () {
      return parseInt(Math.random() * num);
    }
  };
});

num.js

define([], function () {
    return 10;
});

这些使用都很简单，关键在研究myRequireJs的实现

开始研究

(function(){
    //将所有的依赖放在这里
    var moduleCache = {};

    var require = function(deps,callback) {
        var params = [];    // 这里放define后面的方法
        var depCount = 0;
        var i, len, isEmpty = false, modName;

        modName = document.currentScript && document.currentScript.id || 'REQUIRE_MAIN';

        if(deps.length) {
            for(i = 0, len = deps.length; i<len; i++) {
                (function(i){
                    depCount++;
                    loadMod(deps[i],function(param) {
                        params[i] = param;
                        depCount--;
                        if(depCount == 0) {
                            saveModule(modName,params,callback);
                        }
                    });
                })(i)
            }
        }else {
            isEmpty = true;
        }

        if(isEmpty) {
            setTimeout(function() {
                saveModule(modName,null,callback);
            }, 0);
        }
    }

    var _getPathUrl = function(modName) {
        var url = modName;
        if(url.indexOf('.js') == -1) url = url + '.js';
        return url;
    };

    var loadMod = function(modName,callback) {
        var url = _getPathUrl(modName), fs, mod;

        if(moduleCache[modName]) {
            mod = moduleCache[modName];
            if(mod.status == 'loaded') {
                setTimeout(callback(this.params), 0);
            } else {
                mod.onload.push(callback);
            }
        }else {
            mod = moduleCache[modName] = {
                modName: modName,
                status: 'loading',
                export: null,
                onload: [callback]
            };

            _script = document.createElement('script');
            _script.id = modName;
            _script.type = 'text/javascript';
            _script.charset = 'utf-8';
            _script.async = true;
            _script.src = url;

            fs = document.getElementsByTagName('script')[0];
            fs.parentNode.insertBefore(_script, fs);
        }
    };

    var saveModule = function(modName, params, callback) {
        var mod, fn;

        if(moduleCache.hasOwnProperty(modName)) {
            mod = moduleCache[modName];
            mod.status = 'loaded';

            mod.export = callback ? callback(params) : null;
            
            while(fn = mod.onload.shift()) {
                fn(mod.export);
            }
        } else {
            callback && callback.apply(window,params);
        }
    };

    window.require = require;
    window.define = require;

})(); 

代码流程分析

image.png

注： 这里的require 和 define 都用的同一个通用方法，都是通过里面 依赖参数判断，执行同样的类似方法来实现这个效果