RequireJS和原型

Question

我正在考慮使用RequireJS將我的腳本組織到模塊中。

基本上，我的每個腳本都定義了一個類var MyScript = Class.create({...})（ext/中的腳本除外，它們是第三方庫）。

以現實世界的例子，我將如何能夠組織這些導入作爲模塊？

<script type="text/javascript" src="js/ext/prototype.js"></script> 
<script type="text/javascript" src="js/ext/scriptaculous.js"></script> 
<script type="text/javascript" src="js/ext/effects.js"></script> 
<script type="text/javascript" src="js/ext/carousel.js"></script> 
<script type="text/javascript" src="js/lib/sanityChecker.js"></script> 
<script type="text/javascript" src="js/lib/logger.js"></script> 
<script type="text/javascript" src="js/ext/modernizr.js"></script> 
<script type="text/javascript" src="js/lib/localStorageChecker.js"></script> 
<script type="text/javascript" src="js/lib/domNavigationUtils.js"></script> 
<script type="text/javascript" src="js/lib/externalLinkDetector.js"></script> 
<script type="text/javascript" src="js/lib/gondola.js"></script> 
<script type="text/javascript" src="js/pages/common.js"></script> 
<script type="text/javascript" src="js/pages/homepage.js"></script> 

我不明白我應該通過什麼作爲我的模塊的參數取決於原型（基本上，每個人）。

在此先感謝您的幫助！

羅爾夫

Answer 1

在您的情況這將是一個兩個步驟的過程：

1. 使用requirejs shim來加載不兼容AMD
2. 修改現有的類使用第三方庫define

對於不兼容AMD的第三方庫（如Prototype）you will need to setup shim properties

這方面的一個例子是：

require.config({ 
    baseUrl: 'scripts/', 
    paths: { 
     'prototype': 'lib/prototype', 
     'scriptaculous': 'lib/scriptaculous' 
    }, 
    shim: { 
     'prototype': { 
      // Don't actually need to use this object as 
      // Prototype affects native objects and creates global ones too 
      // but it's the most sensible object to return 
      exports: 'Prototype' 
     }, 
     'scriptaculous': { 
      deps: ['prototype'], 
      exports: 'Scriptaculous' 
     } 
     // Add more third party libs/plugins and their dependencies 
    } 
}); 

對於你寫的，你可以用下面這樣的模式類：

類/ SomeClass.js

// Sugar syntax - http://requirejs.org/docs/whyamd.html#sugar 
define(function(require){ 
    require('prototype'); // Ensure Prototype is present 

    return Class.create({ 
     initialize: function(name) { 
      console.log('name');  
     } 
    }) 
}); 

如果您需要擴展任何現有的類，只需要這些類，並將它們分配給一個變量。

，並使用它，只是require從頁面需要它的類：

page.js

require(['classes/SomeClass'], function(SomeClass){ 
    new SomeClass('john'); // logs 'John' 
}); 

使用shim配置選項將允許你使用任何非AMD腳本無需修改它們。

最後一個注意事項，Modernizr並不打算用作AMD模塊，因爲該腳本需要同步運行。所以不要包括那個！