requirejs库的简易实现

requirejs的使用方法

在页面中引入requirejs 定义其他的模块 在main.js中引入其他的js模块

具体代码如下：

// 第一步: 在html中引入require.js
<script src="js/require.js" data-main="js/main"></script>

// 第二步，定义其他的模块
// modulea.js
define(function(){
    return {
        guideidget: false,
        navwidget:  false,
        screenwidget:   false,
        readmode:   false
    };
});

// 第三步：在main.js中引入modulea.js

require(["modulea"],function(modulea){
    console.log(modulea.guideidget);
});

猜测requirejs的实现步骤

在页面中引入requirejs,并指定main.js的路径。 requirejs分析main.js的配置及模块引入

分析如下：

requirejs中，定义了模块定义的方法define,
取得script标签上的data-main属性的值。
并使用require函数加载到页面中。
而在main.js中,require函数可能加载了多个模块。
当所有的模块都加载完毕后，调用callback函数。

实现require函数

// 这是简易的require.js

/**
 * @descrition 实现js的加载
 * @param arr  js的路径数组
 * @param callback 当所有的js都加载完后的回调函数
 * @date 2018-09-13
 * @author yike
*/
// 导出方法的简陋实现
window.exports = {};

function require(arr,callback){
    if(!(arr instanceof array)){
        console.error("arr is not a array");
        return false;
    }

    // req_total  标记已加载成功个数
    // exp_arr    记录各个模块的顺序
    // reqlen     定义共需要加载多少个js
    var req_total = 0,
        exp_arr = [],
        reqlen = arr.length;

        console.log(arr);

    arr.foreach(function(req_item,index,arr){
        // 创建script的标签并放到页面中
        var $script = createscript(req_item,index);
        document.body.appendchild($script);

        (function($script){
            //检测script的onload事件
            $script.onload = function(){
                req_total++;
                var script_index = $script.getattribute('index');
                // 把导出对象放到数组中
                exp_arr[script_index] = exports;
                // 重置对象
                window.exports = {};

                //所有js加载成功后，执行callback函数。
                if (req_total == reqlen) {
                    callback && callback.apply(exports, exp_arr);
                }
            }
        })($script);
    })
}

//创建一个script标签
function createscript(src, index){
    var $s = document.createelement('script');
    $s.setattribute('src',src);
    $s.setattribute('index',index);
    return $s;
}

测试

定义a模块

// modulea.js

exports.define = {
  name: 'modulea',
  desc: 'this is other way to define ',
  sayhello: function() {
    console.log(this.name  + " : " +  this.desc);
  }
}

定义b模块

// moduleb.js

exports.define = {
  name: 'moduleb',
  desc: 'this is other way to define ',
  sayworld: function() {
    console.log(this.name + " : " + this.desc);
  }
}

在页面中引入刚才写的require.js

<script src="require.js"></script><script src="main.js"></script>

至此，就完成了一个简单的requirejs。

还有许多需要优化，比如:

自动识别main.js js模块的异步加载，这里的实现是按照顺序加载的js。 模块之间的依赖关系。比如modulea依赖moduleb
等等…