详解Js中的模块化是如何实现的(2)

2） 使用 new Function 来执行代码字符串，估计大部分同学对 new Function 是不熟悉的，因为一般情况下定义一个函数无需如此，要知道，用 Function 类可以直接创建函数，语法如下：

var function_name = new function(arg1, arg2, ..., argN, function_body)

在上面的形式中，每个 arg 都是一个参数，最后一个参数是函数主体（要执行的代码）。这些参数必须是字符串。也就是说，可以使用它来执行字符串代码，类似于 eval，并且相比 eval, 还可以通过参数的形式传入字符串代码中的某些变量的值

3）如果曾经你有疑惑过为什么规范的导出关键字只有 exports 而我们实际使用过程中却要使用module.exports（写过 Node 代码的应该不会陌生），那在这段代码中就可以找到答案了，如果只用 exports 来接收 context，那么对 exports 的重新赋值对 context 不会有任何影响（参数的地址传递），不信将代码改成如下形式再跑一跑：

演示结果

三、代码载入方式

解决了代码的运行问题，还需要解决模块文件代码的载入问题，根据上述实例，我们的目标是将模块文件代码以字符串的形式载入

在 Node 容器，所有的模块文件都在本地，只需要从本地磁盘读取模块文件载入字符串代码，再走上述的流程就可以了。事实证明，Node 非内建、核心、c++ 模块的载入执行方式大体如此（虽然使用的不是 new Function，但也是一个类似的方法）

在 RN/Weex 容器，要载入一个远程 bundle.js，可以通过 Native 的能力请求一个远程的 js 文件，再读取成字符串代码载入即可（按照这个逻辑，Node 读取一个远程的 js 模块好像也无不可，虽然大多数情况下我们不需要这么做）

在浏览器环境，所有的 Js 模块都需要远程读取，尴尬的是，受限于浏览器提供的能力，并不能通过 ajax 以文件流的形式将远程的 js 文件直接读取为字符串代码。前提条件无法达成，上述运行策略便行不通，只能另辟蹊径

这就是为什么有了 CommonJs 规范了，为什么还会出现 AMD/CMD 规范的原因

那么浏览器上是怎么做的呢？在浏览器中通过 Js 控制动态的载入一个远程的 Js 模块文件，需要动态的插入一个 <script> 节点：

// 摘抄自 require.js 的一段代码
var node = config.xhtml ?
        document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
        document.createElement('script');
node.type = config.scriptType || 'text/javascript';
node.charset = 'utf-8';
node.async = true;
node.setAttribute('data-requirecontext', context.contextName);
node.setAttribute('data-requiremodule', moduleName);
node.addEventListener('load', context.onScriptLoad, false);
node.addEventListener('error', context.onScriptError, false);