我要评论在前文中我们不止一次强调过模块化编程的重要性，以及其可以解决的问题：
① 解决单文件变量命名冲突问题
② 解决前端多人协作问题
③ 解决文件依赖问题
④ 按需加载（这个说法其实很假了）
⑤ ......
为了深入了解加载器，中间阅读过一点requirejs的源码，但对于很多同学来说，对加载器的实现依旧不太清楚
事实上不通过代码实现，单单凭阅读想理解一个库或者框架只能达到一知半解的地步，所以今天便来实现一个简单的加载器
加载器原理分析
分与合
事实上，一个程序运行需要完整的模块，以下代码为例：
//求得绩效系数
var performancecoefficient = function () {
return 0.2;
};
//住房公积金计算方式
var companyreserve = function (salary) {
return salary * 0.2;
};
//个人所得税
var incometax = function (salary) {
return salary * 0.2;
};
//基本工资
var salary = 1000;
//最终工资
var mysalary = salary + salary * performancecoefficient();
mysalary = mysalary - companyreserve(mysalary) - incometax(mysalary - companyreserve(mysalary));
console.log(mysalary);
我一份完整的工资来说，公司会有绩效奖励，但是其算法可能非常复杂，其中可能涉及到出勤率，完成度什么的，这里暂时不管
而有增便有减，所以我们会交住房公积金，也会扣除个人所得税，最终才是我的工资
对于完整的程序来说上面的流程缺一不可，但是各个函数中却有可能异常的复杂，跟钱有关系的东西都复杂，所以单单是公司绩效便有可能超过1000行代码
于是我们这边便会开始分：
<script src="companyreserve.js" type="text/javascript"></script> <script src="incometax.js" type="text/javascript"></script> <script src="performancecoefficient.js" type="text/javascript"></script> <script type="text/javascript"> //基本工资 var salary = 1000; //最终工资 var mysalary = salary + salary * performancecoefficient(); mysalary = mysalary - companyreserve(mysalary) - incometax(mysalary - companyreserve(mysalary)); console.log(mysalary); </script>
上面的代码表明上是“分”开了，事实上也造成了“合”的问题，我要如何才能很好的把它们重新合到一起呢，毕竟其中的文件可能还涉及到依赖，这里便进入我们的require与define
require与define
事实上，上面的方案仍然是以文件划分，而不是以模块划分的，若是文件名发生变化，页面会涉及到改变，其实这里应该有一个路径的映射处理这个问题
var pathcfg = {
'companyreserve': 'companyreserve',
'incometax': 'incometax',
'performancecoefficient': 'performancecoefficient'
};
于是我们一个模块便对应了一个路径js文件，剩下的便是将之对应模块的加载了，因为前端模块涉及到请求。所以这种写法：
companyreserve = requile('companyreserve');
对于前端来说是不适用的，就算你在哪里看到这样做了，也一定是其中做了一些“手脚”，这里我们便需要依据amd规范了：
require.config({
'companyreserve': 'companyreserve',
'incometax': 'incometax',
'performancecoefficient': 'performancecoefficient'
});
require(['companyreserve', 'incometax', 'performancecoefficient'], function (companyreserve, incometax, performancecoefficient) {
//基本工资
var salary = 1000;
//最终工资
var mysalary = salary + salary * performancecoefficient();
mysalary = mysalary - companyreserve(mysalary) - incometax(mysalary - companyreserve(mysalary));
console.log(mysalary);
});
这里便是一个标准的requirejs的写法了，首先定义模块以及其路径映射，其中定义依赖项
require(deparr, callback)
一个简单完整的模块加载器基本就是这个样子了，首先是一个依赖的数组，其次是一个回调，回调要求依赖项全部加载才能运行，并且回调的参数便是依赖项执行的结果，所以一般要求define模块具有一个返回值
方案有了，那么如何实现呢？
实现方案
说到模块加载，人们第一反应都是ajax，因为无论何时，能拿到模块文件的内容，都是模块化的基本，但是采用ajax的方式是不行的，因为ajax有跨域的问题
而模块化方案又不可避免的要处理跨域的问题，所以使用动态创建script标签加载js文件便成为了首选，但是，不使用ajax的方案，对于实现难度来说还是有要求
ps：我们实际工作中还会有加载html模板文件的场景，这个稍候再说
通常我们是这样做的，require作为程序入口，调度javascript资源，而加载到各个define模块后，各个模块便悄无声息的创建script标签加载
加载结束后便往require模块队列报告自己加载结束了，当require中多有依赖模块皆加载结束时，便执行其回调
原理大致如此，剩下的只是具体实现，而后在论证这个理论是否靠谱即可
加载器阉割实现
核心模块
根据以上理论，我们由整体来说，首先以入口三个基本函数来说
var require = function () {
};
require.config = function () {
};
require.define = function () {
};
这三个模块比不可少：
① config用以配置模块与路径的映射，或者还有其他用处
② require为程序入口
③ define设计各个模块，响应require的调度
然后我们这里会有一个创建script标签的方法，并且会监听其onload事件
④ loadscript
其次我们加载script标签后，应该有一个全局的模块对象，用于存储已经加载好的模块，于是这里提出了两个需求：
⑤ require.moduleobj 模块存储对象
⑥ module，模块的构造函数
有了以上核心模块，我们形成了如下代码：
(function () {
var module = function () {
this.status = 'loading'; //只具有loading与loaded两个状态
this.depcount = 0; //模块依赖项
this.value = null; //define函数回调执行的返回
};
var loadscript = function (url, callback) {
};
var config = function () {
};
var require = function (deps, callback) {
};
require.config = function (cfg) {
};
var define = function (deps, callback) {
};
})();
于是接下来便是具体实现，然后在实现过程中补足不具备的接口与细节，往往在最后的实现与最初的设计没有半毛钱关系......
代码实现
这块最初实现时，本来想直接参考requirejs的实现，但是我们老大笑眯眯的拿出了一个他写的加载器，我一看不得不承认有点妖
于是这里便借鉴了其实现，做了简单改造：
(function () {
//存储已经加载好的模块
var modulecache = {};
var require = function (deps, callback) {
var params = [];
var depcount = 0;
var i, len, isempty = false, modname;
//获取当前正在执行的js代码段，这个在onload事件之前执行
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 {
//如果未到加载状态直接往onload插入值，在依赖项加载好后会解除依赖
mod.onload.push(callback);
}
} else {
/*
这里重点说一下module对象
status代表模块状态
onload事实上对应requirejs的事件回调，该模块被引用多少次变化执行多少次回调，通知被依赖项解除依赖
*/
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;
//这段代码在这个场景中意义不大，注释了
// _script.onload = function (e) {};
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;
})();
首先这段代码有一些问题：
没有处理参数问题，字符串之类皆未处理
未处理循环依赖问题
未处理cmd写法
未处理html模板加载相关
未处理参数配置，baseurl什么都没有搞
基于此想实现打包文件也不可能
......
但就是这100行代码，便是加载器的核心，代码很短，对各位理解加载器很有帮助，里面有两点需要注意：
① requirejs是使用事件监听处理本身依赖，这里直接将之放到了onload数组中了
② 这里有一个很有意思的东西
document.currentscript
这个可以获取当前执行的代码段
requirejs是在onload中处理各个模块的，这里就用了一个不一样的实现，每个js文件加载后，都会执行require（define）方法
执行后便取到当前正在执行的文件，并且取到文件名加载之，正因为如此，连script的onload事件都省了......
demo实现
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
<script src="require.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>
</html>
//util
define([], function () {
return {
formatnum: function (n) {
if (n < 10) return '0' + n;
return n;
}
};
});
//math
define(['num'], function (num) {
return {
getradom: function () {
return parseint(math.random() * num);
}
};
});
//math
define(['num'], function (num) {
return {
getradom: function () {
return parseint(math.random() * num);
}
};
});
小结
今天我们实现了一个简单的模块加载器，通过他希望可以帮助各位了解requirejs或者seajs，最后顺利进入模块化编程的行列
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论