NodeJS模块格式在浏览器中的尝试

我们知道NodeJS有一套简洁的格式写模块,它遵循的就是 Moudles

 

浏览器里的JavaScript呢? 尽管语言本身暂不支持模块,但可以用现有的API包装一个写法出来。

 

毫无疑问,首先想到的是NodeJS的module格式 ,它是最好的效仿对象。因为前后端有一个统一的方式写JS模块岂不乐哉!

 

但一开始就有碰到一些难题

 

1,服务器端JS模块文件就在本地,浏览器端则需要通过网络请求

2,服务器端可以很容易的实现同步或异步请求模块,浏览器端则问题多多。

 

如下

var event = require("event");

event.bind(el, 'click', function() {
	// todo
});

 

 

这段代码中require如果是异步执行的,则event.bind的执行有可能会出错。

 

那实现同步的require不就行了吗? 

 

的确可以使用 XHR 实现同步载入模块JS文件。但XHR的缺点也是明显的,它不能跨域,这点让人很难接受,因为有些场景需要模块部署在不同的服务器。

 

那只能通过script tag来实现模块加载了。

 

但script tag默认就是异步 的,要实现NodeJS的一模一样风格(Modules )问题多多,几乎是不可能。

 

这时,又一模块格式出现了:Modules/Wrappings  (还有AMD ),顾名思义包裹的模块。该规范约定如下

 

1,定义模块用module变量,它有一个方法declare

2,declare接受一个函数类型的参数,如称为factory

3,factory有三个参数分别为require、exports、module

4,factory使用返回值和exports导出API

5,factory如果是对象类型,则将该对象作为模块输出

 

描述有拗口,代码却很简单,使用了一个function包裹模块(NodeJS模块则无需包裹)。

 

一个基本的模块定义

module.declare(function(require, exports, module)
{
	exports.foo = "bar"; 
});

 

一个使用返回值的模块定义

module.declare(function(require)
{
	return { foo: "bar" };
});

 

直接使用对象作为模块

module.declare(
{
	foo: "bar"
});

 

 

Modules/Wrappings 的出现使得浏览器中实现它变得可能,包裹的函数作为回调。即使用script tag作为模块加载器,script完全下载后去回调,回调中进行模块定义。

 

 

好了,截止目前我们已经看到了两种风格的模块定义:Modules 和  Modules/Wrappings

CommonJS Modules有1.0、1.1、1.1.1三个版本。

 

NodeJS、SproutCore 实现了 Modules 1.0

SeaJS 、AvocadoDB、CouchDB等实现了Modules 1.1.1

SeaJS、FlyScript 实现了Modules/Wrappings。

 

注:

1,SeaJS未实现全部的 Modules 1.1.1。如require函数的main,paths属性在SeaJS中没有。但SeaJS给require添加了async、resolve、load、constructor。

2,SeaJS没有使用 Modules/Wrappings 中的module.declare定义模块,而是使用define函数。

 

相关:

script loaders

AMD:浏览器中的模块规范

你可能感兴趣的:(nodejs)