位置: 编程技术 - 正文

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的实现原理)

  • 税收负担影响企业的利润吗
  • 税收广度
  • 支票退票怎么做账务处理
  • 招聘只招一个人
  • 发票可不可以部分冲红
  • 股东将投资款转入个人账户
  • 不得抵扣的进项税额转出会计分录
  • 国际贸易公司注册需要什么条件海南
  • 外汇资本金入账要求
  • 房地产老项目增值税简易计税
  • 外币报表折算差额在会计报表中应作为
  • 消费税价外费用的计算
  • 企业实际发生的与取得收入有关的、合理的支出,包括
  • 个人转让认缴出资股权需要交纳印花税吗?
  • 没有资质的建筑公司怎样接工程
  • 领购发票实名认证流程
  • 一般纳税人转为小规模2022政策
  • 资产负债表其他应付款包括哪些
  • 增值税税控盘服务费可以每年都抵扣吗
  • 销货成本销货成本是什么类账户
  • 企业的其他业务收入有
  • 食堂费用没有发票能挂账吗
  • 2020年916减免退库什么意思
  • 高新企业申报指南
  • 销项税现金流量表在附表中如何列示
  • 修理厂年收入
  • 固定资产的销售
  • Win11 Dev Build 22000.65开发预览版推送(附更新修复已知问题汇总)
  • laravel数据迁移
  • 企业扣除内容有哪些
  • 营业外支出包括哪些科目
  • ftp pwd命令
  • 报销差旅费怎么算
  • 主播录屏软件哪个好
  • 企业需要税务登记吗
  • php option
  • 限售股转让个人所得税退税
  • 小规模纳税人结转税金分录
  • php 计算
  • php隐藏跳转
  • 汇兑损益计算方法有哪些
  • 企业通讯费补贴发放规定
  • 工商年报基本养老保险缴费基数
  • 蔬菜和肉类是不是免税
  • 企业所得税计提金额怎么算
  • 企业进行成本核算时,应根据生产经营特点
  • 白酒消费税计税价格由谁核定
  • 收据能否入账?如何填写才具有合法性呢...
  • 以前年度是什么意思
  • 开发票给别人该如何收取税点?
  • 将本月应交未交增值税转入未交增值税
  • 筹建期间发生的长期借款利息费用计入财务费用
  • 小规模其他业务收入交多少税率
  • 电子承兑汇票接收不了怎么办
  • Sqlserver聚集索引和非聚集索引的区别
  • windows7的内存基本要求
  • vista win
  • hyper-v怎么样
  • mac的command键相当于pc的什么键
  • mac自动操作怎么停止
  • 使用筷子就餐会不会传染乙肝病毒
  • debian更改用户名
  • linux 更新yum
  • 系统设置技巧有哪些
  • nicconfigsvc.exe - nicconfigsvc是什么进程 有什么用
  • linux的kill函数
  • jQuery实现select模糊查询(反射机制)
  • 用批处理删除盘符
  • perl运行环境
  • python3利用smtplib通过qq邮箱发送邮件方法示例
  • 基于vue的ui框架
  • jQuery插件ajaxFileUpload使用实例解析
  • 12366纳税服务热线存在的问题
  • 税控盘解除风险
  • 计财科科长是什么级别
  • 上海42年工龄退休有没有补充养老金呢
  • 如何落实保密制度规定措施
  • 放管服中的服的深层含义
  • 美国各州地税税率
  • 卡车生产企业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设