requirejs - 为什么在 define() 中加载模块有效，但在 require() 中无效

Question

Code blow 不起作用，错误消息是：

未捕获的错误：模块名称 “文本！模板/bookTemplate.html_unnormalized2”尚未加载 然而对于上下文：_。使用 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()，它可以工作！以下是工作代码：

   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() 在加载模块时是相同的。这个对吗？你能帮我解释一下为什么它在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 执行之前加载。或者您可以使用您在第二个代码 sn-p 中显示的方法：

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');

在执行模块之前。