如何通过sea.js进行模块化开发

简介：

模块化开发：前端开发中，起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果，后来js得到重视，应用也广泛起来，使得前端项目越来越复杂，然而，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，因而在团队合作的过程中不易于工程管理，变量名容易造成冲突。模块化开发就是要解决这个问题。模块化开发需要遵循一定的规范，在前端开发方向需要遵循AMD规范（AMD 即Asynchronous Module Definition，中文名是“异步模块定义”的意思。）

SeaJS:SeaJS是一个遵循CMD规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。通过SeaJs很容易在前端实现模块化开发。提高团队协同能力和效率。

步骤：

1.引入Seajs

SeaJs是一个前端插件，我们通过SeaJs进行模块化开发首先要通过script标签引入该框架，该框架可以从github项目中去下载。

2.定义模块

定义模块以便供其他模块调用。

define(function (require, exports, module) {
//定义可供外部调用的函数
function fn() {
...........
}
//定义可供外部调用的变量
var b=null;
//为外部调用暴露接口
exports.drag = fn;
exports.b = b;
});

3.调用模块

调用其他模块的函数或变量，用于执行特定任务。

define(function (require, exports, module) {
require("./test/drag.js").drag();//调用模块方法(require参数指定定义模块的文件名)
var i=require("./test/drag.js").b;//调用模块属性(require参数指定定义模块的文件名)
});

4.加载模块

seajs.use 用来在页面中加载模块。通过 use 方法，可以在页面中加载任意模块。

seajs.use('模块的路径', function(ex){});

备注：

1.define(id?, dependencies?, factory);

id：指定义中模块的名字，可选；如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。

依赖dependencies：是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。

依赖参数是可选的，如果忽略此参数，它应该默认为[“require”, “exports”, “module”]。然而，如果工厂方法的长度属性小于3，加载器会选择以函数的长度属性指定的参数个数调用工厂方法。

工厂方法factory：模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

2.模块名的格式

模块名用来唯一标识定义中模块，它们同样在依赖性数组中使用：

模块名是用正斜杠分割的有意义单词的字符串

单词须为驼峰形式，或者”.”，”..”

模块名不允许文件扩展名的形式，如“.js”

模块名可以为 “相对的” 或 “顶级的”。如果首字符为“.”或“..”则为相对的模块名

顶级的模块名从根命名空间的概念模块解析

相对的模块名从 “require” 书写和调用的模块解析