seajs教程之seajs学习笔记

作者：简简单单 2014-05-01

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啦

代码如下	复制代码

关于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即可，比如这里我们可以在