Seajs的配置
下载
在cmd命令窗口通过npm install saejs下载
seajs的npm下载指令查找方法如下
下载完成后，生成一个node_modules目录，seajs核心文件放在node_modules\seajs\dist下，如下图所示
引入seajs
新建index.html文件，将sea.js和index.html放在同一级目录
在index.html中通过script标签引入sea.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 引入sea.js -->
<script type="text/javascript" src="./sea.js"></script>
<script type="text/javascript">
console.log(seajs)
</script>
</body>
</html>seajs向外暴露了一个变量seajs,在上面代码中输出seajs
从控制台的输出可以看到，seajs是一个对象，有很多属性和方法,我们对其的配置，就是调用了里面的config()方法
config方法的源码seajs.config = function(configData) {
for (var key in configData) {
var curr = configData[key]
var prev = data[key]
// Merge object config such as alias, vars
if (prev && isObject(prev)) {
for (var k in curr) {
prev[k] = curr[k]
}
}
else {
// Concat array config such as map
if (isArray(prev)) {
curr = prev.concat(curr)
}
// Make sure that `data.base` is an absolute path
else if (key === "base") {
// Make sure end with "/"
if (curr.slice(-1) !== "/") {
curr += "/"
}
curr = addBase(curr)
}
// Set config
data[key] = curr
}
}
emit("config", configData)
return seajs
}从config方法的源码for (var key in configData)可知，config()方法的参数应该是一个对象，每一种配置项是一个属性（key:value,key是配置名称，value是配置结果），遍历config()方法的参数，并将每种配置的名称和结果放在seajs.data(也是一个对象)里面
标识符
seajs模块标识分为3种：相对标识、顶级标识和普通标识。
相对路径，以. 或 ..开头
顶级路径，不以.或 ..及斜线（/）开头
普通路径，除相对和顶级路径外的，比如/（根路径）开头的，"http://"、"https://"、"file:///" 等协议标识开头的
模块命名空间是seajs所在文件的根路径即所谓的base路径，去除了seajs/x.y.z 字串，也可以指定seajs.config({base:});
base配置
base配置项在不设置时，表示的是sea.js文件位置，因为seajs的配置结果存放在seajs.data中，在控制台输出seajs.data
本地电脑上sea.js文件位置
证明base就是sea.js文件所在的路径
在main.js中定义一个模块，并向外暴露//main.js
// 定义一个没有ID的模块
define(function(require,exports,module){
// 向外暴露
module.exports.name = '张三'
})在index.html文件中使用seajs.use()方法引入入口模块文件main.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 引入sea.js -->
<script type="text/javascript" src="./sea.js"></script>
<script type="text/javascript">
//引入入口模块
seajs.use('main',function(a){
console.log(a) //a为引入的入口文件内的模块向外暴露的对象
console.log('入口模块引入完毕')
})
</script>
</body>
</html>
注意看seajs.use()方法里面的第一个参数，"main"乍一看好像没问题，mian.js不就是和index.html在同一级目录吗，其实不然，这是顶级路径(不以.、..、/开头，直接以文件名或者文件夹名开头),是相对于sea.js的路径而言的，只是刚好这里sea.js和index.html在同一级目录，所以看起来像是相对于index.html,如果写成./main才是相对于index.html的路径而言
那我们尝试更改一下sea.js的位置，将sea.js放在和index.html同级目录的module文件夹下(E:\SeajsTest\module\),将main.js放在和index.html同级目录的module文件夹下的main文件夹中
因为sea.js和main.js的位置变了,此时sea.js的路径是E:\SeajsTest\module\seajs,引入sea.js后在控制台输出seajs.data验证
此时引入main.js时，如果使用顶级路径应该是main/main，或者写相对路径----./module/main/main,表示相对于index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 引入sea.js -->
<script type="text/javascript" src="./module/sea.js"></script>
<script type="text/javascript">
//引入入口模块
// 1、使用顶级标识符
seajs.use('main/main',function(a){
// 2、使用相对标识符
// seajs.use('./module/main/main',function(a){
console.log(a)
console.log('入口模块引入完毕')
})
</script>
</body>
</html>控制台输出
修改默认base<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 引入sea.js -->
<script type="text/javascript" src="./module/sea.js"></script>
<script type="text/javascript">
// 修改base
seajs.config({
base:'main/' //base:"./main"写法是错误，因为也遵循seajs标识符的规则，./main/表示和index.html同级的main目录下
})
//引入入口模块
// 1、使用顶级标识符
seajs.use('main',function(a){
// 2、使用相对标识符
// seajs.use('./module/main/main',function(a){
console.log(a)
console.log('入口模块引入完毕')
})
</script>
</body>
</html>如上所示，我将base修改为main/表示和sea.js同级的main目录下，即E:\SeajsTest\module\main,此处不能使用base:./main/，因为加上./就表示相对于index.html了，从下图中控制台输出的路径就可以看出来
alias（别名）配置
当模块标识很长，写起来不方便、容易出错的时候，可以使用alias来简化模块标识；还有一种情况当，我们引入一些基础库时，经常会涉及到版本升级（版本号发生改变），此时在每个模块中修改版本号比较麻烦，如果使用alias定义这个模块，只需在seajs的alias中修改一次即可。在seajs.config中进行一次配置之后，所有js模块都可以用require("jquery")这种简单的方式来加载对应的模块了。使用alias，可以让文件的真实路径与模块调用标识分开，有利于统一维文件目录如下
│ index.html
│ main.js
│ sea.js
└─ module
├─Jquery
│ Jquery1.12.4.js我在index.html中引入入口文件mian.js,然后在main.js中引入Jquery1.12.4.js
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 引入sea.js -->
<script type="text/javascript" src="./sea.js"></script>
<script type="text/javascript">
//引入入口文件
seajs.use('main',function(a){
console.log(a);
console.log('入口文件加载完毕')
})
</script>
</body>
</html>//main.js
// 定义一个没有ID的模块
define(function(require,exports,module){
//在入口模块中引入其他模块
var jq = require('module/Jquery/Jquery1.12.4')
// 向外暴露
module.exports.name = '张三';
module.exports.JQ = jq;
})上面的写法是我们没有配置alias时的写法，我现在觉得这个Jquery1.12.4.js的标识符太长，写起来太麻烦，此时就可以设置别名，注意这里的别名是针对某个文件（模块）的标识符，所以alias的值要带上路径(不是只给文件名设置别名)而且精确到文件,同样的，别名的设置也遵循seajs标识符规则
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 引入sea.js -->
<script type="text/javascript" src="./sea.js"></script>
<script type="text/javascript">
// 配置seajs
seajs.config({
alias:{
//顶级标识符写法
'JQ':"module/Jquery/Jquery1.12.4",
// 相对标识符写法
// 'JQ':"./module/Jquery/Jquery1.12.4"
}
})
//引入入口文件
seajs.use('main',function(a){
console.log(a);
console.log('入口文件加载完毕')
})
</script>
</body>
</html>//main.js
// 定义一个没有ID的模块
define(function(require,exports,module){
//在入口模块中引入其他模块
// 未配置alias时引入
// var jq = require('module/Jquery/Jquery1.12.4')
//配置alias后引入
var jq = require('JQ')
//上面的`JQ`是顶级标识符，等于base的值加上别名JQ代表的模块路径
// 向外暴露
module.exports.name = '张三';
module.exports.JQ = jq;
})这样一设置，写起来就简单多了，而且一次设置，所以地方都可以用
paths(路径)配置
当目录层次比较深，或者是跨目录调用模块的时候，可以用path简化模块标识的书写,path与alias不同的是，path针对的是某个文件夹。paths 配置可以结合 alias 配置一起使用，让模块引用非常方便。文件目录如下
│ index.html
│ main.js
│ sea.js
│
└─module
└─one
└─two
└─three
A.js
B.js还是老规矩，index.html中引入入口模文件块main.js,然后在main.js中在引入A.js和B.js,index.html内容还和上面一样，下面是main.js的代码
//main.js
// 定义一个没有ID的模块
define(function(require,exports,module){
//在入口模块中引入其他模块
var moduleA = require('module/one/two/three/A.js')
var moduleB = require('module/one/two/three/B.js')
module.exports.person = moduleA;
module.exports.studemt = moduleB;
})可以看到A.js和B.js文件位置相对于sea.js和index.html很深，所以在main.js中引入时路径很长，当要引入three文件夹下更多模块文件时，写起来很麻烦，这个是时候paths就派上用场了，其实跟alias有点像，可以看做是给某个文件夹设置了别名
// 定义一个没有ID的模块
define(function(require,exports,module){
//在入口模块中引入其他模块
// 1、不配置paths时的写法
// var moduleA = require('module/one/two/three/A.js')
// var moduleB = require('module/one/two/three/B.js')
//2、配置paths后的写法
var moduleA = require('three/A.js');
var moduleB = require('three/B.js');
module.exports.person = moduleA;
module.exports.studemt = moduleB;
})要是需要引入的模块在同一文件夹下，而且藏得又深名字还长，那么就使用alias和paths配合使用，给文件设置alias(别名)，给文件夹设置paths(路径)
vars(变量)配置
目录如下
│ index.html
│ main.js
│ sea.js
│
└─module
└─language
en.js
zh-cn.js//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 引入seajs -->
<script src="./sea.js"></script>
<!-- 引入入口模块文件 -->
<script>
// 配置seajs
seajs.config({
vars:{
cn:"zh-cn"
}
})
// 使用seajs.use()方法引入入口模块
seajs.use('main',function(a){
console.log('入口模块加载完毕')
// 输出入口模块向外暴露的对象
console.log(a);
})
</script>
</body>
</html>//main.js
// 定义入口模块
define(function(require,exports,module){
// 引入其他模块
// 未配置vars时的写法
// var language = require('module/language/zh-cn')
// 配置vars后的写法
var language = require('module/language/{cn}')
module.exports.language = language;
})vars是一个对象，对象内有kv键值对，k是一个变量，用于代替v,在引入模块文件时，可以使用{}包裹k的形式来代替v,形如{K}，有点像插值语法，官网说是动态加载，看了很多文章都是引用官网的例子，哎，我也不知道什么场景下使用，我感觉和alias真的一样
map(映射) 配置
map用于对模块路径进行映射修改，可用于路径转换，在线调试等文件目录如下
index.html
│ main.js
│ sea.js
│
└─module
debug.js
runtime.js//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 引入seajs -->
<script src="./sea.js"></script>
<script>
// 配置seajs
seajs.config({
map:[
['runtime.js','debug.js']
]
})
// 引入入口模块
seajs.use('main',function(a){
console.log('入口模块加载完毕')
console.log(a)
})
</script>
</body>
</html>// 定义入口模块
define(function(require,exports,module){
// 引入其他模块
var M = require('module/runtime')
module.exports.state = M;
})上面的例子模拟了类似测试时的场景，将模块路径进行了转换
相关推荐
binglingnew 2020-02-09
人生百态 2020-02-02
binglingnew 2012-10-03
yo跟着新宇走 2020-01-03
binglingnew 2019-12-03
Gary的影响力 2014-01-23
GhostStories 2019-10-28
weimasoft 2014-06-30
wuzlun 2016-11-27
人生百态 2017-09-26
binglingnew 2019-06-06
sean0 2019-04-02
earthhour 2019-06-30
binglingnew 2016-02-16
人生百态 2019-06-28
NSStringlin 2017-09-26