在浏览器和节点中动态加载JavaScript文件

Question

My JavaScript library needs to be able to load optional scripts dynamically. I know of several ways to do this, but my library should be functional in both browsers and Node.js, and I wouldn't like to generate multiple versions. I also wouldn't like to reinvent the wheel.

Is there a recommended technique for targeting both platforms with the same code?

Answer 1

The browser and node.js load script files in fundamentally different ways. The browser requires you to add script tags or to use ajax to fetch the code and then evaluate it with eval() or a Function object. node.js has require() or the code can be fetched using other node.js I/O mechanisms and then evaluate it similarly.

There is no single way of loading code that works in both a browser and node.js.

So, to write a single function that would load some code in either environment, you would have to detect your environment and then use the appropriate approach for the environment. This would not require two versions of your code, only a function that branched based on the detected environment and then executed the appropriate code for that environment.

This branching can be hidden behind a single function (pseduo-code):

function loadLibrary(name, doneFn) {
    if (node.js detected) {
        // fetch the code using node.js I/O
        // and then evaluate the code
        // notify caller when the script has finished loading
    } else {
        // fetch the code by inserting script tags into the DOM
        // notify caller when the script has finished loading
    }
}

This would be a recommended approach for targeting both platforms with a single piece of code.