一、模块化配置信息 seajs config
用于配置seajs的一些选项参数,接受一个对象,该对象的属性值就是我们的配置项目
配置信息基本语法:
在seajs.use()上边:
seajs.config({
alias:{},
paths:{}
})
1.alias定义模块别名
当我们在项目中引入一些基础类库,经常会涉及到类库的版本升级问题,才是每个模块都引入了类库,那么升级就需要修改每个模块中的名字,风险比较大,
如果使用alias定义这个模块(类库)、使用别名调用,更新只需要更新版本号,就可以做到全局更新
eg:
jq:jquery-1,12.2.min.js
所有模块中都使用jq,如果我将这个版本改为jq:jquery-1.5.min.js
所有使用了jq的模块中的jquery都会变为1.5的版本
2.paths 路径配置
当模块目录比较深的时候,或者需要跨目录调用模块时,可以使用paths简化路径
也可以使用{}匹配语法调用变量(vars)
eg:
require('header/skin/top/top')
===>
paths:{
h:'header/skin/top'
}
require('h/top');
3.vars 声明变量
有些场景下,模块路径在运行时才能确定(动态处理),这是可以使用vars变量来配置
如果模块开发时路径比较复杂,也可以使用vars进行简化路径,将路径的一部分定义为变量,使用{}进行拼接,与paths有点类似
4.map 映射处理
该配置可对模块路径进行映射修改,可用于路径转换,在线调试等
当模块开发时,我们使用的文件名字进行调用,此时文件并没有被压缩,当开发结束,文件进行了压缩,文件名字发生了变化,此时在调用没压缩的是名字会报错,此时通过map进行映射处理,找到这些文件,修改对应的文件名
map是数组
eg:
文件:mian.js
调用:require('mian')
文件压缩:main.min.js
配置:map:['main.js','main.min.js']
调用:require('main')
map:['.js','.min.js']
5.base根路径
sea.js在解析顶级标识时,会相对base路径来解析
sea.js所在的目录为默认的根目录,但是使用base可自行手动设置根目录
6.charset 设置字符集(编码方式)
用于设置模块的编码方式
7.debug调试模式
值为true,标识加载器不会删除动态插入的
script标签,插件也可以根据debug配置来决定log等信息输出
8.preload 预加载
使用preload配置项,可以在普通模块加载前,提前加载1并初始化好某个特定的模块
预加载的模块可以在全局模块下直接使用,不需要引入
使用preload预加载需要在sea.js下引入sea-preload.js
9.css 加载css文件
如果需要在模块中生成html标签,并使用css样式,可以使用css加载这些css文件
需要引入文件:seajs-css.js
任何模块引入的css文件都将会在全局发挥作用,不需要单独引入
10.requirejs
1.简介:
地址:http://www.requirejs.org.cn/
github:https://github.com/requirejs/requirejs
npm安装 : npm i requirejs
requirejs也是一种模块化开发依赖管理的代码工具,与seajs有着相似的api,但也有不同之处,requirejs与seajs的区别:
1)seajs引入的默认根目录是sea.js文件所在的目录,但是requirejs的根目录是引入require.js文件的html文件所在的目录
2)在模块内部引入其他模块,seajs依然是对seajs文件所在的根目录为基础写路径,但是requirejs则是相对当前文件所在位置为基础写路径
3)seajs可以对define定义模块传递一个字符串为参数来定义一个字符串模块,但是requirejs不允许
2.模块定义 define
与seajs对比:
1)不能单独写一个字符串或数字
2)可以传递一个对象,对象模块
3)可以传递一个函数(commonjs规范),参数一样
module不一样:
1)id表示模块id,id没有后缀,seajs有后缀
2)没有依赖集合
3)config配置不同
相同点:
1)uri是一样的
2)exports是一样的
4)传递两个参数时,第一个参数表示依赖模块集合数组,第二个参数时模块主体数组,函数的参数表示前边依赖集合所引入的内容,顺序是引入依赖的顺序
requirejs模块调用:
1)html文件中需要引入根文件(不是模块)
<scritp src='../require.js' data-main='./js/app.js'></script>
app.js就是一个单纯的js文件(根文件),不是模块
2)根js文件或子模块中引入其他模块
require(['./header/header','./header/skin/skin'],function(h,s){
//h表示1header返回内容。s代表skin返回内容
})
3)子模块中引入其他模块
define(['./header/header','./header/skin/skin'],function(h,s){
//h表示1header返回内容。s代表skin返回内容
})
4)子模块中引入其他模块,define1个参数
define(function(require,exports,module){
var h=require('header/header');
})