Понимание того, когда и как использовать Require.JS
Я только начал работать с Require.JS, и я немного неясен в соответствующих случаях, в которых он должен использоваться, а также в правильном способе использовать его в этих случаях.
Вот как у меня в настоящее время есть вещи, заданные с Require.JS. У меня есть две функции: functionA()
и functionB()
. Обе эти функции требуют дополнительной функции functionC()
для правильной работы.
Я хочу только загрузить функцию C(), когда это необходимо, т.е. когда будет вызвана функция A() или functionB(). Поэтому у меня есть следующие файлы:
functionC.js
functionC(){
//do stuff
}
functionA.js
functionA(){
define(['functionC'],function(){
//functionC() is loaded because it is listed as a dependency, so we can proceed
//do some functionA() stuff
});
}
functionB.js
functionB(){
define(['functionC'],function(){
//functionC() is loaded because it is listed as a dependency, so we can proceed
//do some functionB() stuff
});
}
Итак, правильно ли это настроено? И если я в конечном итоге вызываю функции functionA() и functionB() на одной странице, это дополнительная работа, выполняемая, поскольку они оба загружают файл functionsC.js? Если да, то это проблема? И если да, есть ли способ настроить его, чтобы они сначала проверяли, загружен ли файл function.js еще, и загружать его, если он еще не был? Наконец, это подходящее использование Require.JS?
Ответы
Ответ 1
define()
должен использоваться только для определения модуля. В приведенном выше примере, где кусок кода должен быть динамически загружен, использование require()
более уместно:
functionA.js
functionA(){
require(['functionC'],function(functionC){
//use funcC in here to call functionC
});
}
Некоторые примечания:
-
require([])
является асинхронным, поэтому, если вызывающий объект functionA
ожидает возвращаемое значение из этой функции, скорее всего, будут ошибки. Лучше, если functionA
принимает обратный вызов, который вызывается, когда functionA
выполняется с его работой.
- Вышеприведенный код вызовет
require()
для каждого вызова functionA
; однако, после первого вызова, нет штрафа за загрузку functionC.js
, он загружается только один раз. При первом вызове require()
он загружает functionC.js
, но в остальное время RequireJS знает, что он уже загружен, поэтому он вызовет функцию function(functionC){}
без запроса functionC.js
снова.
Ответ 2
Здесь вы можете найти подробную информацию о модульности RequireJS и JavaScript: Модульность JavaScript с RequireJS (от кода спагетти до кода равиоли)