在看内容之前，我们需要来了解一下目前前端的形式。很久之前在一份简历中，看到这样一句话“推崇前端模块化及组件化”。而目前前端的需求也正如次。如果你有了解vue，react等前端流行框架，那么无论是那一个，都是组件为主。个人感觉vue会更舒服，包含了 template、script、css 的 *.vue文件用起来得心应手。说远了，我们接下来了解前端模块化。当然，如果你想学习更多H5相关知识，可以考虑H5培训。
1.模块
我们先来看看什么是模块，谈起模块就要从最根本的作用域开始说起。js的作用域是“函数级作用域”
function fn1() {
var num = 10;
}
function fn2() {
var num = 20;
}
window.fn1();
window.fn2();
上面的代码可以理解为最基本的模块，当然，这样的代码是不行，毕竟太污染全局变量了。
那么如果修改呢?看下面代码
var myModule = {
num:10,
str:"iwen",
fn1:function () {
console.log(this.num);
},
fn2:function () {
console.log(this.str);
}
};
myModule.num = 20;
myModule.fn1();
将属于一个模块的内容放入到一个对象中，这样很好解决了污染问题。当大家看到
myModule.num = 20;
的时候，发现外部可以随意修改内部成员。所以这样写不太合适。
那么我们在看下面的代码：
var myModule = (function () {
var num = 10;
var str = "iwen";
function fn1() {
console.log(num);
}
function fn2() {
console.log(str);
}
return{
fn1:fn1,
fn2:fn2
}
})();
myModule.fn1();
看到这里，就解决了外部修改内部成员的问题。在进一步加强
看下面代码：(放大模式)
var module1 = (function () {
var num =10;
var str = "iwen";
function getName() {
return str;
}
return {
getName:getName
}
})();
var module2 = (function (module1) {
module1.setName = function () {
};
return module1;
})(module1);
console.log(module2.getName());
这样的好处是每一个module只处理当前相关的内容，我们来在进一步
看下面代码：(宽放大模式)
var module1 = {
num:10,
str:"iwen",
fn1:function () {
console.log(this.num);
},
fn2:function () {
console.log(this.str);
}
};
module1 = null;
var module2 = (function (module1) {
module1.getName = function () {
};
return module1;
})(window.module1 || {});
console.log(module2);
与放大模式相比，宽放大模式可以传入空对象。如果我们需要引入第三方相关类库怎慢呢?
看下面代码：
var module = {
num:10
};
var module1 = (function ($,module) {
function getNum() {
console.log(module.num);
}
function getJQ() {
console.log($("div"));
}
return{
getJQ:getJQ,
getNum:getNum
}
})(jQuery,module);
module1.getJQ();
module1.getNum();
下面我们在来研究一下私有与共有的问题：
var module1 = (function () {
var num =10;
var str = "iwen";
function getName() {
return str;
}
return {
getName:getName
}
})();
var module2 = (function (module1) {
module1.setName = function () {
};
return module1;
})(module1);
console.log(module2);
上面的代码，大家好好思考一下。
2.接下来了解一下“模块化”
受到了NodeJS的Commonjs规范影响，在浏览器端也开始流行模块化，模块化单独说起来有点麻烦。我们还是来引入第三方吧，知名被常用到目前有一下
(1)require.js
(2)sea.js
首先我们来看一下Commonjs规范，具体代码看下面：
module.js:
function demo() {
console.log("demo");
}
function demo2() {
console.log("demo2");
}
module.exports = {
demo:demo,
demo2:demo2
}
demo.js
var module1 = require("./module1");
module1.demo();
module1.demo2();
以上代码，需要Node环境来进行执行。关于Node并非本章内容，在这里不过多说明。
接下来看一来require.js。
AMD 是 RequireJS 在推⼴过程中对模块定义的规范化的产出
requireJS主要解决问题：
(1)实现js⽂件的异步加载，避免⽹⻚失去响应
(2)管理模块之间的依赖性，便于代码的编写和维护
具体实现：
(1)引入
