具体代码如下：
我要评论
// 第一步: 在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中，定义了模块定义的方法define,
取得script标签上的data-main属性的值。
并使用require函数加载到页面中。
而在main.js中,require函数可能加载了多个模块。
当所有的模块都加载完毕后，调用callback函数。
// 这是简易的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
至此，就完成了一个简单的requirejs。
还有许多需要优化，比如:
自动识别main.js js模块的异步加载，这里的实现是按照顺序加载的js。 模块之间的依赖关系。比如modulea依赖moduleb
如对本文有疑问， 点击进行留言回复！！
网友评论