一、seajs config 配置信息
用于配置seajs的一些选项参数,接收一个对象,该对象的属性值,就是我们的配置选项
1. alias
定义模块别名
当我们引入一些基础库时,经常会涉及到版本升级(版本号发生改变),此时在每个模块中修改版本号风险是比较大的,如果使用alias定义这个模块,使用时引用别名,更新时改变需要修改的版本即可
jq:jquery1.3.js jq
2. paths 路径
用来定义模块的路径
用途,当我们创建的模块文件夹路径很深的时候,路径比较麻烦,可以将一些路径定义为path,这样引入模块时就比较简单
3. vars 变量
定义变量,给模块的路径使用
如果模块的路径比较复杂,我们可以对路径进行简化,通过将路径定义为变量,使用{}匹配语法使用变量
4. map 映射处理
用于匹配文件做映射处理
当模块开发完后,我们打包处理或压缩处理时,文件名可能有所不同,通过map映射找到这些文件,修改成对应的文件名
通过配置 main.js 去加载 main.min.js
5. base 基础目录
设置模块基础目录
seajs 引入时的根目录是seajs所在的位置,此时我们想引入一些模块就比较麻烦,可以通过这个属性自定义根目录,这样引入模块就比较方便了
6. charset 字符集
用来设置模块的编码方式
7. debug 调试模式
debug:true 开启调试模式,可以在控制台输出一些错误,查看加载的文件
8. preload 预加载
seajs插件预加载文件
有时候我们需要提前加载一些工具库或一些文件,使用preload可以提前加载,加载的文件在全局作用域下使用
9. css 加载css文件
有时候我们在某个模块中生成的元素需要一些样式,我们就可以使用css加载这些css文件,seajs-css.js
二、requirejs
1.简介
Github;https://github.com/requirejs/requirejs
官网:http://requirejs.org/
官网中文:http://www.requirejs.cn/
npm安装:npm install requirejs
requirejs也是一种模块化开发依赖管理的代码工具,与seajs很相似
requirejs与seajs的不同点:
1) seajs引入模块的根目录是sea.js文件所在的目录,requirejs的根目录是引入了require.js的html文件所在的目录
2) 在模块内引入其他模块,seajs依然是相对sea.js根目录为基础,但是require则是相对当前文件为基础
3) seajs可以对define传递一个字符串参数定义一个模块,但是require不是
2.模块定义 define
与seajs对比:
1) 不能创建一个字符串
2) 可以传递一个对象
3) 可以传递一个函数(commonjs的规范)主要区别在于module
(1) id表示模块的id,id没有后缀名称,seajs有后缀
(2) 没有依赖集合
(3) config配置不同
相同点:
(1) uri都是表示路径
(2) 都有exports属性
4) 传递两个参数时:第一个参数时依赖模块的集合数组,第二个参数是模块主体函数,函数的参数表示前边依赖的引用,注意顺序
3.定义接口 (模块返回值)
AMD与CMD的区别:
common.js是用在服务端的,同步的,eg:nodejs
AMD和CMD使用在浏览器端的,异步的,比如:requirejs,seajs
AMD先提出,CMD是在commonjs和AMD基础上提出的
CMD依赖就近原则,AMD依赖前置
CMD是延迟执行的,AMD是提前执行
CMD(seajs)定义:
1) exports.color='red'
2) module.exports.color='red'
3) module.exports={
color:'red'
}
4) return
AMD(requirejs)定义:
在AMD规范定义模块中没有exports参数,所以我们只能通过return暴露接口
1) return 对象,可以将模块内部多个属性或方法暴露出来
2) return 函数,可以暴露一个方法,而在父模块中调用该方法访问该模块中的属性和方法
三、requirejs配置
在app.js中引用主模块,进行对require的配置,require.config({});
1. baseUrl 根目录
与seajs中的base一样
2. paths 定义路径
与seajs的paths一样
3. map 模块引用的简化
seajs中的map做映射,但是require不是
当我们存在多个页面时,可能每个页面都要引入代码库,此时可以通过map配置,对每个文件配置不同的代码库文件
4. shim 配置模块依赖关系
对于一些定义在全局的代码库,经常获取不到这类库的模块,此时通过定义shim的模块依赖关系,可以在模块中取到这类库
5. 引入css
如果main模块的视图依赖main.css 引入的方法见案例
css!main.css
css代表lib/css
!代表要引入css文件
main.css代表引入的css文件
前端模块的基本操作与介绍(二)
最新推荐文章于 2021-10-13 09:45:46 发布