JS模块化简单实现

Biegral 2019/1/27 0:31:13 5967

曾经花了一段时间去看RequireJS源码，虽然就两千行左右的代码，但原谅我的愚笨，真的有点看不懂。想想，还是自己实现一个再说。

简单目标

实现类似requireJS的功能，涉及到的功能

// 定义模块，三个参数
define(id, deps, factory)

// 执行模块，两个参数
require(deps, factory)

简单分析

先上一个简单的例子，进行分析：

require(['main'], function(main) {
    console.log('start~~~');
    main.hello();
});
  1. 过程分析

通过deps参数，很容易知道该文件依赖的脚本是main.js，然后去加载依赖的脚本，加载完之后执行一遍并且将执行的结果作为回调函数factory的参数，然后执行该匿名的回调函数即可。

  1. 问题分析

    1. 如何加载脚本

      这个比较容易想到两个方式，一种用ajax请求，另一种用Dom元素添加让浏览器加载；由于ajax请求会有跨域问题，我们采用Dom加载的方式。

    2. 如何判断模块加载完毕

      曾经我想用script的onload事件来判断对应的模块加载，但问题在于onload只是说明了脚本已经加载，但是并没有执行。调整一下思路，定义模块的状态，在加载的时候，将状态标为加载中；记录模块的依赖数，当该模块的所有依赖全部加载完成，将执行回调函数作为该模块的对应输出，模块加载完成。

    3. 如何暂存和执行回调函数

      比如上面这个简单的例子，将回调函数作为模块main加载完毕后的回调函数即可；若依赖的模块有多个，每个依赖加载完后进行就判断依赖是否加载完毕，是就执行回调。注意，此时也意味着当前模块加载完毕，可以执行返回结果了。

    4. 循环依赖问题

      这么难的问题，留到后面再说吧！

  2. 数据结构

    首先需要一个全部的模块缓存对象，记录所有已经加载的&正在加载的模块；将模块的数据结构设计成如下：

    module[name] = {
    status: String,   // 记录模块的加载状态'loading' or 'loaded'
    export: Object  , // 记录该模块的输出结果
    onload: Arrray[function]    // 记录模块加载完成后的回调函数
}

简单实现

小女不才，实现主要参考了叶小钗博客的实现，读懂了他/她（不确定性别）的实现之后，自己实现了一遍。

// 利用闭包创建局部作用域
(function(){

    // 缓存所有的模块
    var moduleMap = {};
    //主要函数定义
    function define(id, deps, factory){ 
        var name;

        //存该模块对应的参数，即factory的参数
        var params = [];

        if(typeof id == "object" ){ // 对应require(deps, factory)情况
            factory = deps;
            deps = id;
        }
        else{                       // 对应deine(id，deps, factory)和require(id)情况
            name = id; 
        }
        // 记录模块的依赖数
        var depCount = deps && deps.length;
        // 如果没有依赖，直接保存或执行模块
        if( !depCount ||  depCount == 0){
            return saveModule(name, null ,factory)
        }
        else{
            deps.forEach(function(dep, i){
                // 用闭包解决经典的问题
                (function(i){
                    // 加载依赖的模块，加载完之后的回调函数
                    loadScript(dep, function(param){
                        // 加载一个，计数器减一
                        depCount--;
                        params[i] = param;
                        //将计数器为0，说明依赖加载完毕，可以保存或执行当前的模块
                        if(depCount==0){
                            return saveModule(name, params, factory);
                        }
                    })
                }(i))
            })
        }
    }

    function getURL(name){
        if( name.indexOf('.js') < 0){
            return name + '.js';
        }

        return name;
    }

    function loadScript(name, callback){
        var mod = moduleMap[name];

        if( mod ){
            // 如果加载完毕，直接执行回调
            if( mod.status == 'loaded' ){
                callback & callback(mod.export);
            }
            else{ // 正在加载，将回掉函数存起来
                mod.onload.push(callback);
            }
        }
        else{
            // 若该模块从没加载过，定义并且利用Dom加载
            moduleMap[name] = {
                status: 'loading',
                export: null,
                onload: [callback]
            }

            var url = getURL(name);

            var el = document.createElement('script');
            el.src = url;
            el.id = name;
            document.body.appendChild(el);
        }

    }

    // 保存或者执行模块
    function saveModule(name, params, callback){
        var mod = moduleMap[name];
        if( mod ){
            //设置状态为完成加载
            mod.status = 'loaded';  

            //执行模块的函数，将结果存在export中 
            mod.export = callback && callback.apply(this, params); 

            // 执行上一级模块的回调函数
            while( fn = mod.onload.pop() ){
                fn && fn(mod.export);
            }
        }
        else{
            //若该模块未定义，直接执行返回结果，对应require(deps, factory)的情况
            callback.apply(this, params)
        }
    }

    // 将局部变量暴露出去
    window.define = define;
    window.require = define;

})()

