位置: 编程技术 - 正文

require.js的用法详解(js中的require函数)

编辑:rootadmin

推荐整理分享require.js的用法详解(js中的require函数),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js require define,js中required什么意思,js reflect的用法,js中repeat用法,js中的require函数,js require用法,js require define,js require用法,内容如对您有帮助,希望把文章链接给更多的朋友!

一、为什么要用require.js?

最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。

这段代码依次加载多个js文件。

这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

require.js的诞生,就是为了解决这两个问题:

  

  (1)实现js文件的异步加载,避免网页失去响应;

  (2)管理模块之间的依赖性,便于代码的编写和维护。

二、require.js的加载

使用require.js的第一步,是先去官方网站下载最新版本。

下载后,假定把它放在js子目录下面,就可以加载了。

有人可能会想到,加载这个文件,也可能造成网页失去响应。解决办法有两个,一个是把它放在网页底部加载,另一个是写成下面这样:

async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。

加载require.js以后,下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js,也放在js目录下面。那么,只需要写成下面这样就行了:

data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。

三、主模块的写法

上一节的main.js,我把它称为"主模块",意思是整个网页的入口代码。它有点像C语言的main()函数,所有代码都从这儿开始运行。

下面就来看,怎么写main.js。

如果我们的代码不依赖任何其他模块,那么可以直接写入javascript代码。

  // main.js  alert("加载成功!");

但这样的话,就没必要使用require.js了。真正常见的情况是,主模块依赖于其他模块,这时就要使用AMD规范定义的的require()函数。

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

require.js的用法详解(js中的require函数)

下面,我们看一个实际的例子。

假定主模块依赖jquery、underscore和backbone这三个模块,main.js就可以这样写:

require.js会先加载jQuery、underscore和backbone,然后再运行回调函数。主模块的代码就写在回调函数中。

四、模块的加载

上一节最后的示例中,主模块的依赖模块是['jquery', 'underscore', 'backbone']。默认情况下,require.js假定这三个模块与main.js在同一个目录,文件名分别为 jquery.js,underscore.js和backbone.js,然后自动加载。

使用require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。

上面的代码给出了三个模块的文件名,路径默认与main.js在同一个目录(js子目录)。如果这些模块在其他目录,比如js/lib目录,则有两种写法。一种是逐一指定路径。

另一种则是直接改变基目录(baseUrl)。

如果某个模块在另一台主机上,也可以直接指定它的网址,比如:

require.js要求,每个模块是一个单独的js文件。这样的话,如果加载多个模块,就会发出多次HTTP请求,会影响网页的加载速度。因此,require.js提供了一个优化工具,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数。

五、AMD模块的写法

require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。

具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。

假定现在有一个math.js文件,它定义了一个math模块。那么,math.js就要这样写:

加载方法如下:

如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。

当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。

六、加载非规范的模块

理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。那么,require.js是否能够加载非规范的模块呢?回答是可以的。这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。

require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。

比如,jQuery的插件可以这样定义:

七、require.js插件

require.js还提供一系列插件,实现一些特定的功能。

domready插件,可以让回调函数在页面DOM结构加载完成后再运行。

text和image插件,则是允许require.js加载文本和图片文件。

类似的插件还有json和mdown,用于加载json文件和markdown文件。

标签: js中的require函数

本文链接地址:https://www.jiuchutong.com/biancheng/381616.html 转载请保留说明!

上一篇:JS实现鼠标滑过链接改变网页背景颜色的方法(js鼠标滑动特效)

下一篇:JavaScript实现的简单烟花特效代码(js的实现原理)

  • 进口洋酒能存放多少年
  • 申请延期缴纳税款的批准机关
  • 社保怎么进行账单查询
  • 服务发票是增值税发票吗
  • 非货物贸易核查项下
  • 知识产权投资是什么意思
  • 采购退回的分录
  • 银行里的钱没有了怎么办
  • 免税发票备注栏
  • 客运服务是指
  • 未办预售证,企业取得这笔收入要缴增值税吗?
  • 预付账款讲解
  • 附加税的税率表
  • 报表中在产品填什么数据
  • 销售返利是冲减收入还是做销售费用
  • 费用计入资产
  • 企业分红给企业股东怎么交税
  • 代开专票交的城建税怎么申报附加税
  • 购买融资租赁资产
  • 职工赔偿金的账务处理
  • 前两个月亏损第三个月盈利所得税怎么计算
  • 笔记本怎么清理D盘
  • 期间费用率的意义
  • 如何用注册表
  • 销售收入的暂估入账
  • 正常运行英文
  • 失控发票的企业如何处理
  • php字符串变量
  • 民办非企业的财务会计制度是什么
  • 印花税税收优惠政策2023
  • 微软正在更新office
  • PHP:pg_lo_open()的用法_PostgreSQL函数
  • 企业购厂房会计分录
  • 详解金球奖之争
  • 关于出售使用过的东西
  • php自动执行函数
  • kindeditor编辑器图片上传
  • 长期借款和实收资本
  • Error in render: “TypeError: Cannot read properties of undefined (reading ‘length‘)“,深层次数据处理报错????
  • vue思维导图怎么下载
  • 简述php图像操作的基本步骤
  • htmlspecialchars_decode
  • idea可以编写vue吗
  • 复制/root/install.log到/tmp
  • 员工福利费怎样计提
  • 抵债资产怎么入账
  • 房地产企业的开发成本和开发费用有什么区
  • 差旅费补贴要交个人所得税文件
  • 耕地占用税通过税金及附加核算吗
  • 一般纳税企业增值税的核算应当使用
  • 公司归还股东借款是否需要股东会决议
  • 单位银行提取大额现金最多能取多少
  • 如何安装sql server2022
  • 个人出租商铺如何报税申报,需要什么资料
  • 增值税发票日用品开票明细
  • 资本公积的用途主要用于
  • 注销时其他应付款怎么冲平
  • 物业电费加价如何处理
  • 积分兑换礼品需要什么
  • 存货周转次数下降的原因
  • 外商投资企业的中国投资者
  • 小微企业不用缴纳社保可以吗现在
  • 班车租赁发票税率是多少
  • 公司购药品入什么科目
  • 原始凭证丢了判刑吗
  • 会计常用表格都有哪些技能
  • 现金支票办理电话
  • 根据索引名称查字段
  • ubuntu怎么把软件放到桌面
  • Windows7忘记开机密码一键还原
  • outpost.exe - outpost是什么进程 有什么用
  • windows阻止
  • win7如何更改欢迎界面
  • 协同编程工具
  • node怎么用
  • js怎么设置字体
  • jquery showdialog
  • 善意取得的条件和效力
  • 公司注销报税怎么申报
  • 四川医保增员网上怎么操作流程图
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设