前面提到,为实现与NodeJS相同方式的模块写法,大牛们做了很多努力。
但由于浏览器环境不同于服务器端,它的模块有一个HTTP请求过程。这个请求过程多数使用script tag,script tag默认的异步性导致很难实现与NodeJS一模一样的模块格式。
Modules/Wrappings 使得实现变为现实。虽然和NodeJS的模块写法不完全一致,但也有很多相似之处,使得熟悉NodeJS的程序员有一些亲切感。
但NodeJS终究是服务器端的JavaScript,没有必要把这些条条框框放到浏览器JavaScript环境中。这时AMD 诞生了,它的全称为异步模块定义。从名称上看便知它是适合script tag的。也可以说AMD是专门为浏览器中JavaScript环境设计的规范。它吸取了CommonJS的一些优点,但又不照搬它的格式。开始AMD作为CommonJS的transport format 存在,因无法与CommonJS开发者达成一致而独立存在。它有独立的wiki 和讨论组 。
AMD设计出一个简洁的写模块API:define 。
define(id?, dependencies?, factory);
其中:
- id: 模块标识,可以省略。
- dependencies: 所依赖的模块,可以省略。
- factory: 模块的实现,或者一个JavaScript对象。
id遵循CommonJS Module Identifiers 。dependencies元素的顺序和factory参数一一对应。
以下是使用AMD模式开发的简单三层结构(基础库/UI层/应用层):
base.js
define(function() { return { mix: function(source, target) { } }; });
ui.js
define(['base'], function(base) { return { show: function() { // todo with module base } } });
page.js
define(['data', 'ui'], function(data, ui) { // init here });
data.js
define({ users: [], members: [] });
以上也演示了define的三种用法,
1,定义无依赖的模块 (base.js)
2,定义有依赖的模块 (ui.js,page.js)
3,定义数据对象模块 (data.js)
细心的会发现,还有一种没有出现,即具名模块
4,具名模块
define('index', ['data','base'], function(data, base) { // todo });
具名模块多数时候是不推荐的,一般打包工具合并多个模块到一个js文件中时会使用。
前面提到dependencies元素的顺序和factory一一对应,其实不太严谨。AMD开始为摆脱CommonJS的束缚,开创性的提出了自己的模块风格。但后来又做了妥协,兼容了 CommonJS Modules/Wrappings 。即又可以这样写
5,包装模块
define(function(require, exports, module) { var base = require('base'); exports.show = function() { // todo with module base } });
不考虑多了一层函数外,格式和NodeJS还比较象的。使用require获取依赖模块,使用exports导出API。
除了define外,AMD还保留一个关键字require。require 作为规范保留的全局标识符,可以实现为 module loader。也可以不实现。
相关:
相关推荐
社区模块规范: 1.CommonJS规范 规范实现者: NodeJS 服务端 Browserify 浏览器 2.AMD规范 全称 异步模块定义 规范实现者: RequireJS 浏览器 3.CMD规范 通用模块定义 规范实现者: seaJS 服务端和浏览器通用...
异步模块定义(AMD)的编程接口提供了定义模块,及异步加载该模块的依赖的机制。它非常适合于使用于浏览器环境,浏览器的同步加载模块机制会带来性能,可用性,调试和跨域访问的问题。
ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。 ES6模块主要有两个功能:export和import export用于对外输出本模块...
Minjector 为浏览器和 Node.js 实现了一个类似 AMD 的模块加载器。 真正的 Node.js 不需要 AMD 加载器。 尽管如此,它还是支持编写浏览器和 Nodes.js 所需的模块。 Node.js 的性能缺陷并不多,因为所有模块仍然被...
在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了...
在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了...
学习AMD,CMD,CommonJS 这几种规范是什么AMD规范,定义一个API define()所有module定义都通过NodejsJS运行时,脱离浏览器限制.跨平台.提供系统级API访问功能,进程,I/O等等.npm Node的包管理工如何异步加载JS文件,并让其...
支持AMD,CMD规范,支持依赖注入,支持插件式加载脚本 如果你需要做一个浏览器书签,或者chrome插件,或者第三方组件,对于嵌入到对方网站上的情况, 你不能保证对方是否已经存在有你所依赖的相关库,这样就可能存在...
它是为了让模块同时兼容AMD和CommonJs规范而出现的,多被一些需要同时支持浏览器端和服务端引用的第三方库所使用。UMD是一个时代的产物,当各种环境最终实现ES harmony的统一的规范后,它也将退出历史舞台。 UMD规范...
特点遵循规范,可以像Node.js 一样来写模块代码(参见:AMD、CMD)完全异步,不对源码做任何改动、没eval、setTimeout,全速加载!干干净净,只有一个函数:define,连学习文档都不需要了!代码小巧,压缩后: 1.6kb...
随着 W3C 等规范、以及浏览器的飞速发展,前端的模块化开发会逐步成为基础设施。一切终究都会成为历史,未来会更好。”——引用玉伯原文最后一段话,我个人也非常赞同。既然谈到了“未来”,我个人认为:前端 js ...
Mout.js是 JavaScript 模块化实用程序的集合,可以在浏览器或node.js中用作AMD模块,提供类似于其他语言标准库(Python,Ruby,PHP等)... mout.js允许您仅加载所需的模块/函数,提供一致的API并规范多个浏览器的行为。
前言 相信很多人都使用过export、export default、import,然而它们到底有...ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方
自动完善你的脚本——所有脚本都会自动针对jshint(软件开发中的静态代码分析工具,用于检查JavaScript源代码是否符合编码规范)运行,从而确保它们遵循语言的最佳实践。 内建的预览服务器——你不需要启动自己的...
ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。 Modules(模块) 每一个ES6模块都是一个包含JS代码的文件,模块本质上...
require.js遵循AMD规范,用于实现js在浏览器端的模块化开发。 require.js中有全局require和局部require。
环境设定JavaScript版本ECMAScript 6图书馆依赖jQuery的3.5.1 需求JS 2.3.6 FabricJS 3.6.6模块定义规范AMD公司关于“ AMD” AMD是异步模块定义的缩写。 符合此标准的软件包将异步加载依赖模型。 有关更多信息,
java版qq餐厅源码 ...规范,成为浏览器和服务器通用的模块解决方案。 模块功能主要由两个命令构成:export 和 import 。export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能。来看一个 H
功能支持ES6及以上版本语法支持Tree Shaking支持输出多种模块(IIFE、AMD、CMD、UMD、ESM)规范格式,development(.js)与production(.min.js)版本支持自定义banner支持eslint支持可持续构建travis-ci提供issue-...
如果项目中用到了CommonJS或SeaJS这种AMD/CMD规范的模块加载方式,可以在module中使用require()引入vConsole:var vConsole =require('path/to/vconsole.min.js');好了,怎么打印log呢?与电脑端一致,可以直接...