一步步学会使用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

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

 

解压后会看到下列目录:

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

 

其中:
dist —— 压缩好的、用于浏览器端的SeaJS代码
docs —— 文档
src —— 源代码
package.json + Gruntfile.js —— Grunt构建工具所需要的文件,这个在第七步压缩合并会介绍到
其他目录或文件可以暂且不管

 

 

 

3、建立工程和各种目录

 

准备工作已经完成,我们终于可以开始进行开发啦!来,跟我走:
a. 建立工程
用你最喜欢的IDE建立工程,名字为HelloSeaJS
b. 准备各种目录
在这里把JavaScript、Image、CSS都放在统一的资源文件(assets)中,建好之后的目录如下:

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

(我使用了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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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:

1
2
3
4
5
6
7
8
9
10
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 2.0【前端模块化|解决命名冲突和文件依赖关系】_第4张图片

我们看到,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既然将该目录视为一个模块,那么该模块当然可以依赖其他模块。
我们看本示例的:
1
2
3
4
5
6
7
8
9
10
11
12
{
      "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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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

感谢品牌蚂蚁网络。

你可能感兴趣的:(JavaScript,前端,模块化,seajs)