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 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
JavaScript入门学习书籍推荐
Jun 12 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
JS库之wow.js使用方法
Sep 14 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
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
pytorch 数据集图片显示方法
2018/07/26 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
教育学专业毕业生的自我评价
2013/11/21 职场文书
简单英文演讲稿
2014/01/01 职场文书
单位办理社保介绍信
2014/01/10 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
防火标语大全
2014/10/06 职场文书