RequireJS и Prototype

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> 

Я не понимаю, что я должен передать в качестве аргумента для моих модулей в зависимости от прототипа (в основном, каждый из них).

Заранее благодарим за вашу помощь!

Rolf

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, так как этот сценарий должен запускаться синхронно. Так что не включайте это!