javascript - 为什么 Foundation 似乎废弃了 RequireJS 模块？-6ren

javascript - 为什么 Foundation 似乎废弃了 RequireJS 模块？

转载作者：行者123 更新时间：2023-12-03 07:33:23

我的 HTML 是这样的:

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script data-main="/static/scripts/main" src="/static/scripts/require.js"></script>
</head>
<body></body>
</html>

static/scripts/main 看起来像这样:

requirejs.config({
    paths: {
        "foundation": '/static/scripts/foundation-6/js/foundation.min'
    }
});    

require(["foundation", "moduleA"], function(foundation, moduleA) {
    console.log("main.js loaded dependencies");
});

而static/scripts/moduleA.js是:

console.log("ModuleA loaded");

define(function() {    
    console.log("inside moduleA callback");
    return {
        Blah: "Blah!"
    }    
});

我可以看到 moduleA.js 脚本由 require 加载，但它没有被视为模块，并且我从控制台看到内部回调永远不会被执行。 main.js 中的 console.log 行中的断点显示，作为 moduleA 返回的不是我期望的模块，而是一个Interchange(element, options) 的实例，而返回的 foundation 对象是 Abide(element, options) 的实例。这些似乎是基金会组件，但我不明白为什么它们被返回到这里。

但是，假设我随后通过将 main.js 中的 require 语句更改为以下内容来删除 Foundation 依赖项:

require(["moduleA"], function(moduleA) {
    console.log("main.js loaded dependencies");
});

运行使一切按预期工作 - 我现在在控制台中看到“内部 moduleA 回调”消息，并且断点显示我的 moduleA 对象按预期包含 Blah 成员。

这是怎么回事？ Foundation 如何拦截此 require() 调用并返回不需要的内容？我是否应该通过其他方式将 Foundation 纳入该项目？

最佳答案

首先你应该弄清楚基础库是AMD模块。您应该打开foundation.js并尝试在开头找到此代码:

if (typeof define === 'function' && define['amd']) {
    // [1] AMD anonymous module
    define(['exports', 'require'], factory);
}

所以foundation.js不是AMD模块。 RequireJS 有shim非 AMD 模块的选项。接下来您应该检查哪些变量基础返回到全局范围。在302行中您可以看到以下代码:window.Foundation = Foundation;。全局变量是Foundation。结果代码应该是:

requirejs.config({
    paths: {
        "foundation":   'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation',     
    },
    shim:{
        "foundation":{
            exports:"Foundation"
        }
    }
});

但不幸的是对于 Foundation.js 来说还不够。在303行你可以看到foundation.js是jquery插件。所以你应该通过 RequireJS 包含 jquery。 jQuery 是 AMD 模块。你可以在文件里面看到它。您应该在 shim 中包含 jQuery 作为 Foundation.js 的依赖项。所以结果代码将是:

main.js:

requirejs.config({
    paths: {
        "foundation":   'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation',
        "jquery":       "https://code.jquery.com/jquery-2.2.1"
    },
    shim:{
        "foundation":{
            deps: ['jquery'],
            exports:"Foundation"
        }
    }
});  

require(["foundation", "moduleA"], function(foundation,moduleA) {
    debugger;
    console.log("main.js loaded dependencies");
});

index.html:

<html>
    <head>
       <script data-main="main.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js">  </script>
    </head>
    <body>
    </body>
</html>

moduleA.js 是相同的。

ps:如果您能纠正我的语法错误，我将不胜感激。

关于javascript - 为什么 Foundation 似乎废弃了 RequireJS 模块？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35721445/