seaJs学习笔记之seaJs配置方法

旧城等待， 2022-09-18 00:54 179阅读 0赞

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>
    
    <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配置方法][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>
    
    <script type="text/javascript" src="sea/sea.js"></script>
    
    <script type="text/javascript">
    seajs.use("./js/mainConfigPaths.js")
    </script>
    </head>
    <body></body>
    </html>

## 　　目录简化的配置的加载情况 ##

![seaJs学习笔记之seaJs配置方法][seaJs_seaJs 1]

# 　　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>
    
    <script type="text/javascript" src="sea/sea.js"></script>
    
    <script type="text/javascript">
    seajs.use("./js/mainConfigVar.js")
    </script>
    </head>
    <body></body>
    </html>

## 　　配置变量值的配置的加载情况 ##

![seaJs学习笔记之seaJs配置方法][seaJs_seaJs 2]

# 　　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>
    
    <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_seaJs 3]

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

[seaJs_seaJs]: /images/20220828/b1092c3c520a42dd85647f8914a85829.png
[seaJs_seaJs 1]: /images/20220828/315038a3bff44478b47a67a9e0dd1399.png
[seaJs_seaJs 2]: /images/20220828/88679c0e054941a7a750e0505000b8a9.png
[seaJs_seaJs 3]: /images/20220828/1b6c6656250840f7b3a98f13b57f889b.png