sea.js常用的api简易文档


Posted in Javascript onNovember 15, 2016

本文罗列了seajs常用的api和代码示例,下面话不多说,来看看详细的介绍,有需要的朋友们可以参考借鉴。

一、seajs.config

alias

别名配置,配置之后可在模块中使用require调用 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 变量来配置。

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配置项,可以在普通模块加载前,提前加载并初始化好指定模块。

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 放在合适的路径往往更简单一致。

charse

获取模块文件时,<script> 或 <link> 标签的charset属性。 默认是utf-8 charset还可以是一个函数:

seajs.config({
 charset: function(url) {
  // xxx 目录下的文件用 gbk 编码加载
  if (url.indexOf('http://example.com/js/xxx') === 0) {
   return 'gbk';
  }
  // 其他文件用 utf-8 编码
  return 'utf-8';
 }
});

二、seajs.use

用来在页面中加载一个或多个模块。seajs.use(id, callback?)

// 加载一个模块
seajs.use('./a');
// 加载一个模块,在加载完成时,执行回调
seajs.use('./a', function(a) {
 a.doSomething();
});
// 加载多个模块,在加载完成时,执行回调
seajs.use(['./a', './b'], function(a, b) {
 a.doSomething();
 b.doSomething();
});

注意:seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行,需要使用 jquery 等类库来保证。比如

seajs.use(['jquery', './main'], function($, main) {
 $(document).ready(function() {
  main.init();
 });
});

注意:use方法第一个参数一定要有,但是可以是null,也可以是一个变量

var bootstrap = ['bootstrap.css', 'bootstrap-responsive.css', 'bootstrap.js'];
seajs.use(bootstrap, function() {
 //do something
});

三、seajs.cache

通过 seajs.cache,可以查阅当前模块系统中的所有模块信息。

比如,打开 seajs.org,然后在 WebKit Developer Tools 的 Console 面板中输入 seajs.cache,可以看到:

Object
 > http://seajs.org/docs/assets/main.js: x
 > https://a.alipayobjects.com/jquery/jquery/1.10.1/jquery.js: x
 > __proto__: Object

这些就是文档首页用到的模块。展开某一项可以看到模块的具体信息,含义可参考:CMD 模块定义规范 中的 module 小节。

四、seajs.reslove

类似require.resolve,会利用模块系统的内部机制对传入的字符串参数进行路径解析。

seajs.resolve('jquery');
// => http://path/to/jquery.js
seajs.resolve('./a', 'http://example.com/to/b.js');
// => http://example.com/to/a.js

seajs.resolve 方法不光可以用来调试路径解析是否正确,还可以用在插件开发环境中。

五、seajs.data

通过 seajs.data,可以查看 seajs 所有配置以及一些内部变量的值,可用于插件开发。当加载遇到问题时,也可用于调试。

六、常见问题

关于模块标识

Seajs模块标识主要以小驼峰字符串、.或..

// 在 http://example.com/js/a.js 的 factory 中:
require.resolve('./b');
 // => http://example.com/js/b.js
// 在 http://example.com/js/a.js 的 factory 中:
require.resolve('../c');
 // => http://example.com/c.js

分为 相对 与 顶级 标识。以.或..开头,则为相对标识 。以小驼峰字符串开关,则为顶级标识。

// 假设 base 路径是:http://www.aseoe.com/assets/
// 在模块代码里:
require.resolve('gallery/jquery/1.9.1/jquery');
 // => http://www.aseoe.com/assets/gallery/jquery/1.9.1/jquery.js

//sea.js的路径,即 base 路径,相对于当前页面
<script src="../actjs/assets/sea-modules/seajs/2.1.1/sj.js"></script>
<script type="text/javascript">
//配置Seajs
seajs.config({
 alias: {
  //顶级标识,基于 base 路径
  'actjs': 'actjs/core/0.0.7/core.js',
   // => http://
  'position': 'actjs/util/0.0.2/position.js'
 }
});
seajs.config({
 alias: {
  //普通路径,相对于当前页面
  'affix': '../../actjs/assets/widget/src/widget-affix.js',
  //相对标识,相对于当前页面
  'init': './src/init.js'
 }
});
</script>

关于路径

Seajs除了相对与顶级标识之外,还可以使用普通路径来加载模块。

就到当前页面的脚本分析

开始的时候会觉得Seajs的路径有点不习惯,由其是Base路径。切记Base路径就是sea.js的那个文件的上级路径,然后所有顶级标识,相对标识都是相对于这个Base来调整。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作带来一定的帮助如果有疑问大家可以留言交流。

Javascript 相关文章推荐
表格单元格交错着色实现思路及代码
Apr 01 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
js实现倒计时及时间对象
Nov 15 #Javascript
Bootstrap简单表单显示学习笔记
Nov 15 #Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 #Javascript
js调用屏幕宽度的简单方法
Nov 14 #Javascript
jquery心形点赞关注效果的简单实现
Nov 14 #Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 #Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 #Javascript
You might like
php通用防注入程序 推荐
2011/02/26 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
Python 条件判断的缩写方法
2008/09/06 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
Python中如何导入类示例详解
2019/04/17 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
python Tensor和Array对比分析
2020/01/08 Python
个人自荐书
2013/12/20 职场文书
社区反邪教工作方案
2014/06/16 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
2019个人工作总结
2019/06/21 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
MySQL详细讲解变量variables的用法
2022/06/21 MySQL
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers