`
zhouyrt
  • 浏览: 1122681 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

AMD:浏览器中的模块规范

 
阅读更多

前面提到,为实现与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。也可以不实现。
 
目前,实现AMD的库有RequireJScurlDojobdLoadJSLocalnetNodules 等。
也有很多库支持AMD规范,即将自己作为一个模块存在,如MooToolsjQueryqwerybonzo  甚至还有 firebug
 
 
相关:
2
0
分享到:
评论

相关推荐

    NodeJS模块与ES6模块系统语法及注意点详解

    社区模块规范: 1.CommonJS规范 规范实现者: NodeJS 服务端 Browserify 浏览器 2.AMD规范 全称 异步模块定义 规范实现者: RequireJS 浏览器 3.CMD规范 通用模块定义 规范实现者: seaJS 服务端和浏览器通用...

    AMD 模块定义规范

    异步模块定义(AMD)的编程接口提供了定义模块,及异步加载该模块的依赖的机制。它非常适合于使用于浏览器环境,浏览器的同步加载模块机制会带来性能,可用性,调试和跨域访问的问题。

    ES6模块化的import和export用法方法总结

    ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。 ES6模块主要有两个功能:export和import export用于对外输出本模块...

    minjector:Minjector 为浏览器和 Node.js 实现了一个类似 AMD 的模块加载器

    Minjector 为浏览器和 Node.js 实现了一个类似 AMD 的模块加载器。 真正的 Node.js 不需要 AMD 加载器。 尽管如此,它还是支持编写浏览器和 Nodes.js 所需的模块。 Node.js 的性能缺陷并不多,因为所有模块仍然被...

    ES6新特性:使用export和import实现模块化详解

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了...

    ES6使用export和import实现模块化的方法

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了...

    BHJavaScriptProjectTestAMD:通过该 demo 演示 requirejs 的使用,和了解 AMD 的规范

    学习AMD,CMD,CommonJS 这几种规范是什么AMD规范,定义一个API define()所有module定义都通过NodejsJS运行时,脱离浏览器限制.跨平台.提供系统级API访问功能,进程,I/O等等.npm Node的包管理工如何异步加载JS文件,并让其...

    kvm:KVM.js 轻量级模块管理器,依赖注入,AMD,Commonjs规范,Promise化

    支持AMD,CMD规范,支持依赖注入,支持插件式加载脚本 如果你需要做一个浏览器书签,或者chrome插件,或者第三方组件,对于嵌入到对方网站上的情况, 你不能保证对方是否已经存在有你所依赖的相关库,这样就可能存在...

    javascript中UMD规范的代码推演

    它是为了让模块同时兼容AMD和CommonJs规范而出现的,多被一些需要同时支持浏览器端和服务端引用的第三方库所使用。UMD是一个时代的产物,当各种环境最终实现ES harmony的统一的规范后,它也将退出历史舞台。 UMD规范...

    Javascript模块化管理库jmd.js.zip

    特点遵循规范,可以像Node.js 一样来写模块代码(参见:AMD、CMD)完全异步,不对源码做任何改动、没eval、setTimeout,全速加载!干干净净,只有一个函数:define,连学习文档都不需要了!代码小巧,压缩后: 1.6kb...

    SeaJS 与 RequireJS 的差异对比

    随着 W3C 等规范、以及浏览器的飞速发展,前端的模块化开发会逐步成为基础设施。一切终究都会成为历史,未来会更好。”——引用玉伯原文最后一段话,我个人也非常赞同。既然谈到了“未来”,我个人认为:前端 js ...

    Moutjs是JavaScript模块化的工具类集合

    Mout.js是 JavaScript 模块化实用程序的集合,可以在浏览器或node.js中用作AMD模块,提供类似于其他语言标准库(Python,Ruby,PHP等)... mout.js允许您仅加载所需的模块/函数,提供一致的API并规范多个浏览器的行为。

    JavaScript ES6中export、import与export default的用法和区别

    前言 相信很多人都使用过export、export default、import,然而它们到底有...ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方

    工作流制作的网页程序Yeoman.zip

    自动完善你的脚本——所有脚本都会自动针对jshint(软件开发中的静态代码分析工具,用于检查JavaScript源代码是否符合编码规范)运行,从而确保它们遵循语言的最佳实践。 内建的预览服务器——你不需要启动自己的...

    使用ES6新特性开发微信小程序(7)

    ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。 Modules(模块) 每一个ES6模块都是一个包含JS代码的文件,模块本质上...

    require.js

    require.js遵循AMD规范,用于实现js在浏览器端的模块化开发。 require.js中有全局require和局部require。

    ImageAnnotatorJS:用于图像的Javascript注释器,非常适合图像取证

    环境设定JavaScript版本ECMAScript 6图书馆依赖jQuery的3.5.1 需求JS 2.3.6 FabricJS 3.6.6模块定义规范AMD公司关于“ AMD” AMD是异步模块定义的缩写。 符合此标准的软件包将异步加载依赖模型。 有关更多信息,

    java版qq餐厅源码-ask:每日一答

    java版qq餐厅源码 ...规范,成为浏览器和服务器通用的模块解决方案。 模块功能主要由两个命令构成:export 和 import 。export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能。来看一个 H

    jslib-cli::rocket:JavaScript第三方库模板

    功能支持ES6及以上版本语法支持Tree Shaking支持输出多种模块(IIFE、AMD、CMD、UMD、ESM)规范格式,development(.js)与production(.min.js)版本支持自定义banner支持eslint支持可持续构建travis-ci提供issue-...

    腾讯开源的手机前端开发调试利器 vConsole.zip

    如果项目中用到了CommonJS或SeaJS这种AMD/CMD规范的模块加载方式,可以在module中使用require()引入vConsole:var vConsole =require('path/to/vconsole.min.js');好了,怎么打印log呢?与电脑端一致,可以直接...

Global site tag (gtag.js) - Google Analytics