用纯Javascript打造类似NodeJS的模块载入系统



	 

	NodeJS的模块系统有两个重要的特点：

	 

	1. 模块中直接用var定义的变量是仅作用与当前模块的，而不是全局。

	 

	2. 每个模块中都可以使用require和module这两个“全局变量”。之所以打上引号，因为它们其实是每个模块都有的通用实例，不同模块中的实例是不一样的。

	 

	也许你会认为这两个特性和我们在浏览器中使用的Javascript性质有很多不同，一定是NodeJS运行环境提供的native特性，那就不一定了。尽管没有研究过NodeJS是如何实现的，但是我们用纯Javascript完全可以做出一样的模块系统。这其实只要要用到一个Javascript中很少用的语法：new Function()。

	 

	 

	 

	Javascript中除了用function func(){}来定义一个函数之外，还可以用new Function()来创建一个函数。Function是Javascript中所有函数的prototype，即所有函数的基类。通过给Function.prototype增加属性可以给所有的函数实例增加属性，这也是大家相对常用的一个做法。今天要给大家介绍的是通过直接new Function()来创建一个函数，尽管这被认为性能不好，但在某些特殊场景能做到一些很有用的功能。

	 

	 

	new Function()的详细语法格式是：

	 

	 

	new Function(args, body) 

	这里的args是一个字符串，表示函数的参数，参数之间用逗号隔开，而body则是函数体本身。比如：

	var add = new Function('x, y', 'return x + y;');

	这样创建的函数就等价于：

	 

	var add = function(x, y){ 

	     return x + y; 

	} 

	这两者效果没有任何区别，通常我们也只会用第二种做法，因为有更好的可读性。

	 

	 

	现在我们来看new Function的两种潜在应用场景：

	1. 避免命名冲突

	大家知道通过<script>标签引入的Javascript文件是全局的，每个文件中定义的变量都是全局的，这时为了避免命名冲突，可以通过如下的小技巧：

	 

	(function(){ 

	     var x = 0; 

	     //my code 

	})(); 

	通过外包一个函数并立刻调用，可以做成一个闭包，其中的变量的作用域就只局限于函数体之内。从而避免了与其它的文件之间的命名冲突。但是在有些情况下，我们需要使用一个第三方的Javascript文件或者因为某些原因而无法修改的文件，它完成某个独立的任务，但是其中定义了一些全局变量。这些文件无法被修改成使用上面提到的方法来避免命名冲突。这时我们的new Function()就可以发挥作用了。这时我们不是通过<script>引入Javascript文件，而是通过XMLHttpRequest获得Javascript文件的内容，然后用如下的方式来执行这个Javascript：

	 

	var result = (new Function('', jsCode + '; return {x: x}'))(); 

	这样，我们相当于也是在jsCode外面包装了一层function，并且，我们把需要用的的结果作为返回值返回出来，供外面程序使用。当然，对于大部分独立的文件，我们并不一定需要返回值，而只是需要执行一下即可。下面来看下一个应用场景。

	 

	 

	2. 打造自己的模块载入系统

	这也是上一种应用场景的一个延伸，既然我们通过这种方式来载入Javascript文件，何不将其做成一个通用的模块载入系统，供自己的项目使用。从而不用每个文件都外包一层function来避免命名冲突。其实如果大家用过NodeJS，就也许知道，NodeJS中的每个模块中定义的变量都是局限于当前模块的，不会被其它模块直接使用。而且每个模块中还有一个默认的require和module变量，这两个每个模块中都可以像使用全局变量一样使用，但它们却又不是全局变量，NodeJS文档中写的也很清楚，它们在各个模块中都是不同的实例。这样，一个模块都它们进行的修改并不会影响到其它模块。你也许会认为这一定是NodeJS的native环境提供的特殊功能，但实际上，我们完全可以用纯Javascript打造出一个同样的模块机制，只需对上面提到的例子做一点修改，比如这个loader是有类似如下的代码：

	 

	var require = getRequireInstance(); 

	var module = getModuleInstance(); 

	 //通过XMLHttpRequest获得要载入的Javascript文件的代码 

	var moduleText = getModuleText();   

	//执行模块代码，并“注入”require和module变量。 

	(new Function('require, module', moduleText))(require, module); 

	怎么样，是不是很简单？new Function()虽然是一个很少用的功能，但是确实非常灵活，更多应用场景就靠大家继续挖掘了

	 

	摘自 Dojo中文博客-

补充：web前端 , JavaScript ,