requirejs - 爲什麼加載模塊定義（）的作品，但在需要（）不

Question

代碼打擊不起作用，錯誤味精是：

Uncaught Error: Module name "text!templates/bookTemplate.html_unnormalized2" has not been loaded yet for context: _. Use require([])

define(['backbone', 'underscore', 'jquery'], function (Backbone, _, $) { 
    var bt = require('text!templates/bookTemplate.html'); 
    var BookView = Backbone.View.extend({ 
     initialize: function() { 
      this.render(); 
     }, 
     render: function() { 
      var template = _.template(bt, { 
       name: 'secret book' 
      }); 
      this.$el.html(template); 
     } 
    }); 
    return BookView; 
}); 

接我一招了「 text！templates/bookTemplate.html「來定義（），它的工作原理！以下是工作代碼：

define(['backbone', 'underscore', 'jquery', 
'text!templates/bookTemplate.html'], function (Backbone, _, $, bt) { 
     // var bt = require('text!templates/bookTemplate.html'); 
     var BookView = Backbone.View.extend({ 
      initialize: function() { 
       this.render(); 
      }, 
      render: function() { 
       var template = _.template(bt, { 
        name: 'secret book' 
       }); 
       console.info('template', template); 
       this.$el.html(template); 
      } 
     }); 
     return BookView; 
    }); // it is working 

正如我的理解，require（）和define（）在加載模塊中是相同的。它是否正確？你能幫我解釋爲什麼它在定義中工作，而不是在require（）中？

Answer 1

您正在使用字符串文字調用require。當你像這樣打電話給require時，它的行爲是pseudo-synchronous fashion。它像一個同步調用，因爲它會立即返回模塊。它是僞 - 同步，因爲模塊必須加載之前您稱爲僞同步形式require。

所以，你可以這樣做：

define(['backbone', 'underscore', 'jquery', 'text!templates/bookTemplate.html'], 
    function (Backbone, _, $) { 
    var bt = require('text!templates/bookTemplate.html'); 

，它會正常工作，因爲模塊會前require執行加載。或者你可以使用你在你的第二個代碼片段已經證明的方法：

define(['backbone', 'underscore', 'jquery', 
    'text!templates/bookTemplate.html'], function (Backbone, _, $, bt) { 

或者你可以使用使用CommonJS的包裝：

define(function(require, exports, module) { 
    var Backbone = require('backbone'); 
    var _ = require('underscore'); 
    var jquery = require('jquery'); 
    var bt = require('text!templates/bookTemplate.html'); 

這種包裝工作，因爲RequireJS會在運行時改變它分成：

define(["require", "exports", "module", "backbone", "underscore", "jquery", 
     "text!templates/bookTemplate.html"], function(require, exports, module) { 
    var Backbone = require('backbone'); 
    var _ = require('underscore'); 
    var jquery = require('jquery'); 
    var bt = require('text!templates/bookTemplate.html'); 

執行該模塊之前。