需要JS和原型

RequireJS and Prototype

本文关键字：原型 JS 需要      更新时间：2023-09-26

我正在考虑使用 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>

我不明白我应该根据原型（基本上，每一个）作为我的模块的参数传递什么。

提前感谢您的帮助！

罗尔夫

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

  1. 使用 requirejs shim加载不兼容 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
    }
});

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

类

/某类.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类：

页.js

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

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

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

相关文章：