测试分析

上个简单的例子，源码Demo点击这里。

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> requireJS Demo -- my version </title>
</head>
<body>

<script src="./myRequire.js"></script> 
<script src="./index.js"></script> 
</body>
</html>

// index.js
require(['main'], function(main) {
    console.log('start~~~');
    main.hello();
});

// main.js 
define('main', [], function() { 
    console.log('require module: main'); 
    return {
        hello: function() {
            console.log('hello main');
        }
    };
}); 

// myRequire.js
// 见上一部分

下面我们来对照着分析一下执行过程，帮助理解。

  1. 入口函数require，此时name为空， depCount为1；发现依赖main，执行loadScript函数

  2. 由于moduleMap['main']未定义，定义它，并且创建Dom元素去加载main.js。此时定义如下：

    moduleMap['main'] = {
    status: 'loading',
    export: null,
    onload:[function(param){
        // depCount = 1
        depCount--;
        params[i] = param;
        //将计数器为0，说明依赖加载完毕，可以保存或执行当前的模块
        if(depCount==0){
            return saveModule('', params, factory);
        }
    }] 
}

  3. main.js加载完毕之后，执行里面的函数define('main'...).

  4. 由于该函数没有依赖，直接进入saveModule('main'...)

  5. 因为moduleMap['main']已经被定义，将状态改为loaded，执行它的回调函数，并赋值给export属性

    // 回调函数
function() { 
    console.log('require module: main'); 
    return {
        hello: function() {
            console.log('hello main');
        }
    };
}

  6. 控制台输出'require module: main'，此时的moduleMap['main']变成：

    moduleMap['main'] = {
    status: 'loaded',
    export: {
        hello: function() {
            console.log('hello main');
        }
    },
    onload:[function(param){
        // 加载一个，计数器减一
        depCount--;
        params[i] = param;
        //将计数器为0，说明依赖加载完毕，可以保存或执行当前的模块
        if(depCount==0){
            return saveModule('', params, factory);
        }
    }] 
}

  7. 执行上一级模块的回调函数moduleMap['main'].onload，将moduleMap['main'].export作为参数

  8. 此时params变成[moduleMap['main'].export]，depCount刚开始为1，现在为0，正好执行上一级模块的saveModule('', params, factory)

  9. 由于moduleMap['']未定义，直接执行回调函数，即：

    function(main) {
    console.log('start~~~');
    main.hello();
}

/* 其中 main =  {
    hello: function() {
        console.log('hello main');
    }
}*/

10.控制台输出'start~~~'，以及'hello main'。

运行到此结束。

遗留问题

很遗憾，这个实现并没解决循环依赖问题。我也看过ES6和CommonJS对循环依赖的处理，ES6使用的是引用的方式，所以不存在问题；CommonJS是只执行已经定义的部分。

幸运的是，这个实现如果有循环依赖，程序要因为不满足条件而终止执行，不会进行无数次的循环而导致崩溃。

参考资料：

本文转载:CSDN博客

阅读排行

分类

归档