이 글은 주로 requireJS에 대한 심층적인 이해를 소개합니다. 즉, 간단한 모듈 로더를 구현하는 것입니다. 편집자는 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
이전 기사에서 우리는 모듈형 프로그래밍의 중요성과 그것이 해결할 수 있는 문제를 여러 번 강조했습니다.
① 단일 파일 변수의 이름 충돌 문제 해결
② 프런트엔드 문제 해결 다중 사용자 협업
3 파일 종속성 해결 질문
4 주문형 로딩(이 설명은 실제로 매우 거짓입니다)
⑤...
로더에 대한 더 깊은 이해를 돕기 위해 약간의 소스를 읽었습니다. 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);로그인 후 복사
완전한 급여에 대해서는 회사에서 성과급을 주지만, 알고리즘이 매우 복잡하여 출석, 완료 등이 포함될 수 있습니다. 당분간은 신경 쓰지 않겠습니다. 주택공제금을 내고 개인소득세를 공제하면 결국 내 월급
완성을 위해 위의 과정은 필수이지만, 각 기능이 굉장히 복잡할 수 있고, 돈에 관련된 일도 복잡하기 때문에 회사의 성과만으로도 코드 1,000줄을 초과할 수 있습니다
여기서 분리가 시작됩니다:
<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를 입력하고 정의합니다
require 및 정의
사실 위의 해결 방법은 여전히 파일로 나뉩니다. , 파일 이름이 변경되면 페이지가 변경됩니다. 실제로 이 문제를 처리하려면 경로 매핑이 있어야 합니다
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)
로그인 후 복사
간단하고 완전한 모듈 로더는 기본적으로 다음과 같습니다. 콜백은 실행되기 전에 모든 종속성을 로드해야 하며 콜백의 매개변수는 종속성 실행의 결과이므로 정의 모듈에는 일반적으로 반환 값이 필요합니다
계획이 있는데 어떻게 구현하나요?
구현 계획
모듈 로딩에 있어서 사람들의 첫 번째 반응은 ajax입니다. 왜냐하면 모듈 파일의 내용을 얻을 때마다 모듈화의 기초가 되지만 ajax 방식으로는 충분하지 않기 때문입니다. 크로스 도메인 문제가 있고
모듈식 솔루션은 필연적으로 크로스 도메인 문제를 처리해야 하므로 동적으로 생성된 스크립트 태그를 사용하여 js 파일을 로드하는 것이 첫 번째 선택이 되었습니다. 그러나 Ajax를 사용하지 않는 솔루션은 구현하기 어렵습니다. 아직 요구 사항이 있다고 합니다
PS: 실제 작업에서는 html 템플릿 파일을 로드하는 장면이 있습니다. 이에 대해서는 나중에 이야기하겠습니다.
보통 우리가 하는 작업은 자바스크립트 리소스를 예약하기 위한 프로그램 입구로 사용됩니다. 그런 다음 각 모듈은 로드할 스크립트 태그를 자동으로 생성하고, require의 모든 종속 모듈이 로드되면 해당 콜백을 실행합니다. 원칙은 대략 동일하며 나머지는 단지 구체적인 구현일 뿐이며 이 이론이 신뢰할 수 있는지 입증합니다
로더 거세 구현
핵심 모듈
위 이론에 따라 먼저 전체적으로 이야기하겠습니다. 우선 입구의 세 가지 기본 기능에 대해 이야기해보겠습니다
var require = function () {
};
require.config = function () {
};
require.define = function () {
};로그인 후 복사
이 세 가지 모듈은 필수입니다:
① config는 모듈과 경로 간의 매핑을 구성하는 데 사용되거나 다른 용도로 사용됩니다.
② require는 프로그램 입구
3 정의는 각 모듈을 디자인하고 필요한 일정에 응답합니다
그런 다음 여기에 스크립트 태그를 만들고 onLoad 이벤트를 수신하는 메서드가 있습니다
4 loadScript
두 번째로, 스크립트 태그를 로드한 후 로드된 모듈을 저장하기 위한 전역 모듈 객체여야 합니다. 따라서 여기에는 두 가지 요구 사항이 제시됩니다:
⑤ require.moduleObj 모듈 저장 객체
⑥ 모듈, 모듈 생성자
위의 핵심 모듈을 사용하여 다음 코드를 구성했습니다.
(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，最后顺利进入模块化编程的行列。
相关推荐：
用js实现简易模块加载器的方法
概述如何实现一个简单的浏览器端js模块加载器
JavaScript 模块化编程之加载器原理详解
위 내용은 requireJS는 간단한 모듈 로더 인스턴스 공유를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
