RequireJS和Prototype

Question

RequireJS和Prototype

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>

我不明白我应该为依赖于 Prototype 的模块传递什么参数（基本上，每一个模块都要传递参数）。

谢谢你提前的帮助！

Rolf

- fbiville

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Smith · Accepted Answer

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

使用 requirejs 的 shim 加载不支持 AMD 的第三方库
修改您现有的类以使用 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
    }
});

你写的类可以采用以下模式:

classes/SomeClass.js

该类应该与文件名一致，并存储在一个名为“classes”的文件夹中。

// 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并赋值给一个变量即可。

要使用它，只需从需要它的页面require该类：

page.js

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

使用 shim 配置选项可以让您使用任何非 AMD 脚本而无需修改它们。

最后一点，Modernizr 不应作为 AMD 模块使用，因为该脚本需要同步运行。所以不要包含它！