0. 前言
大年初二了啊，过年好啊！不要问我问为什么还发表文章，因为我爱学习，捂脸，咳咳，没有啊，开始今天的正文。。。
0.1 我的废话
-
今天这个requireJS我可能会多啰嗦几句，哈哈，就是说随着现在互联网的快速发展，网站就好像变成了“互联网的应用程序”，引入的javascript代码越来越庞大，越来越多，javascript的模块化管理的需求也就越来越大，Javascript不是一种模块化编程语言，它只是一个弱类型的脚本语言，更别说是“模块”了，而requireJS可以实现模块化管理。
-
传统代码的缺陷，传统的用script标签导入的JS文件，有可能会阻塞页面渲染，而且正常我们开发的时候会导入JS文件，都用script标签标签导入，打个比方说就是：如果你有两个文件，里面定义的变量都是var a = 10；那么你两个文件是不是命名冲突了啊，当然你会理直气壮的和我说，你的变量命名很规范，不会出现这样的问题，那好，在开发中，你把你的代码和你同事的代码合在一起的时候会保证不出现命名冲突么，所以传统的代码很容易造成混乱，不容易维护。
timg.jpg
0.2 什么是模块化？
模块化是指在处理某些问题时，按照一种分类或者思想对功能进行模块化管理和应用。
0.3 模块化需要具备的能力
- 具有定义封装的能力
- 具有定义依赖新模块的能力，可以引入其他模块的能力
0.4 额外扩展
在Java中有一个重要的概念-package，逻辑上相关的代码组织到同一个包内，包内可以说是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应package即 import java.util.ArrayList；遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。
1. 简介
requireJS是一个JavaScript文件和模块加载器。requireJS允许你把你的javascript代码独立成文件和模块，同时管理每个模块间的依赖关系。requireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。使用requireJS加载模块化脚本将提高代码的加载速度和质量。
百度百科
1.1 模块化编程规范
- AMD是requireJS在推广对模块化编程规范的产出，对于依赖的模块，AMD是提前执行，异步加载。
- CMD是seaJS在推广中对模块化编程规范的产出，CMD是延迟执行，CMD推崇依赖就近
- 这些规范目的都是为了更合理的去实现模块化编程，特别是在浏览器中，大部分都支持模块化编程
1.2 requireJS的基本API
-
requireJS有三个变量：define、require、requireJS，其中requireJS和require是一个意思，我们一般使用require就可以，require是加载模块用的，而且加载模块后，还可以执行回调函数。
-
define定义模块
-
require方法来加载模块
图片.png
-
通过require.config来配置路径，通过require.config不仅加载本地文件，还可以加载网络文件
图片.png
2. 代码实现
2.1 index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<!-- 导入requireJS库 -->
<!-- data-main可以导入主入口文件app是指app.js -->
<script type="text/javascript" src="lib/require.js" data-main="app"></script>
<script type="text/javascript">
</script>
</body>
</html>
2.2 a.js文件
//define定义模块(不依赖于任何其他模块)
define(function () {
//加法运算
function add (x, y) {
return x + y;
}
return {
add : add
}
})
2.3 b.js文件
define(['jquery', './modules/moduleA/a'], function ($, A) {
//改变div颜色
function changeColor () {
$("#box").css({
backgroundColor : "red"
});
}
//私有方法（说白了就是给自己用，不支持导出这个功能）
function mul (x, y) {
return x - y;
}
function addAndMul (x, y) {
changeColor();
//用到了A模块里的功能和自身模块的私有方法
return A.add(x, y) + mul(x, y);
}
return {
addAndMul : addAndMul
}
});
2.4 c.js文件
define(['a', 'b'], function (A, B) {
function changeColor () {
$("#box").css({
backgroundColor : 'blue'
});
}
function fn (x, y) {
changeColor();
var num = A.add(x, y) + B.addAndMul(x, y);
return num;
}
return {
fn : fn
}
});
2.5 app.js文件
//通过require.config方法来配置要导入的模块路径
require.config({
paths : {
//这里写要导入的路径和对应生成的模块名字
a : './modules/moduleA/a',
b : './modules/moduleB/b'
}
})
require([ 'a', 'b', './modules/moduleC/c'], function ( A, B, C) {
//使用A模块的功能
console.log(A.add(1, 2));
//使用B模块的功能
console.log(B.addAndMul(1, 2));
//使用C模块的功能
console.log(C.fn(1, 2));
});
图片.png
打印的结果
图片.png
如果改变一下2.5 文件里 changeColor()和num的顺序div颜色会改变
图片.png
其实这不是什么大事！是代码执行顺序的问题
3. 结束语
其实我觉的requireJS没那么复杂，就记住三步，配置路径、导出、定义模块，如果你要用到路由，那就再多一步，哈哈，你是不是再说：“你说的到简单”，只要你多看看，就有一天会用的，最后点赞吧！
网友评论