模块化开发(requireJS)

Posted 2021-01-18 大西瓜的随笔

模块化

在前端使用模块化开发，可以将代码根据功能实施模块的划分，每个模块功能（职责）单一，在需要更改对应的功能的时候，只需要对指定的模块进行修改，其他模块不受任何影响。

为什么要进行前端模块化？

1. 达到公共模块的复用
2. 可以很好的解决全局变量污染的问题
3. 可以很好的解决各个功能之间的依赖关系

如何实现前端模块化开发

javascript本身不支持模块化开发，但是可以通过一些手段来实现。

CommonJS是一个规范，用来规定模块化开发的标准。

CommonJS由于一系列的限制，在前端开发当中，并不能很好的被实现。
Nodejs中对于CommonJS这个规范有很好的实现。

CommonJS虽然不能再前端开发中很好进行实现，但是后面有人在CommonJS的基础上做了其他的改变。

AMD Async Module Define (require.js) 也是一个规范，在CommonJS的基础上产生的 //依赖前置

CMD Common Module Define (sea.js) [玉伯] 也是一个规范，在CommonJS的基础上产生的 //依赖就近 as lazy as possible

逗乐：AMD没有明显的BUG,但是CMD明显没有BUG

如何实现模块 （require.js）

requirejs本身就是一个js文件，这个文件实现了AMD规范，所以可以帮助我们在前端开发中实现模块化！

模块的定义

//如果当前模块没有任何依赖项
define(function(){
    
});

//如果一个模块要引用另外一个模块，就将模块的名称放在第一个参数的数组中
define(["模块","模块"], function(形参, 形参){

    //模块和形参一一对应，形参就表示每个对应的模块的返回值
    //可以通过当前函数的形参，接收其他模块的返回值！
    //定义模块的时候，可以有返回值，也可以没有返回
    //如果有返回值，就可以将返回值交给调用该模块的模块使用
})

模块的使用

require函数可以用来引用模块，require的第一个参数为数组，里面写所有要引用的模块的名称

//只引用模块，不执行其他代码
require([]);

//引用模块，并且执行一些操作！
require([], function(){
    //可以通过当前函数的形参，接收其他模块的返回值！
})

入口文件

在引用requirejs的script标签中，可以指定一个入口文件(data-main)，当require.js文件加载完成之后，会自动执行，这个入口文件中的代码！

模块的路径

1. 默认情况下，模块的路径是以调用模块的页面的目录为基础的！
2. 当使用入口文件的时候，模块的路径是以入口文件的目录作为基础的
3. 如果使用了require.config配置了baseUrl,就一配置的baseUrl为基础查找文件

自定义模块路径查找

require.config({
    baseUrl: "/"
});

使用require 加载传统的js

例如加载bootstrap， 因为bootstrap是基于jQuery，所以要手动的设置依赖项

在require.config({
//在shim属性中，通过deps属性，为bootstrap添加依赖项
shim: {

    bootstrap:{
        deps: []
    }
}

})

jquery支持模块化，jquery.cookie也支持模块化！

使用requirejs加载非模块化的内容

如果加载的非模块化的内容有依赖项，就要在config中，在shim属性中，通过deps属性，为这个非模块化的内容添加依赖项

如果加载的非模块化的内容要返回内容给我们使用，就要在config中，在shim属性中，通过exports属性，来设置返回的内容，这个内容可以是非模块化的文件中任意一个变量名（字符串）

匿名模块 和 具名模块

//匿名模块的定义
define([], function(){
    
})

//具名模块的定义
define("模块名", [], function(){
    
})

//具名模块中的模块名，必须和paths中设置的路径的名称一致，才能够访问，不然会出现路径错误

graph LR
A-->B

graph LR
A-->B

sequenceDiagram
A->>B: How are you?
B->>A: Great!

gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d

gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d