位置: 编程技术 - 正文

JavaScript的RequireJS库入门指南

编辑:rootadmin

推荐整理分享JavaScript的RequireJS库入门指南,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

简介

如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS。在这篇文章中,我将描述RequireJS是什么,以及它的一些基础场景。异步模块定义(AMD)

谈起RequireJS,你无法绕过提及JavaScript模块是什么,以及AMD是什么。

JavaScript模块只是遵循SRP(Single Responsibility Principle单一职责原则)的代码段,它暴露了一个公开的API。在现今JavaScript开发中,你可以在模块中封装许多功能,而且在大多数项目中,每个模块都有其自己的文件。这使得JavaScript开发者日子有点难过,因为它们需要持续不断的关注模块之间的依赖性,按照一个特定的顺序加载这些模块,否则运行时将会放生错误。

当你要加载JavaScript模块时,就会使用script标签。为了加载依赖的模块,你就要先加载被依赖的,之后再加载依赖的。使用script标签时,你需要按照此特定顺序安排它们的加载,而且脚本的加载是同步的。可以使用async和defer关键字使得加载异步,但可能因此在加载过程中丢失加载的顺序。另一个选择是将所有的脚本捆绑打包在一起,但在捆绑的时候你仍然需要把它们按照正确的顺序排序。

AMD就是这样一种对模块的定义,使模块和它的依赖可以被异步的加载,但又按照正确的顺序。

CommonJS, 是对通用的JavaScript模式的标准化尝试,它包含有 AMD 定义 ,我建议你在继续本文之前先读一下。在ECMAScript 6这个下一版本JavaScript 规范中,有关于输出,输入以及模块的规范定义,这些将成为JavaScript语言的一部分,而且这不会太久。这也是关于RequireJS我们想说的东西。

RequireJS&#;

RequireJS是一个Javascript 文件和模块框架,可以从 Studio也可以通过Nuget获取。它支持浏览器和像node.js之类的服务器环境。使用RequireJS,你可以顺序读取仅需要相关依赖模块。

RequireJS所做的是,在你使用script标签加载你所定义的依赖时,将这些依赖通过head.appendChild()函数来加载他们。当依赖加载以后,RequireJS计算出模块定义的顺序,并按正确的顺序进行调用。这意味着你需要做的仅仅是使用一个“根”来读取你需要的所有功能,然后剩下的事情只需要交给RequireJS就行了。为了正确的使用这些功能,你定义的所有模块都需要使用RequireJS的API,否者它不会像期望的那样工作。

RequireJS API 存在于RequireJS载入时创建的命名空间requirejs下。其主要API主要是下面三个函数:

define? 该函数用户创建模块。每个模块拥有一个唯一的模块ID,它被用于RequireJS的运行时函数,define函数是一个全局函数,不需要使用requirejs命名空间. require? 该函数用于读取依赖。同样它是一个全局函数,不需要使用requirejs命名空间. config? 该函数用于配置RequireJS.

在后面,我们将教你如果使用这些函数,但首先让我们先了解下RequireJS的加载流程。

JavaScript的RequireJS库入门指南

data-main属性

当你下载RequireJS之后,你要做的第一件事情就是理解RequireJS是怎么开始工作的。当RequireJS被加载的时候,它会使用data-main属性去搜寻一个脚本文件(它应该是与使用src加载RequireJS是相同的脚本)。data-main需要给所有的脚本文件设置一个根路径。根据这个根路径,RequireJS将会去加载所有相关的模块。下面的脚本是一个使用data-main例子: <script src="scripts/require.js" data-main="scripts/app.js"></script>

另外一种方式定义根路劲是使用配置函数,后面我们将会看到。requireJs假设所有的依赖都是脚本,那么当你声明一个脚本依赖的时候你不需要使用.js后缀。

配置函数

如果你想改变RequireJS的默认配置来使用自己的配置,你可以使用require.configh函数。config函数需要传入一个可选参数对象,这个可选参数对象包括了许多的配置参数选项。下面是一些你可以使用的配置:

baseUrl——用于加载模块的根路径。 paths——用于映射不存在根路径下面的模块路径。 shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义,但是你还是想通过RequireJS来使用它,那么你就需要在配置中把它定义为一个shim。 deps——加载依赖关系数组

下面是使用配置的一个例子:

在这个例子中把根路径设置为了scripts/app,由lib开始的每个模块都被配置在scripts/lib文件夹下面,backbone 加载的是一个shim依赖。

用RequireJS定义模块

模块是进行了内部实现封装、暴露接口和合理限制范围的对象。ReuqireJS提供了define函数用于定义模块。按章惯例每个Javascript文件只应该定义一个模块。define函数接受一个依赖数组和一个包含模块定义的函数。通常模块定义函数会把前面的数组中的依赖模块按顺序做为参数接收。例如,下面是一个简单的模块定义:

