前端模块化开发

Posted 2021-04-27 HTML开发学习

今天谈谈前端模块化开发，类似的介绍在网上有很多，有不少大佬做过这方面的讲解，在这里就自己对模块化谈谈自己的认知，可能有不到位的地方，也希望大家提出指正。

模块化开发，顾名思义，就是将功能点拆分成各个模块，然后按需加载需要的模块。

在将模块化开发之前，先来看看我们之前大部分是怎么加载页面资源的：

大家肯定很熟悉这种写法，就是将资源一个一个的通过script引入到页面文件中，这种是CommonJS规范，即每个文件都是一个模块，模块之间不能互相访问。但如果资源文件比较多，这样的写法就暴露出弊端了，你就要写很多script标签了，而且如果每个js文件加载不出，也会造成js阻塞浏览器渲染页面。所以我们需要模块化，它的优点：

    1、实现js文件异步加载，避免网页失去响应；

    2、管理模块间的依赖关系，便于开发；

模块化有两种规范：AMD和CMD

两者的区别：

    1、AMD推崇依赖前置，CMD推崇就近依赖；

    2、AMD使用requireJS，CMD使用seaJS;

如果要探究具体的区别，这里推荐一篇写的比较好的文章：https://blog.csdn.net/heyue_99/article/details/54894719

这里就主要讲讲requireJS的用法。

首先，介绍requireJS的三个API，define、require、requireJS;

define

define(id?, dependencies?, factory);

用来定义模块，它有三个参数，第一个参数可加可不加，表示定义模块名；第二个参数可加可不加，表示当前模块依赖的其他模块名，必须是数组形式；第三个参数是模块初始化执行的函数或对象，如果是函数，应该只被执行一次，如果是对象，应该为模块的输出值，即需要把这个对象return出去；

require

require([dependencies], function(){});

用来加载模块，它有两个参数，第一个参数必须是一个数组，表示所依赖的模块；第二个参数是个回调函数，表示所有依赖的模块都加载成功后执行的函数。

require.confg

用来加载配置模块加载位置，具体如图：

了解了API后，我们来试试到底怎么用。

然后script引入：<script defer async="true"></script>

async="true"的意思是异步加载该文件，但IE不识别，所以加上defer,也是同样的意思。

然后，新建main.js文件，作为入口文件，加载模块。<script data-main="main"></script>

另外，强调一点，require加载模块不需要加上.js，也不能加上后缀。

然后，再定义demo1和demo2模块；

demo1:

demo2:

然后在页面文件中引入main.js：

<script data-main="index"></script>

data-main表示网页程序的主模块，src表示主程序的依赖模块

index.html

main.js

OK,require的简单使用就介绍打这里。另外，附上大大神阮一峰的关于require的使用的文章：https://blog.csdn.net/zhuchunyan_aijia/article/details/50453846