前端模块化

一，前端模块化-seajs

1，提出问题

为什么要用前端模块化？？？

1）防止全局变量污染，重名

2）当引入工具库时，工具库中的变量名与我们定义的属性或方法重名

3）当我们使用一些工具库时，我们需要手动的将工具库依赖写入到页面

4）通用组跟新了前端的基础类库，但很难推动全站升级

5）业务组想用某个通用组件，但是发现无法使用几行代码就实现

6）老产品上线新功能，却只能基于老的类库进行开发

7）业务合并的时候，发现前端代码冲突

......

解决问题：seajs,requirejs

2,seajs简介

Sea.js是一个很纯粹小巧的模块加载器，它只解决一个问题：前端代码的模块化。通过Sea.js，可以将大量JavaScript代码封装成一个个小模块，然后轻松实现模块的加载和依赖管理。

3，seajs获取与安装

1）终端安装seajs

npm install spm -g

spm install seajs

2)页面中引入依赖

github上获取文件

https://github.com/seajs/seajs

<script src = 'lib/sea.js'></script>

<script>

alert(seajs.version);

</script>

4)定义模块 define

define() 可以有三个参数

当传递一个参数时：

参数是字符串，就是一个字符串模块

参数是数字，就是一个数字模块

参数是对象，就是一个对象模块

参数是函数（最常用的）：

这个函数有三个参数：

Require:用于引用其他模块的方法

Exports:返回接口对象

Module:模块module属性

当传递两个参数时：

第一个参数：是模块依赖的模块数组集合

第二个参数：是function(require,exports,module){}

当传递三个参数时：

参数1：表示该模块的名称

参数2：是模块依赖的模块数组集合

参数3：是function(require,exports,module){}

当传递模块名称时，这个名称就是该模块的名字，可以使用该名字被调用

当不传递模块名称时，该模块的名称就是当前文件相对于sea.js文件的路径

通常我们将该模块的名称与文件名字保持一致

我们使用define()方法定义一个模块，当一个文件中出现多个模块，后边的模块会覆盖前边的模块

5,引用模块 require()

规则：

1）require不能简写

2）require不能被重新定义

var req = require

function require(){}

function fun(require){}

function fun(){

var require = '123';

}

3)require 的参数只能是完整的字符串，require('img'+'e')是不允许的

require的参数表示模块的路径，相对于seajs的路径，引入的是模块，js文件的后缀.js可以不写

当require引入一个已经定义模块名称的模块时，在引入模块时，首先在该模块依赖的模块集合数组中将该模块引入进来，然后使用require(name)引入该模块

6，exports 模块接口

exports表示模块接口

1）直接对exports添加属性，exports.color = 'red'；

2）通过module定义，module.exports.color = 'yellow'；

3）通过module定义，module.exports = {color:'red',name:'lisi'}

4）通过return返回，return{color:'red',name:'lisi'}

·注意：我们在一个模块中只能使用一种接口方式，不能混用

·注意：我们不能直接对exports赋值新的对象，但是可以对module.exports赋值新对象

7,require.async 异步加载

require方法的异步调用，与use方法很相似，在页面初始化时使用use异步加载模块。如果在模块中想实现异步加载其他模块需要使用require.async()

两个参数：

参数1：字符串或数组，所依赖模块的路径

参数2：加载成功回调，该函数的参数表示前边依赖模块的顺序调用

语法：

require.async(['header/header','header/skin/skin'],function(h,s){});

注意：当有判断条件判断加载那个模块时，

同步加载，那么两个分支中的依赖模块都会被加载，但是，执行那个分支，那个分支的模块才会被引用

异步加载，走哪个分支，那个分支的模块才会被加载