1

例如，有人写了一个很棒的 jQuery 插件，我想在我的网站上使用它，但它不是 AMD 的。如何将它添加到requireJS？出于演示目的，假设这个插件被称为“codeFormatter”，它接受任何<pre>标签并对其进行格式化，以便每一行都有索引。显然，codeformatter 需要 jQuery 才能工作。

假设在添加 codeFormatter 之前，<pre>我的页面上有一个部分如下所示：

var foo = function() {
    console.log("foo");
}

假设这个 jQuery codeformatter 是通过以下方式调用和触发的（传统上）：

<script src="scripts/lib/jquery.js"></script>
<script src="scripts/codeformatter.js"></script>
<script>
    $("pre").codeFormatter();
</script>

添加codeFormatter后：

1. var foo = function() {
2.     console.log("foo");
3. }

反正由于这个codeFormatter.js插件是别人远程维护的，比如存储在github上，我复制代码再用define()方法也没有意义。

使用 shim 或定义或要求等将 codeFormatter.js 放入 requireJS 的最佳做法是什么？

4

2 回答 2

0

您的需求是一个非常常见的需求，这就是 RequireJS 文档更详细地概述 jQuery 插件的原因。shim更详细地阅读配置选项 - http://requirejs.org/docs/api.html#config-shim

于 2013-01-15T10:56:21.693 回答
0

如果插件体积小，建议将多个插件拼接成一个 JS 文件，在 jQuery 之后加载。

如果插件是大文件（例如 jquery-ui）并且我不想连接它们或想从 CDN 中提取它们，我通常会像这样滚动一个命名定义：

<script src="path/to/amd_loader.js"></script>
<script src="path/to/jquery.js"></script>
<script>

define(
    'jqueryplugins'
    , [
        'jquery'
        , 'js!plain/js/fileA.js' // loading through "js" plugin
        , 'actually/an/amd/compatible/module'
        , 'js!plain/js/fileB.js' // loading through "js" plugin
    ]
    // because plugins AUGMENT $, no point returning them separately
    // just return back the augmented jQuery reference.
    , function($){return $} 
)

</script>
...
<script>

require(
    ['jqueryplugins', 'path/to/mycode']
    , function($, mycode){
        mycode($)
    }
)

</script>

请注意，虽然 jQuery 是一个 AMD 模块，但我不会通过 AMD 加载程序为它进行初始获取。它将自己注册为命名模块，我稍后再使用它。（请参阅https://stackoverflow.com/a/14298476/366864）这消除了对复杂shim和path配置的需要。如果您不手动订购 jQuery 的预加载，您将不得不通过其他方式处理在插件之前订购 jquery 加载的需要。

于 2013-01-15T20:12:24.793 回答