一步步学会使用SeaJS 2.0【前端模块化|解决命名冲突和文件依赖关系】

本文分为以下8步，熟悉之后就能够熟练使用SeaJS，从此之后你的生活会变得更加轻松愉悦！

1、SeaJS是什么？

2、下载并检阅SeaJS

3、建立工程和各种目录

4、引入SeaJS库

5、编写自己的代码

6、引入自己的代码

7、压缩合并

8、总结展望

 

--------------------------------------------------

 

1、SeaJS是什么？

 

你一定听过前端模块化开发吧？神马，你没听过？我只能说你out了……

你应该知道Java的import吧？神马，你又不知道？那你应该知道CSS中的import吧……

在这里我不想展开说前端模块化的含义和价值，因为这里有一篇好文（ https://github.com/seajs/seajs/issues/547），详细说明了前端模块化。

我知道你看到那么长的文章肯定会望而却步，也许你是希望能够快速开始敲代码（程序员的通病……）。没关系，如果实在读不下去，只要记住模块化要解决的问题即可：命名冲突、文件依赖关系。

这两个闹心的问题应该遇到过吧，如果没遇到过……我只能说你太牛X了

好了，前端模块化就扯到这里，写过前端的人应该基本都知道JavaScript自身是不支持模块化开发的，所以就有了SeaJS这款神器，为前端从业者提供了一个强大易用的模块化开发工具。

 

 

 

2、下载并检阅SeaJS

 

SeaJS现在已经是2.0版本啦，到这里下载： https://github.com/seajs/seajs

 

解压后会看到下列目录：

 

其中：

dist —— 压缩好的、用于浏览器端的SeaJS代码

docs —— 文档

src —— 源代码

package.json + Gruntfile.js —— Grunt构建工具所需要的文件，这个在第七步压缩合并会介绍到

其他目录或文件可以暂且不管

 

 

 

3、建立工程和各种目录

 

准备工作已经完成，我们终于可以开始进行开发啦！来，跟我走：

a. 建立工程

用你最喜欢的IDE建立工程，名字为HelloSeaJS

b. 准备各种目录

在这里把JavaScript、Image、CSS都放在统一的资源文件（assets）中，建好之后的目录如下：

（我使用了Sublime2.0，在这里强烈推荐）

 

c. 把刚刚下好的seajs/dist中的文件都放在scripts/seajs目录下

注意：SeaJS会根据自身的URI来决定URL base，而SeaJS在加载其他模块的时候会根据这个URL base来计算路径。SeaJS会忽略掉seajs、seajs/2.0.0/seajs这两种目录，照上述的目录结构，此处的URL base就是HelloSeaJS/assets/scripts，这样其他模块就可以与seajs目录并行存放。

 

至此，工程和文件都已准备完成。

 

 

 

4、引入SeaJS库

 

与引入其他js库并无太大区别：

<script src="assets/scripts/seajs/sea.js" id="seajsnode"></script>

你可能注意到，这里加上了id="seajsnode"，原因如下：

a. SeaJS加载自身的script标签的其他属性（如data-config、data-main）等来实现不同的功能

b. SeaJS内部通过document.getElementById("seajsnode")来获取这个script标签（其实SeaJS内部还有一种方式，不过另一种方式的效率比较低，所以不推荐，如果有兴趣，可以看一下源码https://github.com/seajs/seajs/blob/master/src/util-path.js）

 

 

 

 

5、编写自己的代码

 

这里作为示范，只做了一个非常简单的效果，点击查看： http://liuda101.github.io/HelloSeaJS/

在编写自己代码的时候，要时刻记住”模块化“，而操作起来也非常简单，因为在SeaJS中一个文件就是一个模块。

下面是代码逻辑的模块application.js：

define( function (require,exports,module){

     var  util = {};

     var  colorRange = [ '0' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , 'A' , 'B' , 'C' , 'D' , 'E' , 'F' ];

     util.randomColor =  function (){
          return  '#'  +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)];
     };


     var  helloSeaJS = document.getElementById( 'hello-seajs' );
     helloSeaJS.style.color = util.randomColor();
     window.setInterval( function (){
          helloSeaJS.style.color = util.randomColor();
     },1500);
});

我们看到，所有代码都放在define(function(require,exports,module){});函数体里面。

define是SeaJS定义的一个全局函数，用来定义一个模块。

至于require，exports，module都是什么，可以暂且不管，到此，我们的代码已经完成，很简单吧。嗯，花个几十秒钟，看一下代码。

……

看完之后，你会说，这算什么啊！这就完了么？

不要怪我，为了简单易懂，我们就按照”一步步“的节奏慢慢来。

