如何捕获变量中 HTML 脚本标记的结果？

Question

我一直在阅读有关 AMD 和 requirejs 等实现的信息。大多数资源涵盖了用法和 API 的用法。

但是，在实现这一点时，如何将 JavaScript 文件加载到一个变量中呢？例如，您可以看到这样的函数：

define(['jquery'], function($){
});

var jquery = require('./jquery');

从API消费者的角度来看，我只能理解文件jquery.js神奇地变成了$、jQuery等等？这是如何实现的？

任何示例都会有所帮助。

How do AMD loaders work under the hood? 很有帮助。

编辑：我认为下面的 eval 答案很好，因为在某些方面它实际上是一个 eval 问题。但我想从 AMD specs 实现的角度了解这一点。

Answer 1

你知道怎么说 eval(alert("hello!")) 并执行代码吗？

您还可以：

var str = "hello!"
eval('alert("' + str + '");')

所以下一步是创建一个包含您的实际脚本的文件：

var str = "hello"
alert(str)

然后您可以使用标准 AJAX 请求将该文件提取到变量中，然后您可以 eval() 该变量。

从技术上讲，eval() 被认为是邪恶的 - 充满危险 - 但还有其他解决方案（例如，将脚本标记注入文档正文）。我只是在这里使用 eval() 以使解释更容易。

Answer 2

您不会将 javascript 文件加载到变量中，而是通过诸如 browserify 或 webpack 之类的东西来完成。 Javascript 本身可以执行此操作，但这些模块会生成一个包含所有代码的文件。通过调用 require("file")，您正在调用 browserify 的函数来加载存储在代码中的名为 "file" 的文件。

例如，如果您有一个模块

function demoModule(){
    console.log("It works!");
}
module.exports = demoModule

这使得 module.exports 现在包含文件的 "entire" 内容

Browserify/webpack 将其放入函数中 returns 该文件的 module.exports

function require(filename) {
    switch(filename){
        case "demofile":
            let module = {exports:{}}; ((module) => {
               function demoModule(){
                   console.log("It works!");
               }
               module.exports = demoModule
            })(module)
            return module.exports;
    }
};
    
require("demofile")();

你的文件变成了一个函数，你可以用 require("demofile") 调用它 returns 任何 module.export.

Answer 3

扩展 theGleep 所说的内容。

像这样：

var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0;";

console.log('z is ', eval(str));

更多阅读here。

但要非常谨慎地使用 eval() 并且绝对确定 eval() 的陷阱和缺点。

不要使用它，除非它是唯一的选择。

也读一下这个answer。

Answer 4

define 的工作方式并不是通过加载 ~~"HTML Script into a variable"~~。通常一个普通的脚本可以有多个变量，所以捕获一个变量的值是没有意义的！如果需要，eval 方法可能会做类似的事情。它捕获了 JavaScript 源代码中的所有内容。

AMD 中的真正关键是 define API 将 name 映射到 function。每当您 require 使用该名称时，它只会调用该函数和 return 给您的值。此 return 值应为模块。这是一个让一切正常运转的约定！

换句话说，AMD使用了一个有趣的约定（设计模式）来确保我们在JavaScript代码中得到模块化的效果。这是一个间接级别。不同于 "write your code and get it executed in the global scope" 范例的常规样式，您只需编写一个函数，该函数 return 是一个单一值，用于捕获您想要作为模块公开给消费者的所有内容！

如何捕获变量中 HTML 脚本标记的结果？

How can you capture the result of a HTML script tag in a variable?

javascript

asynchronous

amd