模块化

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

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

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 LRA-->B

graph LRA-->B

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

ganttdateFormat YYYY-MM-DDsection S1T1: 2014-01-01, 9dsection S2T2: 2014-01-11, 9dsection S3T3: 2014-01-02, 9d

ganttdateFormat YYYY-MM-DDsection S1T1: 2014-01-01, 9dsection S2T2: 2014-01-11, 9dsection S3T3: 2014-01-02, 9d

模块化开发(requireJS)

原文地址：https://www.cnblogs.com/jerrypig/p/9926388.html