Seajs的配置

下载

cmd命令窗口通过npm install saejs下载
seajsnpm下载指令查找方法如下

Seajs的配置_第1张图片

Seajs的配置_第2张图片

Seajs的配置_第3张图片

Seajs的配置_第4张图片

Seajs的配置_第5张图片

下载完成后,生成一个 node_modules目录, seajs核心文件放在 node_modules\seajs\dist下,如下图所示

Seajs的配置_第6张图片

引入seajs

新建 index.html文件,将 sea.jsindex.html放在同一级目录

Seajs的配置_第7张图片

index.html中通过 script标签引入 sea.js



    
    Document


    
    
    

seajs向外暴露了一个变量 seajs,在上面代码中输出 seajs

Seajs的配置_第8张图片

从控制台的输出可以看到,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

Seajs的配置_第9张图片

本地电脑上 sea.js文件位置

Seajs的配置_第10张图片

证明 base就是 sea.js文件所在的路径
main.js中定义一个模块,并向外暴露
//main.js
// 定义一个没有ID的模块
define(function(require,exports,module){
    // 向外暴露
    module.exports.name = '张三'

})
index.html文件中使用 seajs.use()方法引入入口模块文件 main.js



    
    Document


    
    
    


        

Seajs的配置_第11张图片

注意看 seajs.use()方法里面的第一个参数, "main"乍一看好像没问题, mian.js不就是和 index.html在同一级目录吗,其实不然,这是 顶级路径(不以 .../开头,直接以 文件名或者 文件夹名开头),是相对于 sea.js的路径而言的,只是刚好这里 sea.jsindex.html在同一级目录,所以看起来像是相对于 index.html,如果写成 ./main才是相对于 index.html的路径而言
那我们尝试更改一下 sea.js的位置,将 sea.js放在和 index.html同级目录的 module文件夹下( E:\SeajsTest\module\),将 main.js放在和 index.html同级目录的 module文件夹下的 main文件夹中

Seajs的配置_第12张图片

因为 sea.jsmain.js的位置变了,此时 sea.js的路径是 E:\SeajsTest\module\seajs,引入 sea.js后在控制台输出 seajs.data验证

Seajs的配置_第13张图片

此时引入 main.js时,如果使用 顶级路径应该是 main/main,或者写 相对路径---- ./module/main/main,表示相对于 index.html



    
    Document


    
    
    

控制台输出

Seajs的配置_第14张图片

修改默认 base



    
    Document


    
    
    


如上所示,我将 base修改为 main/表示和 sea.js同级的 main目录下,即 E:\SeajsTest\module\main,此处不能使用 base:./main/,因为加上 ./就表示相对于 index.html了,从下图中控制台输出的路径就可以看出来

Seajs的配置_第15张图片

Seajs的配置_第16张图片

alias(别名)配置

模块标识很长,写起来不方便、容易出错的时候,可以使用alias来简化模块标识;还有一种情况当,我们引入一些基础库时,经常会涉及到版本升级(版本号发生改变),此时在每个模块中修改版本号比较麻烦,如果使用 alias定义这个模块,只需在 seajsalias中修改一次即可。在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



    
    Document


    
    
    

//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



    
    Document


    
    
    

//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简化模块标识的书写, pathalias不同的是, path针对的是某个文件夹。paths 配置可以结合 alias 配置一起使用,让模块引用非常方便。

文件目录如下

│  index.html
│  main.js
│  sea.js
│  
└─module
    └─one
        └─two
            └─three
                    A.js
                    B.js
还是老规矩, index.html中引入入口模文件块 main.js,然后在 main.js中在引入 A.jsB.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.jsB.js文件位置相对于 sea.jsindex.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;
})
要是需要引入的模块在同一文件夹下,而且藏得又深名字还长,那么就使用 aliaspaths配合使用,给文件设置 alias(别名),给文件夹设置 paths(路径)

vars(变量)配置

目录如下
│  index.html
│  main.js
│  sea.js
│  
└─module
    └─language
            en.js
            zh-cn.js
//index.html



    
    
    
    Document


    
    
    
    

//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



    
    
    
    Document


    
    
    

// 定义入口模块
define(function(require,exports,module){
    // 引入其他模块
    var M = require('module/runtime')
    module.exports.state = M;

})
上面的例子模拟了类似测试时的场景,将模块路径进行了转换

参考文章01
参考文章02
参考文章03
参考文章04
参考文章05

你可能感兴趣的:(seajs,seajs配置)