Понимание, когда и как использовать Require.JS - PullRequest
Новая
       2

Понимание, когда и как использовать Require.JS

68 голосов
/ 23 января 2011

Я только начал работать с Require.JS, и мне немного неясно, в каких случаях его следует использовать, а также как правильно его использовать в этих случаях.

Вот как у меня сейчас настроены вещи с Require.JS. У меня есть две функции, functionA() и functionB(). Обе эти функции требуют дополнительной функции functionC() для правильной работы.

Я хочу загружать functionC () только тогда, когда это необходимо, то есть когда будет вызываться functionA () или 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 () на одной странице, выполняется ли дополнительная работа, так как они оба загружают файл functionC.js? Если так, то это проблема? И если так, есть ли способ настроить его так, чтобы они сначала проверили, загружен ли functionC.js, и загрузили ли его, только если он не был? Наконец, это правильное использование Require.JS?

Ответы [ 2 ]

47 голосов
/ 07 февраля 2011

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 снова.
22 голосов
/ 15 ноября 2012

Подробную информацию о RequireJS и модульности JavaScript можно найти здесь: Модульность JavaScript с RequireJS (от кода спагетти до кода равиоли)

...