我们知道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:浏览器中的模块规范
分享到:
相关推荐
该模块尝试通过检查浏览器的标头和连接信息来唯一标识浏览器。 为什么这个? 该脚本用作内部端点,可为请求该脚本的客户端提供“浏览器指纹”打印功能。 如何获得与此相关的浏览器指纹? 使用node index.js启动...
如果要对客户端模块的依赖项进行存根,请尝试 ,browserify 或在Node和浏览器中进行测试。特征无需更改您的代码模块的非重写方法的行为类似于原始方法模拟框架不可知,如果它可以对函数进行存根,那么它可以与...
这些内容都是在开发过程中我不断尝试后的产物。我花了1周的时间才实现了一个递归的调用,而且还是同步的方式。 到目前为止,我还不能理解在异步模式下实现递归调用函数。比如说源代码中有个函数getMenuTree,菜单...
3.0版现在也可以在浏览器中运行,请自行运行测试 主题 用法 验证程序将在可能的情况下尝试执行同步验证,但会在需要时支持异步回调。 发展: 这些存储库具有几个子模块,应按以下方式进行克隆: git clone-递归 ...
但是,与NodeJS不同,浏览器无法尝试许多不同的路径来查找文件,而是必须在第一次尝试时在单个标准HTTP请求中获取正确的文件。 这意味着当您import { Foo } from './foo' ,浏览器将尝试在路径...
CRX3 该模块允许您为Chromium,Google Chrome和所有... 如果您在全球范围内安装了CRX3,或者您正在尝试从项目的package.json脚本中使用它,那么您应该可以像这样使用它: crx3 web-extension-directory 它支持以下选
== 说明 == 使用 nodeJS 的实验代码和使用 Johnny-5 的 Arduino。 对于 Ravensbourne 的网络媒体 BA 课程。 start.js:使用按钮和 Arduino 的基本起点buzzersound.js:使用按钮、... 然后在您的网络浏览器中尝试“ ”
您可以通过使用devtools更改文本或添加/删除元素来自己尝试。 安装 通过npm npm install pseudo-localization 原始脚本(无npm) 复制将文件粘贴到然后根据需要使用。 它不是很多代码。 用法 导入或需要npm模块 ...
在浏览器中尝试: : 内容 什么是VRIA? VRIA是一个基于Web的框架,用于在虚拟现实和增强现实中创建沉浸式分析体验。 VRIA内置有 , 和 ,可让您使用JSON中描述的声明语法快速创建交互式,沉浸式数据可视化。 在...
在浏览器中查看 使用此入门套件构建您喜欢的任何 MEAN 堆栈应用程序。 如果您有任何问题或要求,请发送电子邮件至 ,我们会不断更新以使其完美。 未来的添加 CRUD 示例 开发和生产环境 链接示例 单页 AngularJS ...
对于node.js 节点顶部的实验性,最少的工具包和运行时,用于生成和运行模块。... 另一方面,此程序包仅通过专门针对WebAssembly(在浏览器中)来尝试使支持库和生成的模块尽可能小。 欢迎PR!例将您的
我们认为尝试使每个模块保持简单和小巧是有意义的。 特别是对于位于依赖链底部的模块,例如处理日期和时间的模块。特征极简主义者。 大约2k。 (缩小并压缩) 可扩展插件系统支持。 多语言支持。 通用/同构。 无论...
在浏览器中打开app/index.html ,例如: file:///kaazing-amqp-angular/app/index.html 笔记: 表格中可显示的最大行数:100 如何发展 最好将./node_modules/.bin添加到PATH以缩短命令执行时间。 我使用grunt设置...
该源码为Vue前端可视化大屏项目,需要nodejs和npm等环境支持,需提前下载好环境 启动步骤 (1)在项目根目录下启动cmd控制台 (2)输入命令npm install,并执行下载项目所需模块,等待所有依赖下载成功 (3)依赖...
在构建时将文件压缩为gzip和brotli,如果浏览器支持,则将其提供。 请注意: 该模块对gzip和brotli使用 。 compression-webpack-plugin支持brotli基于添加的对,因此,如果您使用较低的nodejs版本,则此模块将仅为...
RedisGraph Navi是一个Web应用程序,可让您在浏览器中可视化RedisGraph数据。 主要目的是尝试查询并在图形中显示所有数据。 使用Svelte,vis-network和NodeJS Express构建。 快速开始 您必须具有安装了图形模块的...
我们的目标只是简单地尝试和实现React是MVC中的V的想法。 Flux、Routing、Isomorphic 等很酷,但这不是start-react 的目的,它被创建为任何只想构建、测试和打包“可组合组件”或V视图的人的简单选择然后在任何应用...
服务器部分是NodeJS应用程序,应在本地计算机上的命令行中启动。 客户端部分在Web浏览器中运行。 Webcodesk帮助开发人员使用React UI组件创建Web应用程序。 它有一堆可视化编辑器,其中用户可以在网页构成UI组件,...
它的打包方式与一长串的类似包装有所不同:该包装不是创建一个最小尺寸的出纸槽,而是尝试在一定尺寸下创建最少数量的纸槽。 这样可以避免单个海量图像文件对浏览器不友好的问题。 这对于WebGL游戏尤其有用,在...
在您的计算机中克隆此存储库。 可以这样做:- 创建一个空目录并切换到该目录。 输入以下代码: git init git clone https://github.com/devanshusingla/ChromeBot.git 这将创建一个名为ChromeBot的文件夹。 安装...