游乐游手机版
首页/前端开发/文章详情

Seajs简易文档 极致简单的模块化开发体验

时间:2026-06-10 06:57
Sea js是一套遵循CMD规范的模块化开发工具,追求简单自然的编码组织方式,支持依赖自动加载与简洁配置,兼容所有主流浏览器及移动端,提供alias、paths、vars、map、preload等多种配置项,助力开发调试与性能优化。

整理了一份 Sea.js 的文档速查,内容来自官方文档的文字和实例,方便日常翻阅。Sea.js 的目标很简单——给前端开发者提供一种极致的模块化开发体验,告别繁杂的全局变量和手工管理依赖。

Seajs 简易文档 提供简单、极致的模块化开发体验

为什么用 Sea.js?

Sea.js 追求简单、自然的编码组织方式,几个核心特性很吸引人:

• 简单友好的模块定义规范:遵循 CMD 规范,写模块代码就像写 Node.js 一样自然。
• 自然直观的代码组织:依赖自动加载、配置简洁清晰,可以更多地享受编码的乐趣。
• 还有常用插件,非常有助于开发调试和性能优化,并且有丰富的可扩展接口。

兼容性

Sea.js 测试用例很完善,兼容所有主流浏览器:

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

移动端同样没问题,包括 Hybrid 模式的 App。理论上,Sea.js 可以在任何浏览器引擎上运行。

seajs.config 配置项

alias

配置别名后,模块里就可以用 require('jquery') 这种简洁的方式调用了。

seajs.config({
  alias: { 'jquery': 'jquery/jquery/1.10.1/jquery' }
});
define(function(require, exports, module) {
  var $ = require('jquery');
});

paths

设置路径,方便跨目录调用。灵活设置 path 可以在不影响 base 的情况下指定到某个目录。

seajs.config({
  paths: {
    'gallery': 'https://a.alipayobjects.com/gallery'
  },
  alias: {
    'underscore': 'gallery/underscore'
  }
});
define(function(require, exports, module) {
  var _ = require('underscore');
  // → 加载的是 https://a.alipayobjects.com/gallery/underscore.js
});

vars

有些场景下模块路径在运行时才能确定,可以用 vars 变量来配置。模块标识中用 {key} 表示变量。

seajs.config({
  vars: { 'locale': 'zh-cn' }
});
define(function(require, exports, module) {
  var lang = require('./i18n/{locale}.js');
  // → 加载的是 path/to/i18n/zh-cn.js
});

map

这个配置可以对模块路径进行映射修改,常用于路径转换、在线调试等。

seajs.config({
  map: [ [ '.js', '-debug.js' ] ]
});
define(function(require, exports, module) {
  var a = require('./a');
  // → 加载的是 path/to/a-debug.js
});

preload

在普通模块加载前,提前加载并初始化好指定模块。preload 中的空字符串会被忽略。

seajs.config({
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ]
});

注意:preload 的配置要等到 use 时才加载。比如:

seajs.config({ preload: 'a' });
seajs.use('./b');  // 在加载 b 之前,会确保模块 a 已经加载并执行好

preload 配置不能放在模块文件里面:

seajs.config({ preload: 'a' });
define(function(require, exports) {
  // 此处执行时,不能保证模块 a 已经加载并执行好
});

debug

值为 true 时,加载器不会删除动态插入的 script 标签。插件也可以根据 debug 配置来决定 log 等信息的输出。

base

Sea.js 在解析顶级标识时会相对 base 路径来解析。一般不建议配置 base,把 sea.js 放在合适的路径往往更简单一致。

charset

获取模块文件时,

开始的时候可能会觉得 Sea.js 的路径有点不习惯,尤其是 base 路径。切记:base 路径就是 sea.js 文件所在目录的上级路径,所有顶级标识、相对标识都是相对于这个 base 来调整的。

来源:https://www.jb51.net/article/82374.htm
上一篇深入解析Seajs模块化与加载机制 下一篇Seajs是什么 sea.js的由来特点以及优势详细全面解析
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
HTML文档版权声明结构与基础脚手架代码质量解析
前端开发 · 2026-07-07

HTML文档版权声明结构与基础脚手架代码质量解析

版权声明需用语义化``标签,©符号使用`©`实体;年份通过服务端、构建或JS分层兜底;`rel= "license "`仅指向真实许可证文件才有效。

基于HTML模板的组件化全栈交互方案
前端开发 · 2026-07-07

基于HTML模板的组件化全栈交互方案

纯HTML模板仅作静态结构,全栈交互需后端注入数据、前端JS激活模板及用户事件触发双向链路。``标签惰性,不执行脚本或加载资源,需通过克隆填充数据并手动绑定事件实现交互,父子传值依赖JS对象与自定义事件。

Bootstrap修改Badge徽章边框为圆点样式的方法
前端开发 · 2026-07-07

Bootstrap修改Badge徽章边框为圆点样式的方法

将BootstrapBadge改为圆点:自定义类设置等宽高、border-radius:50%、padding:0、font-size:0;Bootstrap5 2+需加display:inline-block;注意垂直对齐,避免min-width干扰,背景色用background-color更可控。

Bootstrap响应式多栏Footer社交图标排版实现
前端开发 · 2026-07-07

Bootstrap响应式多栏Footer社交图标排版实现

使用Bootstrap5的grid系统实现响应式多栏Footer,按断点设置列宽;以FontAwesome处理社交图标,避免使用img;利用list-unstyled组织链接列表;借助flex-column容器配合mt-auto使版权行自动贴底,避免fixed-bottom固定定位的弊端。

如何用Shadow DOM隔离组件内外事件分发
前端开发 · 2026-07-07

如何用Shadow DOM隔离组件内外事件分发

ShadowDOM内部事件默认不穿透影子边界,需显式设置composed:true才能被外部监听。此时event target指向宿主元素,真实触发源需通过event composedPath()[0]获取。原生事件手动派发时也必须声明composed:true。应避免在宿主上依赖event target做逻辑分支,建议在shadowroot内绑定事件或使用