随着代码的增多，你肯定会遇到util越来越多的情况。很好，这样看来，我们就有了两个模块：util模块和application模块。SeaJS中，文件即模块，所以当然要将其分为两个文件。先看util.js：

define( function (require,exports,module){
     var  util = {};

     var  colorRange = [ '0' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , 'A' , 'B' , 'C' , 'D' , 'E' , 'F' ];

     util.randomColor =  function (){
          return  '#'  +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)] +
               colorRange[Math.floor(Math.random() * 16)];
     };

     module.exports = util;
});

 

除了define之外，我们看到module.exports = util;这一句比较特殊。这句是在说，我util模块向外暴露的接口就这些，其他所有的东西都是我内部用的，尔等就无需担心了，我会照顾好的。

再看application.js：

define( function (require,exports,module){

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

     var  helloSeaJS = document.getElementById( 'hello-seajs' );
     helloSeaJS.style.color = util.randomColor();
     window.setInterval( function (){
          helloSeaJS.style.color = util.randomColor();
     },1500);
});

 

我们看到var util = require('./util');这句比较特殊。这句就是在说，我application模块由于业务需要，想请util模块来帮忙，所以把util给require进来。

 

 

至此，我们经历了一个模块到两个模块的转变，在日后漫长的日子中，我们的模块也许会越来越多，不过不用担心，有了SeaJS提供的define、require、module.exports，我们都可以方便的应对。

 

 

 

6、引入自己的代码

 

你看到这个小标题，你可能会极力的鄙视我，这等工作还需要你来示范？于是，你啪啪啪啪，在引入SeaJS的script标签后引入了util.js和application.js:

<script src="assets/scripts/application/util.js"></script>

<script src="assets/scripts/application/application.js"></script>

然后你不停的F5……

你看不到效果吧？这就是这个小节存在的理由。

 

SeaJS提供了模块化的能力，前面我们已经看到了SeaJS定义模块、引用模块的方法，而这里就要用到SeaJS加载并启动模块的两种方式：

a、使用data-main

为<script src="assets/scripts/seajs/sea.js" id="seajsnode"></script>添加data-main="application/application"属性即可：

<script src="assets/scripts/seajs/sea.js" id="seajsnode" data-main="application/application"></script>

SeaJS会根据data-main指定的模块来作为整个应用的入口模块。SeaJS找到这个模块之后，就会加载执行这个模块对应的文件。

那么，SeaJS又是怎么找到这个文件呢？也就是说，这个模块对应的加载路径是多少？

“算法”是：SeaJS_URL_base + data-main

如上文，该例子的SeaJS_URL_base是HelloSeaJS/assets/scripts/

那么，加载路径就是HelloSeaJS/assets/scripts/application/application.js（SeaJS会自动加上.js后缀）

 

b、使用seajs.use

在<script src="assets/scripts/seajs/sea.js" id="seajsnode">后面加上：

<script> seajs.use("application/application"); </script>

其实这两种效果在这个例子中是一样的，data-main通常用在只有一个入口的情况，use可以用在多个入口的情况，具体用法，看这里： https://github.com/seajs/seajs/issues/260

如果你对你的程序有完全的控制权，建议使用data-main的方式，这样整个页面就只有一段script标签！作为一名前端开发人员，我不得不惊叹：干净、完美！

 

无论使用哪种方式，跟着我一起F5一下！

在打开Chrome的debug工具，查看Network这个tab：

我们看到，SeaJS已经帮我们加载好了application.js和util.js，舒服吧~

嗯，我第一次试用SeaJS的时候，到这里也感到了无比的舒心

 

 

 

7、压缩合并

 

正当我伸伸懒腰，打算上个WC的时候，突然想到一件事情：如果模块越来越多，那么多文件都要分开加载？那岂不严重影响性能！？（啥，你不知道为啥？）

要压缩合并JavaScript呀！于是，我强忍住那感角，开始用YUICompressor来压缩，并手动合并了两个文件。

这里就不展示结果了，因为很蛋疼，完全对不住我刚才忍住的勇气！结果当然是，失败。

为什么会失败呢？自己想了想，同时打开压缩后的代码一看，才发现原因：

压缩后之后，require变量变成了a变量。SeaJS是通过require字面来判断模块之间的依赖关系的，所以，require变量不能被简化。

 

嗯，SeaJS已经替我们想到了这个问题，于是我们就采用SeaJS提供的方式来合并压缩吧（当然你也可以自己用别的方式压缩）。

