下载在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(别名)配置
...