javascript - 为什么这会导致 requireJS 中出现 "Mismatched anonymous define()"？

Question

我正在使用一个名为 classie.js 的模块，其代码可以在下面查看:

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

//transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  //browser global
  window.classie = classie;
}

})( window );

我用 HTML 写了这个:

<script data-main="js/main.js" src="bower_components/requirejs/require.js"></script>
<script src="js/classie.js"></script>

然后浏览器提示:

[Error] Error: Mismatched anonymous define() module: [object Object]
http://requirejs.org/docs/errors.html#mismatch
    defaultOnError (require.js, line 141)
    onError (require.js, line 545)
    intakeDefines (require.js, line 1229)
    (anonymous function) (require.js, line 1416)

对我来说奇怪的是 classie.js 中的最后几行:

//transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  //browser global
  window.classie = classie;
}

看起来classie.js尽力与AMD保持兼容，因为它测试define是否是一个函数并且具有amd 属性，然后使用它。但不幸的是这导致了浏览器的错误。 requirejs 不应该是最著名的实现 AMD 的库吗？为什么不起作用？

Answer 1

正如您所发现的，classie 被设计为使用 AMD 加载程序进行加载。因此，当您加载它时，它会检测到 AMD 加载程序存在并调用 define。

问题是您正在尝试使用 script 元素加载它。 AMD 模块必须通过其加载程序加载，而不是直接通过脚本加载。这就是您收到错误消息的原因。