SeaJS在2.0之前，是采用SPM作为压缩合并工具的，到了2.0，改为Grunt.js，SPM变为包管理工具，类似NPM（不知道NPM？Google一下吧）

 

自动化不仅是科技带给社会的便利，也是Grunt带给前端的瑞士军刀。使用Grunt，可以很方便的定制各种任务，如压缩、合并等。使用Grunt之前，需要安装node环境和grunt工具，Google一下，十分钟后回来。

……

 

Grunt最核心的就两个部分，package.json、Gruntfile.js。

 

a. package.json

    Grunt把一个项目/目录视为一个npm模块，package.json就是用来描述这个模块的信息，包括name、version、author等等。

这里强调一下，Grunt既然将该目录视为一个模块，那么该模块当然可以依赖其他模块。

我们看本示例的：

{
     "name" : "HelloSeaJS",
     "version" : "1.0.0",
     "author" : "Qifeng Liu",
     "devDependencies" : {
          "grunt" : "0.4.1",
          "grunt-cmd-transport" : "0.1.1",
          "grunt-cmd-concat" : "0.1.0",
          "grunt-contrib-uglify" : "0.2.0",
          "grunt-contrib-clean" : "0.4.0"
     }
}

 

 

devDependencies就是用来描述自身所依赖的模块

其中:

grunt模块用来跑Gruntfile.js中定义的任务

grunt-cmd-transport模块用来对SeaJS定义的模块进行依赖提取等任务

grunt-cmd-concat模块用来对文件进行合并

grunt-contrib-uglify模块用来压缩JavaScript

grunt-contrib-clean模块用来清除临时目录

 

b. Gruntfile.js

module.exports =  function (grunt){

     grunt.initConfig({
          transport : {
               options : {
                    format :  'application/dist/{{filename}}'   //生成的id的格式
               },
               application : {
                    files : {
                         '.build'  : [ 'application.js' , 'util.js' ]    //将application.js、util.js合并且提取依赖，生成id，之后放在.build目录下
                    }
               }
          },
          concat : {
               main : {
                    options : {
                         relative :  true
                    },
                    files : {
                         'dist/application.js'  : [ '.build/application.js' ],   // 合并.build/application.js文件到dist/application.js中
                         'dist/application-debug.js'  : [ '.build/application-debug.js' ]
                    }
               }
          },
          uglify : {
               main : {
                    files : {
                         'dist/application.js'  : [ 'dist/application.js' ]  //对dist/application.js进行压缩，之后存入dist/application.js文件
                    }
               }
          },
          clean : {
               build : [ '.build' ]  //清除.build文件
          }
     });

     grunt.loadNpmTasks( 'grunt-cmd-transport' );
     grunt.loadNpmTasks( 'grunt-cmd-concat' );
     grunt.loadNpmTasks( 'grunt-contrib-uglify' );
     grunt.loadNpmTasks( 'grunt-contrib-clean' );

     grunt.registerTask( 'build' ,[ 'transport' , 'concat' , 'uglify' , 'clean' ])
};

 

定义好两个文件之后，就可以进入到application目录下，首先运行：

npm install

该命令会下载好package.json中依赖的模块

然后运行

grunt build

该命令会运行grunt.registerTask方法中指定的任务

 

不出差错的话，会在application目录下生成一个dist目录，里面包含了合并但没压缩的application-debug.js和合并且压缩好的application.js。

修改index.html的

<script src="assets/scripts/seajs/sea.js" id="seajsnode" data-main="application/application"></script>

为

<script src="assets/scripts/seajs/sea.js" id="seajsnode" data-main="application/dist/application"></script>

大功告成！

 

 

 

8、总结展望

 

SeaJS秉着简单实用的原则，API设计职责单一，使用起来得心应手。

SeaJS为前端提供了模块化能力，可以简单优雅的解决命名冲突、依赖关系等常见且棘手的问题。通过使用SeaJS，我的生活质量一下次上升好几个档次。

当然，除了本文介绍的，SeaJS还有一些其他功能，相信只要你入了门，肯定能够迅速掌握，这里给个链接 http://seajs.org/docs/#docs

其实，许多语言自身已经有了模块化的功能，如Java的import，C++的#include等，但是由于各种原因，JavaScript自身并没有这个功能。虽然借助于SeaJS可以很方便的进行模块化开发了，但总觉得这个能力应该是语言自身的。好在，下个版本的JavaScript貌似在计划引入模块化的概念，让我们拭目以待吧！

 

 

 

最后，感谢SeaJS作者玉伯。

 

 

PS，本文参考了SeaJS提供的使用范例https://github.com/seajs/examples/tree/master/static/hello

感谢品牌蚂蚁网络。