炫意html5
最早CSS3和HTML5移动技术网站之一

用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()虽然是一个很少用的功能,但是确实非常灵活,更多应用场景就靠大家继续挖掘了。

炫意HTML5 » 用Javascript打造类NodeJS模块载入系统

CSS3教程HTML5教程