爲什麼在requireJS中會導致「不匹配的匿名定義（）」？

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;