seaJs学习笔记之seaJs配置方法

最新推荐文章于 2018-06-28 17:12:43 发布

云圣天

最新推荐文章于 2018-06-28 17:12:43 发布

阅读量3.1k

点赞数 1

分类专栏： seaJs学习笔记 seaJs学习笔记文章标签： seaJs seaJs学习笔记 seaJs配置方法 javascript javascript模块化

本文链接：https://blog.csdn.net/lee_magnum/article/details/13623177

版权

seaJs学习笔记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

seaJs学习笔记

11 篇文章 5 订阅

订阅专栏

　　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>

　　简化标识的配置的加载情况

seaJs学习笔记之seaJs配置方法

　　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>