配置

可以对 Sea.js 进行配置,让模块编写、开发调试更方便。


seajs.config seajs.config(options)

用来进行配置的方法。

seajs.config({

  // 别名配置
alias: {
'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
'json': 'gallery/json/1.0.2/json',
'jquery': 'jquery/jquery/1.10.1/jquery'
}, // 路径配置
paths: {
'gallery': 'https://a.alipayobjects.com/gallery'
}, // 变量配置
vars: {
'locale': 'zh-cn'
}, // 映射配置
map: [
['http://example.com/js/app/', 'http://localhost/js/app/']
], // 预加载项
preload: [
Function.prototype.bind ? '' : 'es5-safe',
this.JSON ? '' : 'json'
], // 调试模式
debug: true, // Sea.js 的基础路径
base: 'http://example.com/path/to/base/', // 文件编码
charset: 'utf-8'
});

支持以下配置选项:

alias Object

当模块标识很长时,可以使用 alias 来简化。

seajs.config({
alias: {
'jquery': 'jquery/jquery/1.10.1/jquery',
'app/biz': 'http://path/to/app/biz.js',
}
});
define(function(require, exports, module) {

   var $ = require('jquery');
//=> 加载的是 http://path/to/base/jquery/jquery/1.10.1/jquery.js var biz = require('app/biz');
//=> 加载的是 http://path/to/app/biz.js });

使用 alias,可以让文件的真实路径与调用标识分开,有利于统一维护。

paths Object

当目录比较深,或需要跨目录调用模块时,可以使用 paths 来简化书写。

seajs.config({
paths: {
'gallery': 'https://a.alipayobjects.com/gallery',
'app': 'path/to/app',
}
});
define(function(require, exports, module) {

   var underscore = require('gallery/underscore');
//=> 加载的是 https://a.alipayobjects.com/gallery/underscore.js var biz = require('app/biz');
//=> 加载的是 path/to/app/biz.js });

paths 配置可以结合 alias 配置一起使用,让模块引用非常方便。

vars Object

有些场景下,模块路径在运行时才能确定,这时可以使用 vars 变量来配置。

seajs.config({
vars: {
'locale': 'zh-cn'
}
});
define(function(require, exports, module) {

  var lang = require('./i18n/{locale}.js');
//=> 加载的是 path/to/i18n/zh-cn.js });

vars 配置的是模块标识中的变量值,在模块标识中用 {key} 来表示变量。

map Array

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

seajs.config({
map: [
[ '.js', '-debug.js' ]
]
});
define(function(require, exports, module) {

  var a = require('./a');
//=> 加载的是 path/to/a-debug.js });

更多用法可参考:调试实践

preload Array

使用 preload 配置项,可以在普通模块加载前,提前加载并初始化好指定模块。

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

preload 中的空字符串会被忽略掉。

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

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

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

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

debug Boolean

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

base String

Sea.js 在解析顶级标识时,会相对 base 路径来解析。详情请参阅 模块标识

注意:一般请不要配置 base 路径,把 sea.js 放在合适的路径往往更简单一致。

charset String | Function

获取模块文件时,<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.config 可以多次运行,每次运行时,会对配置项进行合并操作:

seajs.config({
alias: {
'jquery': 'path/to/jquery.js',
'a': 'path/to/a.js'
},
preload: ['seajs-text']
});
seajs.config({
alias: {
'underscore': 'path/to/underscore.js',
'a': 'path/to/biz/a.js'
},
preload: ['seajs-combo']
});

上面两处 config 运行的结果是:

 alias = {
'jquery': 'path/to/jquery.js',
'underscore': 'path/to/underscore.js',
'a': 'path/to/biz/a.js'
}; preload = ['seajs-text', 'seajs-combo'];

即:config 会自动合并不存在的项,对存在的项则进行覆盖。

插件的配置

插件可以给 Sea.js 添加配置项,请查看具体插件了解相关配置。

配置文件

配置可以直接写在 html 页面上,也可以独立出来成为一个文件。

config.js

seajs.config({
...
});

独立成一个文件时,一般通过 script 标签在页面中同步引入。


常用的配置项是 aliaspathsbase,其他配置项有需要时,来查查文档就会用了。

对 Sea.js 进行配置 seajs.config的更多相关文章

  1. 对 Sea.js 进行配置(一) seajs.config

    可以对 Sea.js 进行配置,让模块编写.开发调试更方便. seajs.config seajs.config(options) 用来进行配置的方法. seajs.config({ // 别名配置 ...

  2. Sea.js学习4——Sea.js的配置

    可以对 Sea.js 进行配置,让模块编写.开发调试更方便. seajs.config seajs.config(options) 用来进行配置的方法. seajs.config({ // 别名配置 ...

  3. sea.js 个人入门

    玉伯 : http://seajs.org/docs/ 说这两个JS 必须提到AMD.commonjs两种不同的规范: 奇舞团:http://www.75team.com/archives/882 知 ...

  4. 坑人的 Javascript 模块化编程 sea.js

    坑人的 Javascript 模块化编程 sea.js 忧伤 加 蛋疼的 开始了 看文档 Sea.js 进行配置 seajs.config({ // 设置路径,方便跨目录调用 paths: { 'ar ...

  5. Sea.js入门

    本文只是seajs的入门贴.要详细了解,请看GitHub主页上的相关链接,精彩不断,精选几篇: 前端模块化开发的价值 前端模块化开发的历史 ID和路径匹配原则 与RequireJS的异同 模块的加载启 ...

  6. Seajs是什么及sea.js 由来,特点以及优势

    Seajs是什么及sea.js 由来,特点以及优势 这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享   1 ...

  7. 记录:sea.js和require.js配置 与 性能对比

    最近有点忙,很久无写博客,记录一下之前的配置require.js和sea.js的配置.(有误有望提出 require.js 文件目录 /app(项目使用js) /lib(require.js jq存放 ...

  8. webpack配置之webpack.config.js文件配置

    webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve  1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...

  9. sea.js 入门

    上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...

随机推荐

  1. Timeout expired. The timeout period elapsed prior to completion of the operation or the server is not responding.【转】

    今天碰到了一个查询异常问题,上网查了一下,感谢原创和译者 如果你使用的数据库连接类是 the Data Access Application Blocks "SqlHelper" ...

  2. 在Asp.net WebAPI使用Session

    最近在改写WebApp时要将以前用泛型处理例程写的Captcha 改成使用WebApi 来实作机制,在实作的过程中发现使用IRequiresSessionState session也无法使用(cont ...

  3. 转载:erlang实现安卓和IOS的推送。

    erlang-百度云推送Android服务端功能实现-erlang erlang -- ios apns provider -- erlang 实现 转自:http://www.cnblogs.com ...

  4. AOP (面向切面编程)

    AOP (面向切面编程) 留个参考的地址,还没看呢:http://www.cnblogs.com/zhaolb/p/4875167.html

  5. 7款效果惊人的HTML5/CSS3应用

    今天是周末,我为大家收集7个比较经典的HTML5/CSS3应用,每一个都提供源代码,效果非常惊人. 1.CSS3/jQuery创意盒子动画菜单 作为前端开发者,各种各样的jQuery菜单见过不少,这款 ...

  6. glsl boom

    原理: 1.渲染场景到fbo 2.对fbo进行高斯横向,纵向模糊,到新的fbo 3.对两张图进行叠加 模糊后的 效果就这样 给数据加大 <-vertex-> #version varyin ...

  7. AsmTools

    前言 https://wiki.openjdk.java.net/display/CodeTools/asmtools 在OpenJDK里有一个AsmTools项目,用来生成正确的或者不正确的java ...

  8. 利用neon技术对矩阵旋转进行加速

    一般的矩阵旋转操作都是对矩阵中的元素逐个操作,假设矩阵大小为m*n,那么时间复杂度就是o(mn).如果使用了arm公司提供的neon加速技术,则可以并行的读取多个元素,对多个元素进行操作,虽然时间复杂 ...

  9. VIM技巧:选择文本块

    在正常模式下(按ESC进入)按键v进入可视化模式,然后按键盘左右键或h,l键即可实现文本的选择.其它相关命令:v:按字符选择.经常使用的模式,所以亲自尝试一下它. V:按行选择.这在你想拷贝或者移动很 ...

  10. Android Material Design控件学习(二)——NavigationView的学习和使用

    前言 上次我们学习了TabLayout的用法,今天我们继续学习MaterialDesign(简称MD)控件--NavigationView. 正如其名,NavigationView,导航View.一般 ...