seaJs学习笔记之seaJs配置方法

来源：互联网发布：淘宝关键词挖掘大师编辑：程序博客网时间：2024/05/18 03:49

　　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>

　　路径转换的配置的加载情况

　　seaJs学习笔记之seaJs配置方法就为大家介绍到这里，希望能对大家在seaJs或者javascript模块化的学习上有所帮助。感谢大家一直对梦龙小站的支持。