下载
在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\seajs),将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（别名）配置
发表回复