[英]requirejs unexpected behaviour
// conifg.js
require.config({
paths: {
'main': 'main',
'socketio': './libs/socket.io/socket.io',
'plotly': './libs/plotly/plotly-latest.min',
'renderDataToPlotly': './scripts/renderDataToPlotly',
'jquery': './libs/jquery/jquery-2.1.4.min',
'jqueryUI': './libs/jquery/jquery-ui-1.11.4.custom/jquery-ui.min',
'sliders': './scripts/sliders',
'makePlotlyWindowResponsive': './scripts/makePlotlyWindowResponsive'
},
shim: {
'jqueryUI': ['jquery']
}
});
require(['main']);
// main.js
define([
'jquery',
'jqueryUI',
'socketio',
'sliders',
'makePlotlyWindowResponsive',
'renderDataToPlotly'
],
function($, ui, io, sliders, makePlotlyWindowResponsive, renderDataToPlotly) {
//
}
);
// renderDataToPlotly.js and makePlotlyWindowResponsive.js
define(['plotly'], function() {
});
When I load the page I get this load order: 当我加载页面时,我得到以下加载顺序: As you can see, makePlotlyWindowResponsive.js
(1, on image) loads before plotly-latest.min.js
(2, on image). 如您所见, makePlotlyWindowResponsive.js
(图像上为1)先于plotly-latest.min.js
(图像上为2)加载。 As I understand requirejs mechanics, I would spect a Plotly is not defined
error on makePlotlyWindowResponsive.js
, but I'm not getting any. 据我了解requirejs机制,我会在Plotly is not defined
上makePlotlyWindowResponsive.js
一个Plotly is not defined
错误,但我什么也没得到。 Everything works. 一切正常。
I want to understand requirejs and how it works. 我想了解requirejs及其工作方式。
Question 1 : How there is not an error? 问题1 :怎么没有错误?
Question 2 : That means that, despite load order, there is no error if files are loaded before page is fully loaded? 问题2 :这意味着,尽管加载顺序不同,但在页面完全加载之前加载文件是否没有错误?
Thanks for your time! 谢谢你的时间!
When requirejs receives a script from the network, it runs that script. 当requirejs从网络接收脚本时,它将运行该脚本。 the require
(or define
?) function says "download these other scripts, then run them, and once you've got all their return values, run this function". require
(或define
?)函数说:“下载其他脚本,然后运行它们,获得所有返回值后,运行此函数”。 So it waits for the other scripts to load and return their values before calling the function in this one. 因此,它等待其他脚本加载并返回它们的值,然后再在此脚本中调用函数。 In short, the order in which they load may not be the same as the order in which their functions run. 简而言之,它们加载的顺序可能与它们的功能运行的顺序不同。
The relative order you witnessed between plotly.min.js
and the modules that depend on it is necessary . 您在plotly.min.js
和依赖它的模块之间看到的相对顺序是必要的 。 RequireJS has no reason to fetch plotly.min.js
until makePlotlyWindowResponsive
or renderDataToPlotly
have been fetched. 在获取了makePlotlyWindowResponsive
或renderDataToPlotly
之前,RequireJS没有理由获取plotly.min.js
。
Terminological note: I say "fetching (a module)" for the action of issuing an HTTP query on the network and I'll use "defining (a module)" for the action of running the factory function of a module. 术语注释:对于在网络上发出HTTP查询的操作,我说“获取(模块)”,对于运行模块的工厂功能的操作,我将使用“定义(模块)”。 The term "loading" is too ambiguous. 术语“加载”太含糊。
What happens is: 发生的是:
You require main
. 您需要main
。 So RequireJS fetches main
. 因此,RequireJS获取main
。
RequireJS executes the define
in main
. RequireJS在main
执行define
。 The factory (the callback) cannot be run until the dependencies are defined themselves. 在自己定义依赖项之前,工厂(回调)无法运行。 So it initiates fetching the dependencies. 因此,它开始获取依赖项。 This fetching can happen in any order. 提取可以任何顺序进行。 Among the dependencies are makePlotlyWindowResponsive
and renderDataToPlotly
. 其中的依赖项包括makePlotlyWindowResponsive
和renderDataToPlotly
。
RequireJS fetches makePlotlyWindowResponsive
and renderDataToPlotly
. RequireJS获取makePlotlyWindowResponsive
和renderDataToPlotly
。 (Their relative order does not matter.) (它们的相对顺序无关紧要。)
RequireJS executes the define
of either makePlotlyWindowResponsive
or renderDataToPlotly
. RequireJS执行makePlotlyWindowResponsive
或renderDataToPlotly
的define
。 This is where it learns that it must fetch the module plotly
which resolves to ./libs/plotly/plotly-latest.min.js
. 这是它学习它必须获取模块plotly
解析为./libs/plotly/plotly-latest.min.js
。 Before this point, RequireJS has no idea that plotly
will be needed. 在此之前,RequireJS还不知道将需要plotly
。 The fact that it is among the paths
is not a sufficient condition to trigger its loading. 它位于paths
之间的事实不足以触发其加载。
RequireJS fetches ./libs/plotly/plotly-latest.min.js
. RequireJS获取./libs/plotly/plotly-latest.min.js
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.