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

从零开始学习SeaJS入门教程之使用SeaJS第二部分详解

时间:2026-06-10 06:55
使用Sea js时,先下载sea js文件。通过require加载模块,路径必须为字符串字面量。require async实现按需加载。seajs config可配置base、alias等。与jQuery等库需封装为define模块。打包部署可借助spm或自写脚本完成。

下载及安装

SeaJS入门教程系列之使用SeaJS(二)

要在项目中使用SeaJS,其实就一步:下载sea.js文件,然后扔到你项目的某个目录里。
SeaJS托管在GitHub上,项目主页是 https://github.com/seajs/seajs/ 。从它的build目录下可以找到两个版本:sea.js(压缩版)和sea-debug.js(未压缩版)。
下载后放到项目合适的位置,页面里用

这种写法让HTML更简洁。

require

require 是SeaJS主要的模块加载方法。在一个模块里需要用到其他模块时,一般用它加载:
var m = require('/path/to/module/file');

简要说说SeaJS的自动加载机制:页面引入sea.js后,SeaJS会先下载入口模块,然后通过正则表达式匹配代码中所有的require,根据标识下载对应的js文件,并迭代处理。整个过程类似图的遍历(因为可能存在交叉循环依赖,依赖结构是个图而不是树)。
明白了这一点,下一条规则就很好理解了:传给require的路径标识必须是字符串字面量,不能是表达式。比如下面这样是错误的:

复制代码 代码如下:

require('module' + '1'); require('Module'.toLowerCase());

这会妨碍SeaJS的正则匹配,导致无法正确下载js文件。

require.async

SeaJS默认在页面打开时通过静态分析一次性加载所有需要的js文件。如果想让某个js文件用到时才下载,可以用 require.async

复制代码 代码如下:

require.async('/path/to/module/file', function(m) { //code of callback... });

这样只有在用到这个模块时,对应的js文件才会下载,实现了按需加载。

SeaJS的全局配置
SeaJS提供了 seajs.config 方法设置全局配置,接收一个配置对象。用法如下:

复制代码 代码如下:

seajs.config({ base: 'path/to/jslib/', alias: { 'app': 'path/to/app/' }, charset: 'utf-8', timeout: 20000, debug: false });

base 表示基址路径。比如base设为 https://example.com/js/3-party/,那么 var $ = require('jquery'); 会加载 https://example.com/js/3-party/jquery.js
alias 可以对较长的常用路径设置缩写。
charset 表示下载js时script标签的charset属性。
timeout 表示下载文件的最大时长,单位毫秒。
debug 表示是否工作在调试模式下。

SeaJS如何与现有JS库配合使用

要把jQuery等现有库与SeaJS一起用,只需按照SeaJS的模块定义规则封装一下。比如jQuery的封装:

复制代码 代码如下:

define(function() { //{{{jQuery原有代码开始 /*! * jQuery Ja vaScript Library v1.6.1 * https://jquery.com/ * * Copyright 2011, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * https://jquery.org/license * * Includes Sizzle.js * https://sizzlejs.com/ * Copyright 2011, The Dojo Foundation * Released under the MIT, BSD, and GPL Licenses. * * Date: Thu May 12 15:04:36 2011 -0400 */ //... //}}}jQuery原有代码结束 return $.noConflict(); });

SeaJS项目的打包部署

SeaJS原本集成了打包部署工具spm,后来作者为了更轻量,把spm拆成了独立项目。spm的核心思想是:将所有模块的代码合并压缩后并入入口模块。利用SeaJS本身的特性,HTML无需任何改动就能方便地在开发环境和生产环境间切换。不过spm目前还没有正式版本,这里就不详细展开了,感兴趣的朋友可以看看它的GitHub项目主页 https://github.com/seajs/spm/ 。
其实,每个项目用的JS合并压缩工具不尽相同,spm不一定完全适用。在理解SeaJS的原理之后,完全可以自己写一个符合项目特征的打包脚本。

来源:https://www.jb51.net/article/47507.htm
上一篇SeaJS入门教程系列第一篇:基础知识与全面介绍 下一篇SeaJS入门教程第三篇:完整示例详解
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

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

同类最新

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

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