Seajs源码解析系列(一)

---

前言：以前在做webgis开发的时候，就对dojo的模块化加载方式很好奇，一直想弄清楚它的实现原理，奈何其框架过于庞大，加上自己也懒，就一直没有深入进行研究。这段时间接触了Sea.js，淘宝前端大牛玉伯写的。它遵循的是CMD的加载规范，据说可以像Node一样书写模块代码。好奇看了一下源码，嗯~，才1000来行，加上最近时间也不是太忙，就想深入研究一下。

---

Seajs简介：
Seajs可以理解为是一种模块加载器，可以提供一种简单，方便的模块化加载方式。以前，我们在前端开发过程中，通过会使用script标签加载我们需要引入的js文件。随着网页的结构越来越复杂，我们需要引入的js文件也越来越多，有的文件之间甚至还有依赖关系，如果我们还像以前一样将所有的代码都放在一个文件中的时候，很容易出现以下问题：

• 全局变量互相影响
• JavaScript文件过大，影响下载速度
• 结构混乱，很难维护
• 引入文件时需要注意其依赖关系，稍不留神可能就会发生错误

在这种情况下，Seajs应运而生。Sea.js 是一个成熟的开源项目，核心目标是给前端开发提供简单、极致的模块化开发体验。这里不多做介绍，有兴趣的可以访问 seajs.org 查看官方文档。

使用 Sea.js，在书写文件时，需要遵守 CMD （Common Module Definition）模块定义规范。一个文件就是一个模块。那么，使用Seajs有什么好处呢？再次回到我们上面的问题，假如我们在开发过程中，常常会将一些基础的、底层的功能抽象出来，独立成一个函数，并将其放在一个基础的函数库中，例如util.js。

function each(){}
function error(){}

那么，我们以后再开发过程中如果需要使用这些功能，就可以在项目中引入util.js文件，然后直接使用。这样看起来很方便，但是在项目的进行中，我们常常会遇到这样的问题，假如在页面中我也想自定义一个方法来遍历对象，但是在util.js中已经有一个了，那我的方法就只能取其他的名字。当方法名越来越多的时候，对于我这种英语刚过四级的学渣来说，取名简直是一种煎熬/(ㄒoㄒ)/~~。。。

另外，还有一个问题，假如我的util.js中的某个方法还依赖于baseUtil.js文件，那么我们在引入js文件的时候就必须要这样：

    <script type="text/javascript" src="baseUtil.js"></script>
    <script type="text/javascript" src="util.js"></script>

假如我们在开发过程中，忘记了依赖引入，项目中的代码功能可能就会报错。

以上的问题，我相信大部分前端开发者都曾遇到过。那么，我们如何通过Seajs的模块化开发来解决上述问题呢？
Seajs在使用过程中，需要遵守CMD规范，一个文件就是一个模块，那么，我们可以这样定义我们util模块。

define(function(require,exports,module){
    exports.each=function(){};
    exports.error=function(){};
})

那么，我们在开发过程中要如何使用我们util模块呢？例如，我们需要在前端定义一个module模块，并在其中使用util中的功能。那么，我们的module模块就可以这样写：

define(function(require,exports){
    var util=require("./util.js");
    exports.init=function(){};
})

在这里，我们通过require(“./util.js”)可以拿到util模块通过exports暴露的接口。在这里，我们可以将require理解为Seajs为我们提供的关键字，通过他，我们可以获取其他模块提供的接口。
通过以上的介绍，我们可以大致的理解了Seajs带来的两个好处：

• 通过exports暴露接口，解决了命名冲突的问题
• 通过require引入依赖，使文件的依赖关系内置，开发者只需要关心自己目前使用的模块，其他事情Seajs会帮你做好，提高了开发效率。

---

至此，Seajs的介绍已基本结束，前往Seajs官网可以了解更多有关seajs的知识。在下一节，将会和大家进一步分享这几天阅读Seajs源码的心得体会。