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

Question

我一直在阅读 AMD和像 requirejs 这样的实现。大多数资源涵盖了用法和 API。

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

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

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

从 API 使用者的 Angular 来看，我所能理解的是文件 jquery.js 神奇地变成了 $、jQuery 等？这是如何实现的？

任何示例都会有所帮助。

How do AMD loaders work under the hood?是一本很有帮助的读物。

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

Answer 1

您不会将 javascript 文件加载到变量中，而是通过 browserify 或 webpack 等工具来完成。 Javascript 本身可以做到这一点，但这些模块会生成一个包含所有代码的文件。通过调用 require("file")，您正在调用 browserify 的函数来加载存储在代码中的名为“file”的文件。

例如，如果您有一个模块

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

这使得 module.exports 现在包含文件的“全部”内容

Browserify/webpack 将其放入返回该文件的 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") 调用它，它返回任何 module.export。