我们看,一个包含了logger的模块依赖数组被传给了define函数,该模块后面会被调用。同样我们看所定义的模块中有一个名为logger的参数,它会被设置为logger模块。每一个模块都应该返回它的API.这个示例中我们有两个属性(firstName和lastName)和一个函数(sayHello)。然后,只要你后面定义的模块通过ID来引用这个模块,你就可以使用其暴露的API。

使用require函数

在RequireJS中另外一个非常有用的函数是require函数。require函数用于加载模块依赖但并不会创建一个模块。例如:下面就是使用require定义了能够使用jQuery的一个函数。

小结

在这篇文章中我介绍了RequireJS库,它是我创建每个Javascript项目都会用到的库函数之一。它不仅仅用于加载模块依赖和相关的命令,RequireJS帮助我们写出模块化的JavaScript代码,这非常有利于代码的可扩展性和重用性。

javascript处理a标签超链接默认事件的方法 本文实例讲述了javascript处理a标签超链接默认事件的方法。分享给大家供大家参考。具体分析如下:有时需要在a标签上添加click事件,并且跳转前处理一

优化RequireJS项目的相关技巧总结 本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具,这其中就包括Node.js。因此,如果你手头上还没有Node.js可以点击此处下载

在JavaScript应用中使用RequireJS来实现延迟加载 无论简单还是复杂的Web应用,都由一些HTML、JavaScript、CSS文件组成。通常开发者会通过JQuery、Knockout、Underscore等等这样的第三方JavaScript框架来提高开发

标签: JavaScript的RequireJS库入门指南

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

上一篇:深入理解JavaScript编程中的原型概念(深入理解javascript特性.pdf)

下一篇:javascript处理a标签超链接默认事件的方法(js的a标签)

  • 房产税如何
  • 小规模纳税人不动产租赁税率
  • 旅游服务住宿费入什么科目
  • 滴滴发票抬头怎么填
  • 银行结构性存款是理财吗
  • 外商投资企业采取发包、出租经营
  • 电影剧本稿费代扣代缴个人所得税如何处理?
  • 实施计划成本存货发生毁损的会计处理怎么做?
  • 增值税转售行为怎么做会计处理?
  • 不动产在建工程使用的外购货物
  • 异地工程要预缴环境税款吗
  • 房地产企业自行开发的房地产项目
  • 企业出租收入增值税税率
  • 医疗器械 税点
  • 公司租房可以入公积金吗
  • 印花税减半征收会计分录怎么做
  • 销售不动产预收款纳税义务发生时间
  • 企业间借款利息开票税目
  • 转移性支出与转移性收入相对应主要包括
  • 小规模纳税人的增值税计入成本吗
  • 空白发票怎么用
  • 收购公司款项的支付是利好还是利差
  • 网银企业证书年费入哪个科目
  • 积分兑换现金的平台
  • linux 数字
  • 其他资金结转结余包括哪些
  • 系统太多怎么办
  • php preg_grep
  • 仓储费计入存货成本吗
  • 公账提取备用金限额
  • 贝特阿斯品牌介绍
  • 营业外收支的内容
  • 劳务报酬所得包括哪些
  • 若依框架和jeesite
  • php ob缓存
  • 存货核算的会计分录怎么写
  • 投标报名费怎么定
  • php发送post请求api
  • 建筑业预缴的个人所得税怎么在申报表体现
  • nodejs基础知识
  • 小微企业开具增值税专票
  • 资产负债表中应付账款项目应根据什么填制
  • 企业没有ca怎么登陆公积金账户
  • javascript前端开发案例教程源码
  • 建筑业成本需要摊销吗
  • 房地产小规模纳税人预缴税款如何填申报表
  • 投资性房地产对外出租的账务处理
  • 劳务外包收入如何纳税
  • 税务登记是需要原件还是复印件
  • 免税农产品范围目录的文件
  • 没有金税盘可以开专票吗
  • 个人所得税10月份申报期
  • 日记总账的适用范围
  • 公共电话亭设计案例
  • 保证金计算器
  • 存货盘盈的账务处理入什么费用
  • 固定资产一次计提折旧
  • 土地租赁费如何摊销
  • 健身房健身器材采购清单
  • 购买的商品属于什么会计科目
  • 资产负债表上应交税费是什么意思
  • 政府补助收入是指县级以上工会收到的
  • 专票多少钱
  • 支付给个人的劳务费需要发票吗
  • 酒店食材成本如何分析
  • 存款利息收入是否缴纳增值税
  • 银行承兑汇票怎么看
  • 介绍一种新产品
  • sql实现选择操作
  • ubuntu如何读
  • win7开始图标怎么变大点
  • win7旗舰版系统激活密钥
  • linux配置ssh服务器 用户名
  • python 对象函数
  • [Unity3D]Unity3D游戏开发之塔防游戏项目讲解(上)
  • javascript例题
  • js function.call
  • python读入txt
  • 海关进口增值税如何入账
  • 诺诺发票怎样上报汇总
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设