一、前言

在前端开发中，随着项目的不断扩大和复杂度的提高，我们发现要做到代码的可维护性和可扩展性已经变得越来越重要。这时一个好的模块化开发方式就显得尤为重要，而seajs模块化开发方式就是其中之一。

二、什么是seajs？

seajs是一个遵循CMD（CommonJS规范的一种实现）规范的JavaScript模块加载器。seajs是一种优美而简单的前端模块化开发解决方案，将复杂的设计思路简化为一个方便的API接口。

官方网站：https://seajs.github.io/seajs/docs/

三、seajs的基本使用

1.seajs使用方法：

(1)首先引入seajs文件：

```

```

(2)然后再在JS文件中使用define定义模块，如下：

```

define(function(require,exports,module){

//模块代码

});

```

(3)模块依赖：

在使用seajs时，模块依赖关系需要通过require方式来定义。

如下所示，在b中需要使用a模块的功能，就需要在b中引入a模块：

```

define(function(require,exports,module){

var a = require('./a');

//模块代码

});

```

2.seajs的API使用：

seajs提供了一些API来方便我们使用它，如下：

(1)define函数：

定义一个模块：define(id?, deps?, factory)

参数说明：

id: 模块标识，可以省略，如果没有指定则为当前正在执行的脚本，一般通过文件名来指定。

deps: 模块依赖，是一个数组，数组中的每一项（表示一个模块的标识符）可以是字符串（即模块的路径），也可以是对象或数组，具体可看官方文档。seajs会将依赖项中的模块作为参数按照依赖的顺序传入工厂函数。如果deps是空数组或省略该参数，表示当前模块没有依赖其他模块。

factory：模块初始化的函数或对象，它是模块的具体实现。如果factory是一个函数，它的参数是按顺序传入的依赖项模块的返回值，在该函数中编写模块的具体功能实现代码；如果factory是一个对象，就直接将该对象作为模块的返回值（不需要再调用一次require）

举个例子：

```

define('test.js',['jquery'],function($){

alert($);

});

```

如果模块ID不是路径（即模块文件名最后没有.js后缀的情况）,可以不用指定，如下：

```

define(function(require,exports,module){

var $ = require('jquery');

//模块代码

});

```

(2)require函数：

加载一个模块：require(id)

参数说明：

id: 模块标识，可以是模块文件的路径（相对路径/绝对路径），也可以是其他模块的标识符或不带后缀的文件名，如果文件名与当前文件同名，则表示在同一路径下搜索该文件

举个例子：

```

define(function(require,exports,module){

var $ = require('jquery');

//模块代码

});

```

(3)seajs.config函数：

配置函数，可以用来自定义配置seajs一些参数，例如别名。

参数说明：

base: 一个绝对路径，seajs会在这个路径下面加载对应的模块文件，因此，base是必须的且最好设置（尤其是在使用云存储等静态资源服务时）

alias: 模块别名，用来在模块加载时指定模块ID。例如：{

'jquery' : 'sea-modules/jquery/jquery.js'

}

举个例子：

```

seajs.config({

base : '/javascript',//设置seajs的根路径

paths : {jquery: 'jquery/jquery-2.2.0.min'}

});

define(function(require,exports,module){

var $ = require('jquery');

//模块代码

});

```

(4)seajs.use函数：

用来异步加载一个或多个模块，并在加载完成之后执行回调函数。use可以在普通的JavaScript环境，HTML页面和Node.js环境下运行，例如：

```

seajs.use(['app', 'jquery'], function(app) {

app.init();

});

```

4.实践一下

我们可以创建一个项目，学习seajs的使用：先安装seajs，然后再以下用例的基础上加入新的代码，最终实现一个查询显示国家名称的功能。

(1)首先，在当前目录下新建一个html文件，命名为index.html，并在其中写下的代码：

```

```

(2) 在创建字符串格式的国家列表，建立名称为names.js的模块。

```

define(function(require, exports, module) {

module.exports = ['中国', '法国', '日本', '美国'];

});

```

(3)在主模块中引入刚才的模块：

```

define(function(require, exports, module) {

var names = require('./models/names');

console.log(names.join(', '));

});

```

(4)运行index.html，就会在浏览器中查看到控制台上输出了国家名字。我们在index.html页面中添加查询生成国家名称的代码。 修改index.js文件：

```

define(function(require, exports, module) {

var names = require('./models/names');

document.write('

');

for (var i=0; i

document.write('

• '+names[i]+'
');

}

document.write('

});

```

修改后的index.html代码：

```

国家列表

```

至此，大功告成！一个简单的seajs使用实例就已经出来了。

四、总结

通过使用seajs，我们可以将脚本代码拆分为各个独立但高度关联的模块，每个模块提供单独的接口暴露给其他模块使用，从而增加了代码的可维护性和扩展性。seajs是一款小巧的JavaScript模块化开发工具，使用非常简单，学习成本低，受到越来越多开发者的青睐。如果在工程化开发中没用模块化开发方式，尝试使用seajs吧，将会有意外的惊喜呢！