首页 > 语言 > 关键词  > require函数最新资讯  > 正文

RequireJS 入门指南

2013-08-27 16:10 · 稿源: 开源中国社区
文章目录

简介

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

异步模块定义(AMD)

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

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

super0555
翻译于 9天前

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

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

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

super0555
翻译于 9天前

RequireJS?

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

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

姜鹏飞
翻译于 11天前

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

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

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

姜鹏飞
翻译于 11天前

data-main属性

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

1 <script src="scripts/require.js" data-main="scripts/app.js"></script>

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

szkiti
翻译于 12天前

配置函数

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

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

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

01 require.config({
02 //By default load any module IDs from scripts/app
03 baseUrl: 'scripts/app',
04 //except, if the module ID starts with "lib"
05 paths: {
06 lib: '../lib'
07 },
08 // load backbone as a shim
09 shim: {
10 'backbone': {
11 //The underscore script dependency should be loaded before loading backbone.js
12 deps: ['underscore'],
13 // use the global 'Backbone' as the module name.
14 exports: 'Backbone'
15 }
16 }
17 });

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

szkiti
翻译于 12天前

用RequireJS定义模块

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

01 define(["logger"], function(logger) {
02 return {
03 firstName: “John",
04 lastName: “Black“,
05 sayHello: function () {
06 logger.log(‘hello’);
07 }
08 }
09 }
10 );

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

姜鹏飞
翻译于 8天前

使用require函数

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

1 require(['jquery'], function ($) {
2 //jQuery was loaded and can be used now
3 });

