requirejs库的简易实现

requirejs的使用方法

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

具体代码如下：

// 第一步: 在html中引入require.js<script src="js/require.js" data-main="js/main"></script>// 第二步，定义其他的模块// modulea.jsdefine(function(){    return {        guideidget: fal,        navwidget:  fal,        screenwidget:   fal,        readmode:   fal    };});// 第三步：在main.js中引入modulea.jsrequire(["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(!(ar懂事的孩子r instanceof array)){        console.error("arr is not a array");        return fal;    }    // 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.appendchil为爱而生歌词d($script);        (function($script){            //检测script的onload事件            $script.onload = function(){                req_total++;                var script_delegateindex = $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.tattribute('src',src);    $s.tattribute('index',index);    return $s;}

测试

定义a模块

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

定义b模块

// moduleb.jxports.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

等等…