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

在您的情况下，这将是一个两步过程：

  1. 使用 requirejsshim加载不兼容 AMD 的第三方库
  2. 修改现有的类以使用define

对于不兼容 AMD 的第三方库（例如 Prototype），您需要设置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
    }
});

对于您编写的类，您可以使用如下模式：

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

使用shimconfig 选项将允许您使用任何非 AMD 脚本而无需修改它们。

最后一点，Modernizr 不打算用作 AMD 模块，因为该脚本需要同步运行。所以不要包括那个！

于 2012-06-03T13:20:09.817 回答