Sea.js - A Module Loader for the Web

Loading ...

提供简单、极致的模块化开发体验

A Module Loader for the Web

5 分钟上手 Sea.js 享受编码的乐趣

为什么使用 Sea.js ？

Sea.js 追求简单、自然的代码书写和组织方式，具有以下核心特性：

简单友好的模块定义规范：Sea.js 遵循 CMD 规范，可以像 Node.js 一般书写模块代码。
自然直观的代码组织方式：依赖的自动加载、配置的简洁清晰，可以让我们更多地享受编码的乐趣。

Sea.js 还提供常用插件，非常有助于开发调试和性能优化，并具有丰富的可扩展接口。

兼容性

Sea.js 具备完善的测试用例，兼容所有主流浏览器：

Chrome 3+         ✔
Firefox 2+        ✔
Safari 3.2+       ✔
Opera 10+         ✔
IE 5.5+           ✔

Sea.js 可运行在 Mobile 端，包括 Hybrid 模式的 App 上。理论上，Sea.js 可以运行在任何浏览器引擎上。

使用 Sea.js 的产品

感谢以下公司、产品对 Sea.js 的信赖与支持：

Sea.js 遵循 MIT 协议，无论个人还是公司，都可以免费自由使用。

5 分钟上手 Sea.js

这是个小游戏，调皮的字母来自神秘的大海深处。当鼠标轻轻滑过时，字母会旋转到正确位置。
注意：该例子仅在高级浏览器下有效，推荐用 Chrome 浏览。
来试试吧，看能否让所有字母都听话……

下面花 5 分钟时间，来看看这个小项目如何实现。

目录结构

所有源码都存放在 GitHub 上：seajs/examples，目录结构为：

examples/
  |-- sea-modules      存放 seajs、jquery 等文件，这也是模块的部署目录
  |-- static           存放各个项目的 js、css 文件
  |     |-- hello
  |     |-- lucky
  |     `-- todo
  `-- app              存放 html 等文件
        |-- hello.html
        |-- lucky.html
        `-- todo.html

我们从 hello.html 入手，来瞧瞧使用 Sea.js 如何组织代码。

在页面中加载模块

在 hello.html 页尾，通过 script 引入 sea.js 后，有一段配置代码：

// seajs 的简单配置
seajs.config({
  base: "../sea-modules/",
  alias: {
    "jquery": "jquery/jquery/1.10.1/jquery.js"
  }
})

// 加载入口模块
seajs.use("../static/hello/src/main")

sea.js 在下载完成后，会自动加载入口模块。页面中的代码就这么简单。

模块代码

这个小游戏有两个模块 spinning.js 和 main.js，遵循统一的写法：

// 所有模块都通过 define 来定义
define(function(require, exports, module) {

  // 通过 require 引入依赖
  var $ = require('jquery');
  var Spinning = require('./spinning');

  // 通过 exports 对外提供接口
  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});

上面就是 Sea.js 推荐的 CMD 模块书写格式。如果你有使用过 Node.js，一切都很自然。

构建部署

对于正式项目，在发布上线前，还需要对源码进行压缩、合并等操作。
这可以通过 spm 或 Grunt 等工具来实现。简明教程请参考：构建工具

结束语

怎么样，Sea.js 入门真的只需 5 分钟吧：）

使用 Sea.js，可以规范模块的书写格式、能自动处理模块的依赖，还非常有助于代码组织、开发调试和性能优化。Sea.js 期待能给你提供简单、极致的模块化开发体验。我相信，你会爱上她的。

若喜欢，可查看更多例子：seajs/examples
若已爱上，请继续阅读：使用文档

有任何疑问，欢迎交流：社区

使用文档

这是 Sea.js 的官方文档。
基础文档推荐按顺序阅读，后续文档可根据兴趣选读。
阅读过程中有任何疑问，欢迎到社区交流。

入门

基础

插件

进阶

探讨

社区

Sea.js 崇尚开放、自由，非常欢迎大家的参与。
你的加入，会让世界更美好。

关于

Sea.js 是一个开源项目，目前由阿里、腾讯等公司共同维护。
理念是：海纳百川、有容乃大。Sea.js 期望能成为海，开放而自由。

特别感谢家人、朋友们的支持。一路有伴，Sea.js 才越做越好。

如果有梦，欢迎资助模块生态圈 spmjs.io

感谢、感恩。

下载

所有版本的 zip 包请在这里下载：seajs/releases
解压后，目录说明如下：

dist      -- sea.js 等压缩好的文件，直接可用
docs      -- 使用文档
lib       -- 给 Node.js 用的版本
src       -- 源码
tests     -- 测试集
Makefile  -- 可执行构建、测试等命令

推荐使用 spm 安装：

$ npm install spm -g
$ spm install seajs