小结

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

  • 相关推荐
  • 大家在看
  • 包含敏感数据数千个Firefox cookie出现在GitHub存储

    包含敏感数据的数千个 Firefox cookie 数据库目前出现在 GitHub 的存储库中,这些数据可能用于劫持经过身份验证的会话。这些 cookies.sqlite 数据库通常位于 Firefox 配置文件文件夹中。它们用于在浏览会话之间存储 cookie。现在可以通过使用特定查询参数搜索 GitHub 来找到它们,这就是所谓的搜索“dork”。总部位于伦敦的铁路旅行服务公司 Trainline 的安全工程师 Aidan Marlin 在通过 HackerOne 报告了他的发现,并被 GitHub 代

  • Circuit X平台深耕APP推广,为出海APP赋能

    如果你曾有过在日本生活的经历,那么你一定听说过Fukurou Labo公司旗下的 Circuit X平台,这个来自日本本土的广告流量变现平台,在经过几年的发展后,如今已经在日本以及韩国等周边国家和地区拥有着超高的影响力。根据2021 年日韩地区广告影响力排名现实,Fukurou Labo的排名仅次于世人皆知的Face book、Apple以及Google。能在广告投放效果领域和这些全球巨头同台竞技,足以证明Circuit X平台自身实力的强大。 以国内某款美少女APP

  • ThreatCloud -- Check Point公司网络安全精准防护的中枢

    ThreatCloud安全威胁情报云是全球领先的信息安全公司Check Point所有威胁防护与安全解决方案背后的中枢大脑。通过大数据与业内领先的AI技术结合,ThreatCloud为所有用户提供了精准防护的能力,从而帮助中国、以及全球用户能够在“后疫情”时代更加从容应对互联网威胁、全面通过IT技术加速业务发展。精准防护势在必行近几年,来自各种威胁向量的网络攻击层出不穷,包括勒索软件、网络钓鱼、供应链攻击等。事实上,Check Point Resea

  • 苹果支持对 Apple Watch 和 Mac Pro 采取关税豁免

    苹果 Apple Watch 产品和零部件需要缴纳关税,因为它们是从中国进口的。不过,苹果最重要的产品 iPhone 没有被征收关税。苹果产品的最终制造都在中国完成,尽管苹果已经努力使其制造基地多样化。苹果这项申请是全过程中的一个步骤,可能会恢复美国政府授予对苹果Apple Watch征收7.5%关税和对Mac Pro部件征收25%的关税豁免权。

  • Tecno Pop 5C首次推出5英寸LCD和Unisoc芯片组

    Tecno最新的入门级手机在这里,欢迎使用Pop 5C。规格列表相当适中,5英寸IPS LCD分辨率为854 x 480像素,Unisoc的Unisoc SC7731E芯片组只有1GB RAM和16GB存储空间有一个2400毫安时的微型电池,通过微型USB充电。过时的Android 10 Go版本涵盖了软件方面。有用于家庭、多任务处理和返回的电容式按钮一个5MP的摄像头在后面,而前面有一个2MP的自拍镜头。Tecno Pop 5C有湖蓝和深蓝色两种颜色。价格和可用性的细节仍然没有透露,但我们?

  • Shuttle推出DL20N系列无风扇迷你PC新品 采用Jasper Lake CPU平台

    Shuttle 刚刚推出了两款相当紧凑的 1.3 升迷你 PC,作为该公司旗下“XPC slim”系列无风扇准系统的新成员,DL20N 和 DL20N6 非常适合居家或办公使用。前者使用了英特尔赛扬 N4505 双核处理器,而后者升级到了四核心的奔腾 Silver N6005 CPU 。得益于充足的灵活性与可靠性,它们也是信息亭、工控、数字标牌等应用的理想选择。作为一款主打静音和低维护特性的迷你电脑,DL20N / DL20N6 配备了许多实用的端口。除了可连接三台显示器,

  • Apple Watch再次因拯救生命的干预措施而受到赞誉

    据AppleInsider报道,一块Apple Watch多次提醒一名女性她的心率过低,导致她多次到医院就诊并安装心脏起搏器。Patti Sohn联系了在圣路易斯的当地新闻团队KMOV4,解释了围绕Apple Watch救她一命的事件。当她坐在家里的沙发上时,她被提醒心率异常低,并被紧急送往医院。“我知道这不是一个医疗设备,但我告诉你,我真的相信它通过提醒我的心率救了我的命,”Patti Sohn说。“我本来是不会去医院的。”她第一次去医院没有诊断出任何?

  • 传英特尔DG2-128EU台式入门显卡配备ttps://m.cnbeta.com/cdn-cgi/l/email-protection" class="__c

    有关英特尔 Alchemist GPU 产品线的传闻已经持续好几周,现 Moores Law Is Dead 又为我们带来了最新的爆料。本次消息的主角是入门级的 DG2-128EU 版本,可知其有望搭载 6GB @ 96-bit 位宽的 GDDR6 显存。早前报道称这张台式机显卡可能只有 64-bit 的位宽,但 MLID 还有其它内容要分享。比如在桌面级的 DG2-128EU GPU / 6GB @ 96-bit GDDR6 显存之外,英特尔还有望推出 4GB GDDR6 的衍生版本,以及面向移动平台的 64-bit 位宽 ARC A

  • Hennessey发布狂野6轮电动超跑Project Deep Space

    六个轮子、六个电动马达和一个灵感来自私人飞机的机舱,当你以200mph或更高的速度行驶时:没有人会指责汽车制造商Hennessey在谈到他们的Project Deep Space超跑时缺乏想象力。这家公司也许因制造更强大的性能皮卡版本而闻名,更不用说Venom F5了,它正在通过一款四座的全电动公路火箭来承诺更疯狂的事情。Hennessey Project Deep Space看起来更像是Thunderbirds的作品,而不是传统的豪华轿车。虽然该公司只分享了几张设计草图,但这

  • ConceptsiPhone展示带有侧滑副屏的iPhone 14概念智能机设计

    今秋发布的 iPhone 13 系列智能机,获得了相当不错的市场反响。与此同时,各路概念设计师已经在畅想下一代 iPhone 可能是什么样子。本文要为大家介绍的,则是来自油管 ConcetpsiPhone 频道的“侧滑 iPhone 14”。虽然苹果不见得会如此剑走偏锋,但侧滑出来的第二块屏幕的功能设计还是相当有趣。设计方面,ConceptsiPhone 为“侧滑 iPhone 14”概念智能机选用了打孔屏前摄方案,且后摄模组也与玻璃后盖完全持平(现阶段显然难以兼顾

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天