Javascript 为什么“胡子”没有定义？（使用RequireJS）

我可以看到

mustache.js

文件已经加载（Firebug Net选项卡中的代码200），那么为什么会出现一个错误，说“ReferenceError:mustache未定义”

我已经看了一些关于这个主题的相关文章，但似乎没有一篇能阐明这个问题。感谢您的帮助

相关HTML

<div class="contact"></div>

<script data-main="js/modules/app.js" src="js/lib/require.min.js"></script>

templates.js

var KBCOM = KBCOM || {};
(function (kbcom) {
  kbcom.app = {
    data: {
      kboucher: "{ \"firstName\": \"Kevin\", \"lastName\": \"Boucher\", \"dob\": \"1970-05-01T05:00:00.000Z\", \"emailAddress\": \"example@mail.com\", \"telephone\": \"512-555-1212\" }"
    },
    init: function () {
      kbcom.templates.loadTemplate(
        kbcom.templates.vcard,
        JSON.parse(this.data.kboucher),
        document.querySelector('.contact'));
    }
  };
}(KBCOM));
require.config({
  baseUrl: '/js/modules',
  paths: {
    Mustache: '/js/lib/mustache',
    domReady: '/js/lib/domReady'
  }
});
require(['domReady', 'templates', 'Mustache'], function (domReady) {
  domReady(function () {
    KBCOM.app.init();
  });
});

var KBCOM = KBCOM || {};
(function (kbcom) {
  kbcom.templates = {
    vcard: '<ul>\
              <li class="fn">{{fisrtName}} {{lastName}}</li>\
              <li class="email">{{emailAddress}}</li>\
              <li class="tel">{{telephone}}</li>\
              <li class="bday">{{dob}}</li>\
            </ul>',
    loadTemplate: function (template, data, element) {
      element.innerHTML = Mustache.render(template, data);
    }
  };
}(KBCOM));

require(['domReady', 'templates'], function (domReady, templates) {

  //append templates to namespace
  KBCOM.templates = templates;

  domReady(function () {
    KBCOM.app.init();
  });
});

define([    
  //dependencies
  'Mustache'
], function( Mustache ){ 

  //module code
  return {
    vcard: '...',
    loadTemplate: function ( template, data, element ) {
      element.innerHTML = Mustache.render( template, data );
    }
  };

});

