标签:文件 seajs js header 模块 requirejs
一、模块化配置信息 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'); })
标签:文件,seajs,js,header,模块,requirejs 来源: https://www.cnblogs.com/txf-123/p/11767777.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。