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模块必须通过其加载器加载，而不是直接通过script加载。这就是您收到错误消息的原因。

Answer 2

我刚刚评论过AMD支票，并以常规方式调用

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

为什么这会在requireJS中导致“不匹配的匿名定义（）”？

2 个答案: