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

Sea.js模块加载器常用API快速实用简易文档速查手册

时间:2026-06-10 06:57
Sea js常用API包括seajs config的alias、paths、vars、map、preload、debug、base、charset等配置,支持模块别名、路径映射、变量替换和预加载。顶级标识相对base路径解析,base默认为sea js所在目录的上级路径。

Sea.js 的 API 其实并不复杂,但日常开发中真正高频用到的,翻来覆去也就那么几个核心配置和调用方式。下面直接整理一份常用 API 清单,配合代码示例,方便随时查阅。

sea.js常用的api简易文档

一、seajs.config

alias
别名配置,配置之后可在模块中使用 require('jquery') 直接调用。

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

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

seajs.config({
 //设置路径
 paths: {
  'gallery': 'https://a.alipayobjects.com/gallery'
 },
 // 设置别名,方便调用
 alias: {
  'underscore': 'gallery/underscore'
 }
});

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
对模块路径进行映射修改,常用于路径转换或在线调试。比如把 .js 替换成 -debug.js

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

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

// 在老浏览器中,提前加载好 ES5 和 json 模块
seajs.config({
 preload: [
  Function.prototype.bind ? '' : 'es5-safe',
  this.JSON ? '' : 'json'
 ]
});

需要注意:preload 中的配置需要等到 use 时才真正加载。例如:

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

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

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

charset
获取模块文件时,

关于路径
除了相对标识和顶级标识,Sea.js 也支持使用普通路径来加载模块。刚开始接触 Sea.js 时,可能会觉得路径规则有点绕,尤其是 base 路径。记住一点就好:base 路径就是 sea.js 文件所在目录的上级路径,所有顶级标识和相对标识都是基于这个 base 来计算的。

总结

以上就是 Sea.js 常用 API 的完整梳理。配置项、use 方法、缓存查看、路径解析——把这些掌握好,日常开发基本够用。如果后续遇到更复杂的场景,再针对具体需求深入即可。

来源:https://www.jb51.net/article/97308.htm
上一篇SeaJS模块依赖加载与模块执行流程 下一篇深入分析Sea.js中module.exports和exports的区别与联系及常见错误总结
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

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

同类最新

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

更多
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内绑定事件或使用