JS模块化编程规范1——require.js

Z时代
2024-01-10
分类：技术分享

1. 概述

2. 详论
- 2.1. 定义
- 2.2. 调用
- 2.3. 入口

3. 结果

4. 参考

1. 概述

require.js是各种网络APP中非常常见的JS依赖库，它其实不仅仅是个模块加载器那么简单。它背后蕴含了一个非常重要的设计，也就是JS模块化编程。模块化是任何一个编程语言都会支持的设计，通过模块化能够将一个重要的问题拆分成一个个小的问题，并且模块与模块之间不关联（或者弱关联），减小的程序的开发难度。

最开始的时候，每个JS框架都会设计自己的模块加载方案，每次使用不同的JS的框架就得理解不同的模块加载方案。后来随着require.js的推广和使用，就逐渐形成了AMD（The Asynchronous Module Definition），也就是"异步模块加载机制"。这样，如果大家都约定使用同样的模块化规范设计，从一个框架到另外一个框架就没有成本，并且可以互相加载引入。

这里通过一个计算幂运算的例子，详细论述require.js的使用。

2. 详论

AMD模块规范听起来很高大上，但实际上并不是很复杂。模块化设计就是为了方便模块之间交互性，那么接口必然是统一而简约的，我们只要按照约定的规则来使用它即可。

2.1. 定义

模块化设计当然应该先定义一个模块了，这里定义一个乘法函数模块(Multiply.js)：

//自定义模块
define(function () {
"use strict";
var Multiply = function(x, y) {　
return x * y;
};
return Multiply;
})

再定义一个数学函数库模块，当然里面只有一个求幂运算函数(MyMath.js)：

//自定义模块
define(["./Multiply"], function(Multiply){
"use strict";
function MyMath(){
}
MyMath.prototype.pow = function(base, exponent){
let result = 1;
for(let i = 0; i < exponent; i++){
result = Multiply(result, base);
}
return result;
}
var myMath = new MyMath();
return myMath;
})

这里两个例子说明了定义模块是通过define方法定义模块的，其中第一个参数可以是一个数组，指明该模块的依赖：

define([tools], function(){});

2.2. 调用

接下来在主函数(main.js)中调用自定义的数学函数库模块：

//函数立即执行，避免污染全局作用域
(function(){
"use strict";
require.config({
paths: {
"jquery": "./3rdParty/jquery-3.5.1",
"MyMath": "./MyMath"
}
});
//调用模块
require(["jquery", "MyMath"],function($, MyMath){
$("button").click(function () {
var base = $("#base").val();
var exponent = $("#exponent").val();
var result = MyMath.pow(base, exponent);
$("#result").val(result);
});
})
})()

这里加载了JQuery库，因为JQuery库是按照AMD标准规范来构建的，所以可以通过require.js来引入。

require.config是用来配置导入的库文件，用来给模块定义配置真正的路径和简短的名称。

通过require方法去加载自定义的数学库模块和JQuery模块，其中第一个参数定义了需要加载的模块；第二个参数则是加载成功之后的回调函数：

require(['modules'], callback);

2.3. 入口

接下来就是定义HTML页面脚本加载的入口了（RequireJSTest.html）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RequireJS-AMD规范</title>
</head>
<body>
<div>
<div>
<label>求幂运算：</label>
</div>
<div>
<label>底数：</label>
<input type="number" value="2" id = "base">
</div>
<div>
<label>指数：</label>
<input type="number" value="8" id = "exponent">
</div>
<div>
<button type="button">结果为：</button>
<input type="number" id = "result">
</div>
</div>
<script src="https://www.cnblogs.com/charlee44/archive/2020/12/19/3rdParty/require.js" data-main="main"></script>
</body>
</html>

其中，<script src="https://www.cnblogs.com/charlee44/archive/2020/12/19/3rdParty/require.js" data-main="main"></script> 这句代码定义了脚本的加载入口，src当然是require.js的源代码，而data-main则会默认的将dota-main指定的js路径为根路径。