Node.js模块风格在浏览器中的尝试
前面提到Node.js有一套简洁的格式写模块,它遵循的就是 Moudles。
浏览器里的JavaScript呢? 尽管语言本身暂不支持模块(ES6打算支持),但可以用现有的 API 包装一个写法出来。
毫无疑问,首先想到的是Node.js的 Modules 格式,它是最好的效仿对象。因为前后端有一个统一的方式写JS模块岂不乐哉!
但一开始就碰到一些难题
- 服务器端JS模块文件就在本地,浏览器端则需要通过网络请求。
- 服务器端可以很容易的实现同步或异步请求模块,浏览器端则问题多多。
如下
1 2 3 4 5 | var event = require( "event" ); event.bind(el, 'click' , function () { // todo }); |
这段代码中 require 如果是异步执行的,则 event.bind 的执行有可能会出错。
那实现同步的 require 不就行了吗?
的确可以使用 XHR 实现同步载入模块JS文件。但XHR的缺点也是明显的,它不能跨域,这点让人很难接受,因为有些场景需要模块部署在不同的服务器。
那只能通过 script tag 来实现模块加载了!
但 script tag 默认就是异步的,要实现 Node.js 的一模一样风格(Modules)很难,几乎是不可能。
这时,“救世主”出现了:Modules/Wrappings ,顾名思义包裹的模块。该规范约定如下
定义模块用module变量,它有一个方法declare
- declare接受一个函数类型的参数,如称为factory
- factory有三个参数分别为require、exports、module
- factory使用返回值和exports导出API
- factory如果是对象类型,则将该对象作为模块输出
描述有拗口,代码却很简单,使用了一个 function 包裹模块(Node.js 模块则无需包裹)。
一个基本的模块定义
1 2 3 4 | module.declare( function (require, exports, module) { exports.foo = "bar" ; }); |
直接使用对象作为模块
1 2 3 4 | module.declare( { foo: "bar" }); |
Modules/Wrappings 的出现使得浏览器中实现它变得可能,包裹的函数作为回调。即使用 script tag 作为模块加载器,script 完全下载后去回调,回调中进行模块定义。
好了,截止目前我们已经看到了两种风格的模块定义:Modules 和 Modules/Wrappings。
CommonJS Modules有1.0、1.1、1.1.1三个版本。
Node.js、SproutCore实现了 Modules 1.0。
SeaJS、AvocadoDB、CouchDB等实现了Modules 1.1.1。
SeaJS、FlyScript实现了Modules/Wrappings。
注:
- SeaJS未实现全部的 Modules 1.1.1,如require函数的main,paths属性在SeaJS中没有。但 SeaJS 给require添加了async、resolve、load、constructor
- SeaJS没有使用 Modules/Wrappings 中的module.declare定义模块,而是使用define函数(看起来象 AMD 中的 define,实则不然)
下一篇:AMD:浏览器中的模块规范
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端
2011-03-09 JavaScript继承方式(2)
2011-03-09 JavaScript继承方式(1)
2011-03-09 设置HTML元素的透明度
2011-03-09 JS实现自定义右键菜单
2011-03-09 使用滤镜设置透明导致 IE 6/7/8/9 解析异常