seaJs在之前已经为大家介绍了很多,今天为大家介绍一下seaJs配置参数的方法。我们可以配置根目录,可以指定模块名字等。很多比较实用的配制方法,今天将为大家揭晓。
alias 简化标识
当模块标识很长时,可以使用 alias 来简化。使用 alias,可以让文件的真实路径与调用标识分开,有利于统一维护。
简化标识的配置mainConfigAlias.js的javascript代码
/*配置模块——标识简化*/
seajs.config({
alias: {
'jquery': 'http://www.leemagnum.com/js/jquery-1.8.2.js',
'less': 'http://www.leemagnum.com/js/less-1.4.2.min.js',
}
});
define(function(require, exports, module) {
var $ = require('jquery');
//=> 加载的是 http://www.leemagnum.com/js/jquery-1.8.2.js
var biz = require('less');
//=> 加载的是 http://www.leemagnum.com/js/less-1.4.2.min.js
});
简化标识的配置的HTML代码
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<!-- 引入seaJs -->
<script type="text/javascript" src="sea/sea.js"></script>
<!-- 引入主程序 -->
<script type="text/javascript">
seajs.use("./js/mainConfigAlias.js")
</script>
</head>
<body></body>
</html>
简化标识的配置的加载情况
paths 目录简化
当目录比较深,或需要跨目录调用模块时,可以使用 paths 来简化书写。paths 配置可以结合 alias 配置一起使用,让模块引用非常方便。
目录简化的配置mainConfigPaths.js的javascript代码
/*配置模块——目录简化*/
seajs.config({
paths: {
'jquery': 'http://www.leemagnum.com/js',
'js': '.',
}
});
define(function(require, exports, module) {
var underscore = require('jquery/jquery-1.8.2');
//=> 加载的是 http://www.leemagnum.com/js/jquery-1.8.2.js
var biz = require('js/mainConfigPaths2');
//=> 加载的是 js/mainConfigPaths2.js
});
目录简化的配置的HTML代码
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<!-- 引入seaJs -->
<script type="text/javascript" src="sea/sea.js"></script>
<!-- 引入主程序 -->
<script type="text/javascript">
seajs.use("./js/mainConfigPaths.js")
</script>
</head>
<body></body>
</html>
目录简化的配置的加载情况
vars 配置模块标识中的变量值
有些场景下,模块路径在运行时才能确定,这时可以使用 vars 变量来配置。vars 配置的是模块标识中的变量值,在模块标识中用 {key} 来表示变量。
配置变量值的配置mainConfigVar.js的javascript代码
/*配置模块——配置模块标识中的变量值*/
seajs.config({
paths: {
'jquery': 'http://www.leemagnum.com/js',
'js': '.',
},
vars: {
'jquery': 'jquery-1.8.2'
}
});
define(function(require, exports, module) {
var lang = require('jquery/{jquery}');
//=> 加载的是 http://www.leemagnum.com/js/jquery-1.8.2.js
});
配置变量值的配置的HTML代码
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<!-- 引入seaJs -->
<script type="text/javascript" src="sea/sea.js"></script>
<!-- 引入主程序 -->
<script type="text/javascript">
seajs.use("./js/mainConfigVar.js")
</script>
</head>
<body></body>
</html>
配置变量值的配置的加载情况
map 路径转换
该配置可对模块路径进行映射修改,可用于路径转换、在线调试等。
路径转换的配置mainConfigMap.js的javascript代码
/*配置模块——路径转换*/
seajs.config({
map: [
[ '.js', '-debug.js' ]
]
});
define(function(require, exports, module) {
var a = require('./a');
//=> 加载的是 http://localhost/seaJs/k/ex/js/a-debug.js
});
路径转换的配置的HTML代码
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<!-- 引入seaJs -->
<script type="text/javascript" src="sea/sea.js"></script>
<!-- 引入主程序 -->
<script type="text/javascript">
seajs.use("./js/mainConfigMap.js")
</script>
</head>
<body></body>
</html>
路径转换的配置的加载情况
seaJs学习笔记之seaJs配置方法就为大家介绍到这里,希望能对大家在seaJs或者javascript模块化的学习上有所帮助。感谢大家一直对梦龙小站的支持。