3

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>

プロトタイプ (基本的にはすべてのモジュール) に応じて、モジュールの引数として渡す必要があるものを理解できません。

よろしくお願いいたします。

ロルフ

4

1 に答える 1

2

あなたの状況では、それは2段階のプロセスになります。

  1. requirejsshimを使用して、AMD互換ではないサードパーティライブラリをロードします
  2. 使用する既存のクラスを変更しますdefine

AMDと互換性のないサードパーティのライブラリ（プロトタイプなど）の場合は、プロパティを設定する必要がありますshim

その例は次のとおりです。

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
    }
});

作成するクラスには、次のようなパターンを使用できます。

classes / 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'
});

configオプションを使用shimすると、AMD以外のスクリプトを変更せずに使用できます。

最後に、Modernizrは、スクリプトを同期的に実行する必要があるため、AMDモジュールとして使用することを目的としていません。だからそれを含めないでください！

于 2012-06-03T13:20:09.817 に答える