0x0 介绍
在前几年，前端界最火的莫过于jQuery，那是个插件纷飞的年代。而现在，CommonJS草案的提出，Node.js让JavaScript在服务端大展拳脚，前端界已经不是那个手持jQuery的小孩了。
在这个新的浪潮中，JavaScript模块化开发开始流行起来。CommonJS标准制定后，Node.js兴起，RequireJS使得JavaScript模块化在客户端齐头并进，ES6模块标准呼之欲出，涌现出了很多模块化的方案，兼容ES6也好，不兼容也罢；国内外相关的项目如雨后春笋边涌现出来，谁都有可能引领标准。这系列文章将记录我对sea.js的学习。
0x1 为什么用sea.js？
Sea.js 追求简单、自然的代码书写和组织方式，具有以下核心特性：
简单友好的模块定义规范：Sea.js 遵循 CMD 规范，可以像 Node.js 一般书写模块代码。 自然直观的代码组织方式：依赖的自动加载、配置的简洁清晰，可以让我们更多地享受编码的乐趣。 Sea.js 还提供常用插件，非常有助于开发调试和性能优化，并具有丰富的可扩展接口。
0x2 开始吧
首先去sea.js官网下载最新的文件http://seajs.org/docs/ 。 或者 。 下载之后看到目录结构： dist -- sea.js 等压缩好的文件，直接可用 docs -- 使用文档 lib -- 给 Node.js 用的版本 src -- 源码 tests -- 测试集 tools -- 压缩等工具，可查看 build.xml 得到源码合并顺序 Makefile -- 可执行构建、测试等命令
然后呢把之前下载的seajs文件里的seajs/dist中的文件都放在scripts/seajs主要就是sea.js.jquery.js以及应用的Js
接下来我们开始代码了，想想是不是都好激动呢
第一步当然是引入sea.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内部还有一种方式，不过另一种方式的效率比较低，所以不推荐，如果有兴趣，可以看一下源码 /blob/master/src/util-path.js）
第二步开始写自己应用的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); }); |
|
sea.js里所有的代码都放在define(function(require,exports,module){});函数体里面，define是SeaJS定义的一个全局函数，用来定义一个模块。 上面我们发现就是一个js文件，在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进来。现在基本上把上面那个一个模块分为两个模块了，记住，一个文件就是一个模块。
最后开始引入代码 这里要用到sea.js的模块加载启动，具体看这里/issues/260 。很简单使用seajs.use即可，比如这里我们可以在
| 代码如下 | 复制代码 |
|
<script src="assets/scripts/seajs/sea.js" id="seajsnode"> 后面加上： <script> seajs.use("application/application"); </script> |
|
嗯，到这里我们差不多就结束了可以看到我们可爱的hello world效果了，至于那些打包压缩的事下次再来学习吧。 具体的首页代码就是下面的了，自己再加上上面的Js代码去看看效果吧，(^__^) 嘻嘻……
| 代码如下 | 复制代码 |
|
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> <style type="text/css"> html,body,h1{padding:0px;margin:0px;font-size:18px;} #hello-seajs{ -webkit-transition:color 1.5s ease; -o-transition:color 1.5s ease; -moz-transition:color 1.5s ease; transition:color 1.5s ease; font-size:10em; text-align:center; } </style> </head> <body> <h1 id="hello-seajs"> Hello world </h1> <script src="scripts/seajs/sea.js" id="seajsnode"></script> <script> seajs.use("application/application"); </script> <script src="scripts/application/util.js"></script> <script src="scripts/application/application.js"></script> </body> </html> |
|