var KBCOM=KBCOM | |{}；
（功能（kbcom）{
kbcom.templates={
vcard:“
\
{{fisrtName}{{lastName}}
\
{{emailAddress}}
\
{{telephone}
\
{{dob}
\
“，
loadTemplate：函数（模板、数据、元素）{
element.innerHTML=Mustache.render（模板、数据）；
}
};
}(KBCOM);；

Require将库的变量绑定到第二个参数中给出的函数参数，因此要在代码中使用模板和小胡子，您应该执行以下操作：

require( [ 'domReady', 'templates', 'Mustache' ],
    function( domReady, templates, Mustache ) {
        domReady( function () {
            KBCOM.app.init();
        } );
    }
);

---

Require将库的变量绑定到第二个参数中给出的函数参数，因此要在代码中使用模板和Mustache，您应该执行以下操作：

require( [ 'domReady', 'templates', 'Mustache' ],
    function( domReady, templates, Mustache ) {
        domReady( function () {
            KBCOM.app.init();
        } );
    }
);

templates.js

“需要”

Mustache

，因此需要在

templates.js

中定义该依赖项。它还需要定义为模块，因此您需要使用

define

来正确创建模块

app.js

var KBCOM = KBCOM || {};
(function (kbcom) {
  kbcom.app = {
    data: {
      kboucher: "{ \"firstName\": \"Kevin\", \"lastName\": \"Boucher\", \"dob\": \"1970-05-01T05:00:00.000Z\", \"emailAddress\": \"example@mail.com\", \"telephone\": \"512-555-1212\" }"
    },
    init: function () {
      kbcom.templates.loadTemplate(
        kbcom.templates.vcard,
        JSON.parse(this.data.kboucher),
        document.querySelector('.contact'));
    }
  };
}(KBCOM));
require.config({
  baseUrl: '/js/modules',
  paths: {
    Mustache: '/js/lib/mustache',
    domReady: '/js/lib/domReady'
  }
});
require(['domReady', 'templates', 'Mustache'], function (domReady) {
  domReady(function () {
    KBCOM.app.init();
  });
});

var KBCOM = KBCOM || {};
(function (kbcom) {
  kbcom.templates = {
    vcard: '<ul>\
              <li class="fn">{{fisrtName}} {{lastName}}</li>\
              <li class="email">{{emailAddress}}</li>\
              <li class="tel">{{telephone}}</li>\
              <li class="bday">{{dob}}</li>\
            </ul>',
    loadTemplate: function (template, data, element) {
      element.innerHTML = Mustache.render(template, data);
    }
  };
}(KBCOM));

require(['domReady', 'templates'], function (domReady, templates) {

  //append templates to namespace
  KBCOM.templates = templates;

  domReady(function () {
    KBCOM.app.init();
  });
});

define([    
  //dependencies
  'Mustache'
], function( Mustache ){ 

  //module code
  return {
    vcard: '...',
    loadTemplate: function ( template, data, element ) {
      element.innerHTML = Mustache.render( template, data );
    }
  };

});

templates.js

var KBCOM = KBCOM || {};
(function (kbcom) {
  kbcom.app = {
    data: {
      kboucher: "{ \"firstName\": \"Kevin\", \"lastName\": \"Boucher\", \"dob\": \"1970-05-01T05:00:00.000Z\", \"emailAddress\": \"example@mail.com\", \"telephone\": \"512-555-1212\" }"
    },
    init: function () {
      kbcom.templates.loadTemplate(
        kbcom.templates.vcard,
        JSON.parse(this.data.kboucher),
        document.querySelector('.contact'));
    }
  };
}(KBCOM));
require.config({
  baseUrl: '/js/modules',
  paths: {
    Mustache: '/js/lib/mustache',
    domReady: '/js/lib/domReady'
  }
});
require(['domReady', 'templates', 'Mustache'], function (domReady) {
  domReady(function () {
    KBCOM.app.init();
  });
});

var KBCOM = KBCOM || {};
(function (kbcom) {
  kbcom.templates = {
    vcard: '<ul>\
              <li class="fn">{{fisrtName}} {{lastName}}</li>\
              <li class="email">{{emailAddress}}</li>\
              <li class="tel">{{telephone}}</li>\
              <li class="bday">{{dob}}</li>\
            </ul>',
    loadTemplate: function (template, data, element) {
      element.innerHTML = Mustache.render(template, data);
    }
  };
}(KBCOM));

require(['domReady', 'templates'], function (domReady, templates) {

  //append templates to namespace
  KBCOM.templates = templates;

  domReady(function () {
    KBCOM.app.init();
  });
});

define([    
  //dependencies
  'Mustache'
], function( Mustache ){ 

  //module code
  return {
    vcard: '...',
    loadTemplate: function ( template, data, element ) {
      element.innerHTML = Mustache.render( template, data );
    }
  };

});

templates.js

“需要”

Mustache

，因此需要在

templates.js

中定义该依赖项。它还需要定义为模块，因此您需要使用

define

来正确创建模块

app.js

var KBCOM = KBCOM || {};
(function (kbcom) {
  kbcom.app = {
    data: {
      kboucher: "{ \"firstName\": \"Kevin\", \"lastName\": \"Boucher\", \"dob\": \"1970-05-01T05:00:00.000Z\", \"emailAddress\": \"example@mail.com\", \"telephone\": \"512-555-1212\" }"
    },
    init: function () {
      kbcom.templates.loadTemplate(
        kbcom.templates.vcard,
        JSON.parse(this.data.kboucher),
        document.querySelector('.contact'));
    }
  };
}(KBCOM));
require.config({
  baseUrl: '/js/modules',
  paths: {
    Mustache: '/js/lib/mustache',
    domReady: '/js/lib/domReady'
  }
});
require(['domReady', 'templates', 'Mustache'], function (domReady) {
  domReady(function () {
    KBCOM.app.init();
  });
});

var KBCOM = KBCOM || {};
(function (kbcom) {
  kbcom.templates = {
    vcard: '<ul>\
              <li class="fn">{{fisrtName}} {{lastName}}</li>\
              <li class="email">{{emailAddress}}</li>\
              <li class="tel">{{telephone}}</li>\
              <li class="bday">{{dob}}</li>\
            </ul>',
    loadTemplate: function (template, data, element) {
      element.innerHTML = Mustache.render(template, data);
    }
  };
}(KBCOM));

require(['domReady', 'templates'], function (domReady, templates) {

  //append templates to namespace
  KBCOM.templates = templates;

  domReady(function () {
    KBCOM.app.init();
  });
});

define([    
  //dependencies
  'Mustache'
], function( Mustache ){ 

  //module code
  return {
    vcard: '...',
    loadTemplate: function ( template, data, element ) {
      element.innerHTML = Mustache.render( template, data );
    }
  };

});

templates.js

var KBCOM = KBCOM || {};
(function (kbcom) {
  kbcom.app = {
    data: {
      kboucher: "{ \"firstName\": \"Kevin\", \"lastName\": \"Boucher\", \"dob\": \"1970-05-01T05:00:00.000Z\", \"emailAddress\": \"example@mail.com\", \"telephone\": \"512-555-1212\" }"
    },
    init: function () {
      kbcom.templates.loadTemplate(
        kbcom.templates.vcard,
        JSON.parse(this.data.kboucher),
        document.querySelector('.contact'));
    }
  };
}(KBCOM));
require.config({
  baseUrl: '/js/modules',
  paths: {
    Mustache: '/js/lib/mustache',
    domReady: '/js/lib/domReady'
  }
});
require(['domReady', 'templates', 'Mustache'], function (domReady) {
  domReady(function () {
    KBCOM.app.init();
  });
});

var KBCOM = KBCOM || {};
(function (kbcom) {
  kbcom.templates = {
    vcard: '<ul>\
              <li class="fn">{{fisrtName}} {{lastName}}</li>\
              <li class="email">{{emailAddress}}</li>\
              <li class="tel">{{telephone}}</li>\
              <li class="bday">{{dob}}</li>\
            </ul>',
    loadTemplate: function (template, data, element) {
      element.innerHTML = Mustache.render(template, data);
    }
  };
}(KBCOM));

require(['domReady', 'templates'], function (domReady, templates) {

  //append templates to namespace
  KBCOM.templates = templates;

  domReady(function () {
    KBCOM.app.init();
  });
});

define([    
  //dependencies
  'Mustache'
], function( Mustache ){ 

  //module code
  return {
    vcard: '...',
    loadTemplate: function ( template, data, element ) {
      element.innerHTML = Mustache.render( template, data );
    }
  };

});

---

此建议产生了相同的结果。此建议产生了相同的结果。可能是在我调用

KBCOM.app.init（）时，在
domReady
之前加载了模板，但没有调用任何内容不应该在该点加载所有内容吗？（我正在深入研究你关于结构的第二条评论…）好的。我对你的建议做了一点调整，以便在我的“名称空间”中传递，结果成功了。（将用它更新您的答案。）非常感谢@KevinBoucher您可以将
模板
对象返回到
app.js
并附加到那里。它将更干净，更符合AMD模块的定义。更新了我的答案。有趣。。。感谢这一点，我们将更加遵守AMD模块的定义。这可能是因为您的模板在Mustach之前加载，但在我调用
KBCOM.app.init（）时，
domReady
才会调用不应该在该点加载所有内容吗？（我正在深入研究你关于结构的第二条评论…）好的。我对你的建议做了一点调整，以便在我的“名称空间”中传递，结果成功了。（将用它更新您的答案。）非常感谢@KevinBoucher您可以将
模板
对象返回到
app.js
并附加到那里。它将更干净，更符合AMD模块的定义。更新了我的答案。有趣。。。并将坚持更多的AMD模块定义感谢这一点。