seaJs学习笔记之seaJs配置方法

seaJs在之前已经为大家介绍了很多,今天为大家介绍一下seaJs配置参数的方法。我们可以配置根目录,可以指定模块名字等。很多比较实用的配制方法,今天将为大家揭晓。

 

  alias 简化标识

 

当模块标识很长时,可以使用 alias 来简化。使用 alias,可以让文件的真实路径与调用标识分开,有利于统一维护。

 

  简化标识的配置mainConfigAlias.js的javascript代码

 

[javascript][/javascript] view plaincopyprint?

  1. /*配置模块——标识简化*/
  2. seajs.config({
  3.   alias: {
  4.     ‘jquery’: ‘http://www.leemagnum.com/js/jquery-1.8.2.js’,
  5.     ‘less’: ‘http://www.leemagnum.com/js/less-1.4.2.min.js’,
  6.   }
  7. });
  8. define(function(require, exports, module) {
  9.    var $ = require(‘jquery’);
  10.      //=> 加载的是 http://www.leemagnum.com/js/jquery-1.8.2.js
  11.    var biz = require(‘less’);
  12.      //=> 加载的是 http://www.leemagnum.com/js/less-1.4.2.min.js
  13. });

 

 

  简化标识的配置的HTML代码

 

[html][/html] view plaincopyprint?

  1. <!doctype html>
  2. <html dir=”ltr” lang=”zh-CN”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>梦龙小站</title>
  6. <!– 引入seaJs –>
  7. <script type=”text/javascript” src=”sea/sea.js”></script>
  8. <!– 引入主程序 –>
  9. <script type=”text/javascript”>
  10. seajs.use(“./js/mainConfigAlias.js”)
  11. </script>
  12. </head>
  13. <body></body>
  14. </html>

 

 

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

seaJs学习笔记之seaJs配置方法

 

 

  paths 目录简化

 

 

当目录比较深,或需要跨目录调用模块时,可以使用 paths 来简化书写。paths 配置可以结合 alias 配置一起使用,让模块引用非常方便。

 

  目录简化的配置mainConfigPaths.js的javascript代码

 

[javascript][/javascript] view plaincopyprint?

  1. /*配置模块——目录简化*/
  2. seajs.config({
  3.   paths: {
  4.     ‘jquery’: ‘http://www.leemagnum.com/js’,
  5.     ‘js’: ‘.’,
  6.   }
  7. });
  8. define(function(require, exports, module) {
  9.    var underscore = require(‘jquery/jquery-1.8.2’);
  10.      //=> 加载的是 http://www.leemagnum.com/js/jquery-1.8.2.js
  11.    var biz = require(‘js/mainConfigPaths2’);
  12.      //=> 加载的是 js/mainConfigPaths2.js
  13. });

 

 

  目录简化的配置的HTML代码

 

[javascript][/javascript] view plaincopyprint?

  1. <!doctype html>
  2. <html dir=”ltr” lang=”zh-CN”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>梦龙小站</title>
  6. <!– 引入seaJs –>
  7. <script type=”text/javascript” src=”sea/sea.js”></script>
  8. <!– 引入主程序 –>
  9. <script type=”text/javascript”>
  10. seajs.use(“./js/mainConfigPaths.js”)
  11. </script>
  12. </head>
  13. <body></body>
  14. </html>

 

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

seaJs学习笔记之seaJs配置方法

 

 

  vars 配置模块标识中的变量值

 

 

有些场景下,模块路径在运行时才能确定,这时可以使用 vars 变量来配置。vars 配置的是模块标识中的变量值,在模块标识中用 {key} 来表示变量。

 

  配置变量值的配置mainConfigVar.js的javascript代码

 

[javascript][/javascript] view plaincopyprint?

  1. /*配置模块——配置模块标识中的变量值*/
  2. seajs.config({
  3.     paths: {
  4.         ‘jquery’: ‘http://www.leemagnum.com/js’,
  5.         ‘js’: ‘.’,
  6.     },
  7.     vars: {
  8.         ‘jquery’: ‘jquery-1.8.2’
  9.     }
  10. });
  11. define(function(require, exports, module) {
  12.   var lang = require(‘jquery/{jquery}’);
  13.      //=> 加载的是  http://www.leemagnum.com/js/jquery-1.8.2.js
  14. });

 

 

  配置变量值的配置的HTML代码

 

[html][/html] view plaincopyprint?

  1. <!doctype html>
  2. <html dir=”ltr” lang=”zh-CN”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>梦龙小站</title>
  6. <!– 引入seaJs –>
  7. <script type=”text/javascript” src=”sea/sea.js”></script>
  8. <!– 引入主程序 –>
  9. <script type=”text/javascript”>
  10. seajs.use(“./js/mainConfigVar.js”)
  11. </script>
  12. </head>
  13. <body></body>
  14. </html>

 

 

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

seaJs学习笔记之seaJs配置方法

 

 

  map 路径转换

 

 

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

 

  路径转换的配置mainConfigMap.js的javascript代码

 

[javascript][/javascript] view plaincopyprint?

  1. /*配置模块——路径转换*/
  2. seajs.config({
  3.   map: [
  4.     [ ‘.js’, ‘-debug.js’ ]
  5.   ]
  6. });
  7. define(function(require, exports, module) {
  8.   var a = require(‘./a’);
  9.      //=> 加载的是 http://localhost/seaJs/k/ex/js/a-debug.js
  10. });

 

 

  路径转换的配置的HTML代码

 

[html][/html] view plaincopyprint?

  1. <!doctype html>
  2. <html dir=”ltr” lang=”zh-CN”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>梦龙小站</title>
  6. <!– 引入seaJs –>
  7. <script type=”text/javascript” src=”sea/sea.js”></script>
  8. <!– 引入主程序 –>
  9. <script type=”text/javascript”>
  10. seajs.use(“./js/mainConfigMap.js”)
  11. </script>
  12. </head>
  13. <body></body>
  14. </html>

 

 

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

seaJs学习笔记之seaJs配置方法

 

 

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

标签