Question

我目前有一个requirejs模块，该模块位于远程服务器（例如下面的服务器）上，该模块定义了一些主干视图，模型

define(['...'], function() {
   ......
   return {
     model : suggestion_model,
     view : suggestion_view
   };
});

正在动态加载到另一个文件中

let script = $("<script>").attr({
src: "http://localhost:9000/assets/javascripts/autocomplete/autocomplete-model-view.js",
});
console.log(script);
$("head:first").append(script);

当我转到标签时，我看到文件已加载，但是我无法访问任何代码中要使用的模块。

我该如何实际访问其他一些文件中定义的requirejs模块？

Answer 1

您可能无法通过直接将它们插入脚本标签中来访问远程requirejs模块。您可以尝试以下步骤来访问它们。

假设我们有一个名为remotemodule的远程模块

define(['remotemodule'], function() {
   return {
     model : function(){
       return "Im a remote model";
     },
     view : function(){
       return "Im a remote view";
     }
   };
});

要在浏览器中访问它。.

您需要先在HTML中添加requirejs脚本。

<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js" type="text/javascript"></script>

这应该给您一个全局对象require。您可以在config上调用require函数，通过为脚本指定remotemodule来定义path。

require.config({
            paths: {
                "remotemodule": "https://raggedlostcone.nithinthampi.repl.co/"
            }
        });

然后您可以调用require(["remotemodule"], function callback)来加载脚本。脚本加载后，这里便会执行回调。

require(["remotemodule"], function(loaded_script){
            console.log(loaded_script);
            document.getElementById("remotemodule").innerText = loaded_script.model();
        })

下面的一个简单演示。

require.config({
            paths: {
                "remotemodule": "https://raggedlostcone.nithinthampi.repl.co/"
            }
        });
        
        require(["remotemodule"], function(loaded_script){
            console.log(loaded_script);
            document.getElementById("remotemodule").innerText = loaded_script.model();
        })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js" type="text/javascript"></script>
</head>
<body>
    <h1 id="remotemodule">
        loading...
    </h1>
</body>
</html>

从<script>标签访问requirejs模块

1 个答案: