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>

我无法理解我应该通过什么作为我的模块的参数取决于Prototype（基本上，每一个）。

提前感谢您的帮助！

罗尔夫

Answer 1

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

使用requirejs shim加载非AMD兼容的第三方库
修改现有课程以使用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模块，因为该脚本需要同步运行。所以不要包括那个！

RequireJS和Prototype

1 个答案: