[英]Why does this cause “Mismatched anonymous define()” in requireJS?
I'm using a module called classie.js, whose codes can be viewed below: 我正在使用一个名为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 );
And I wrote this in HTML: 我用HTML编写了此代码:
<script data-main="js/main.js" src="bower_components/requirejs/require.js"></script>
<script src="js/classie.js"></script>
Then the browser complains: 然后浏览器抱怨:
[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)
What seems weird to me is the last lines in classie.js: 在我看来,很奇怪的是classie.js的最后几行:
//transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
//browser global
window.classie = classie;
}
It looks like classie.js
tries its best to keep compatible with AMD
because it test whether define
is a function and has amd
attribute before using it. 看起来
classie.js
尽最大努力保持与AMD
兼容性,因为它在使用define
之前先测试一下是否define
是一个函数并具有amd
属性。 But unfortunately this caused an error in the browser. 但不幸的是,这导致了浏览器错误。 Shouldn't
requirejs
the most famous library that implements AMD? 不应该要求
requirejs
是实现AMD的最著名的库吗? Why doesn't it work? 为什么不起作用?
As you discovered, classie is designed to be loaded with an AMD loader. 如您所见,classie旨在与AMD加载器一起加载。 So when you load it, it detect that an AMD loader is present and calls
define
. 因此,当您加载它时,它会检测到存在AMD加载器并调用
define
。
The problem is that you are trying to load it with a script
element. 问题是您正在尝试使用
script
元素加载它。 AMD modules must be loaded through their loader , not directly through script
. AMD模块必须通过它们的加载器加载 ,而不是直接通过
script
加载 。 This is why you are getting the error message you are getting. 这就是为什么您收到错误消息的原因。
I just commented the AMD check and called the regular way 我只是评论了AMD检查并称其为常规方式
/*
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
*/
window.classie = classie;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.