Javascript模块化编程(二):AMD规范

  这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块。

 

七、模块的规范

  先想一想,为什么模块很重要?

  因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。

  但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到Javascript模块现在还没有官方规范,这一点就更重要了。

  目前,通行的Javascript模块规范共有两种:CommonJS和AMD。我主要介绍AMD,但是要先从CommonJS讲起。

八、CommonJS

  2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程。

  这标志"Javascript模块化编程"正式诞生。因为老实说,在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限;但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程。

  node.js的模块系统,就是参照CommonJS规范实现的。在CommonJS中,有一个全局性方法require(),用于加载模块。假定有一个数学模块math.js,就可以像下面这样加载。

 var math = require('math');

  然后,就可以调用模块提供的方法:

  var math = require('math');math.add(2,3); // 5

  因为这个系列主要针对浏览器编程,不涉及node.js,所以对CommonJS就不多做介绍了。我们在这里只要知道,require()用于加载模块就行了。

九、浏览器环境

  有了服务器端模块以后,很自然地,大家就想要客户端模块。而且最好两者能够兼容,一个模块不用修改,在服务器和浏览器都可以运行。

  但是,由于一个重大的局限,使得CommonJS规范不适用于浏览器环境。还是上一节的代码,如果在浏览器中运行,会有一个很大的问题,你能看出来吗?

  var math = require('math');math.add(2, 3);

  

  第二行math.add(2, 3),在第一行require('math')之后运行,因此必须等math.js加载完成。也就是说,如果加载时间很长,整个应用就会停在那里等。

  这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。但是,对于浏览器,这却是一个大问题,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于"假死"状态。

  因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous)。这就是AMD规范诞生的背景。

十、AMD

  AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

  AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:

require([module], callback);

  第一个参数[module],是一个数组,里面的成员就是要加载的模块;第二个参数callback,则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式,就是下面这样:

  require(['math'], function (math) {math.add(2, 3);});

  

  math.add()与math模块加载不是同步的,浏览器不会发生假死。所以很显然,AMD比较适合浏览器环境。

  目前,主要有两个Javascript库实现了AMD规范:require.js和curl.js。本系列的第三部分,将通过介绍require.js,进一步讲解AMD的用法,以及如何将模块化编程投入实战。

转载于:https://www.cnblogs.com/yanxinhua/p/6684279.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/541634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html侧滑菜单mui,mui侧滑菜单点击含有mui-action-menu类的控件无法实现侧滑

.mui-action-menu标题栏 菜单按钮 指定href"#id"显示与隐藏侧滑菜单html:侧滑菜单列表侧滑菜单列表2侧滑菜单列表3标题具体内容href:https://badfl.gitbooks.io/mui/content/mui-action-menu.htmlAndroid 使用代码主动去调用控件的点击事件(模拟人手去触摸控件)使用代…

hanlp 训练模型_LTP 4.0!单模型完成6项自然语言处理任务

来源|哈工大SCIR语言技术平台(Language Technology Platform, LTP)是哈工大社会计算与信息检索研究中心(HIT-SCIR)历时多年研发的一整套高效、高精度的中文自然语言处理开源基础技术平台。该平台集词法分析(分词、词性…

typescript 学习

typescript将在不久的将来从前端大一统的趋势中脱颖而出成为主流编译器。学习ts对前端开发人员来说是不可或缺的。同时,也要抓紧学习es2015/6/7。ts和es6并不是对立的。而是相辅相成的。ts的竞争和打击对象实质上是babel…… 官方资料 # 官方地址: https…

计算机中央处理器cpu_中央处理器(CPU)| 计算机科学组织

计算机中央处理器cpu中央处理器(CPU) (Central Processing Unit (CPU)) The CPU is the brain of the computer system. It works as an administrator of a system. CPU是计算机系统的大脑。 它以系统管理员的身份工作。 All the operations within the system are supervised…

计算机应用基础专2020春,计算机应用基础(专)(专,2020春)(20200831130023).pdf

计算机应用基础(专)(专, 2020 春)使用 " 格式刷”按钮,可以进行 ___________操作。选择一项:a. 复制文本的格式b. 删除文本c. 复制文本d. 保持文本你的回答正确正确答案是:复制文本的格式在 Word 的文档中插入复杂的数学公式…

computed set 自定义参数_深入理解vmodel之自定义组件用法

根据上一篇《深入理解 v-model 之表单用法》基本对 v-model 有了比较深的理解&#xff0c;接下来我们看看它如何在自定义组件中使用。首先&#xff0c;我们知道下面两个用法等价的&#xff1a;<input v-model"msg" /><input :value"msg" input&qu…

01json转字符串

/** * json转字符串声明 */ (NSString *)jsonToString:(NSDictionary *)dic; /** * json转字符串实现 */ (NSString *)jsonToString:(NSDictionary *)dic { if(!dic){ return nil; } NSData *jsonData [NSJSONSerialization dataWithJSONObject:dic options:NSJSONWriting…

AYUSH的完整形式是什么?

AYUSH&#xff1a;阿育吠陀&#xff0c;瑜伽和自然疗法&#xff0c;乌纳尼&#xff0c;悉达多和顺势疗法 (AYUSH: Ayurvedic, Yoga and Naturopathy, Unani, Siddha and Homeopathy) AYUSH is an abbreviation of Ayurvedic, Yoga and Naturopathy, Unani, Siddha, and Homeopa…

大班科学电子计算机,计算器教案

计算器的认识和简单应用教学内容&#xff1a;义务教育六年制小学第九册第二单元第42页。教学目标&#xff1a;1、通过学生自主探究&#xff0c;掌握计算器的使用方法&#xff0c;并能够用计算器进行简单的计算。2、借助计算器解决生活中的数学问题、探索数学规律&#xff0c;体…

arraylist能否接收强转类型_ArrayList 源码解析

点击上方"IT牧场"&#xff0c;选择"设为星标"技术干货每日送达&#xff01;前言 JDK源码解析系列文章&#xff0c;都是基于JDK8分析的&#xff0c;虽然JDK14已经出来&#xff0c;但是JDK8我还不会&#xff0c;我…类图 实现了RandomAccess接口&#xff0c;…

exit c+_C / C ++中的exit(0)vs exit(1)与示例

exit cexit() is a library function in C/C programming language, it is used to terminate the calling process (function) immediately i.e. we can say it is used for the normal program termination and also perform the several cleanup steps. exit()是C / C 编程语…

校园计算机网络系统,校园计算机网络系统

一、校园网的基本概念基本功能&#xff1a;数据交换、资源共享&#xff0c;这里所指的数据包括各种信息&#xff0c;基本组成和结构&#xff1a;基本网络由网络网络的分类&#xff1a;有多种分类方法&#xff0c;按规模可分为局域网、区域网、&127;广域网。局域网服务范围一…

mc有什么红石机器人_我的世界10月考试!来测测你的MC成绩吧~

考试规则&#xff1a;本次考试为闭卷考试&#xff0c;考生需要在30分钟内完成试卷。试卷总分为100分&#xff0c;其中包括单项选择题50分&#xff0c;多项选择题20分&#xff0c;判断题30分。考试内容包括《我的世界》手游1.11.0及以上版本在不添加任何模组的情况下的所有游戏内…

130、 Android OkHttp完全解析(转载)

完全解析&#xff1a;http://blog.csdn.net/lmj623565791/article/details/47911083 从原理角度解析http文件上传 http://blog.csdn.net/lmj623565791/article/details/23781773 https://github.com/hongyangAndroid/okhttputils

json转string示例_C.示例中的String.Copy()方法

json转string示例C&#xff03;String.Copy()方法 (C# String.Copy() Method) String.Copy() method is used to copy a string to new string object, it returns a new instance of String with the same value as given string. String.Copy()方法用于将字符串复制到新的字符…

自定义分页 html,MVC 自定义HtmlHelper帮助类型之分页

方法一&#xff1a;在项目中增加App_Code文件夹&#xff0c;新增一个MyHtmlper.cshtml视图文件写入代码&#xff1a;helper Pagger(int pageIndex, int pageCount){for (int i 1; i < pageCount; i){if (i ! pageIndex){(i)}else{i}}}新增一个HomeControllerpublic class H…

vue 对象继承_Vue2.0中组件的继承与扩展是什么

Vue2.0中组件的继承与扩展是什么发布时间&#xff1a;2020-12-07 14:04:09来源&#xff1a;亿速云阅读&#xff1a;100作者&#xff1a;小新小编给大家分享一下Vue2.0中组件的继承与扩展是什么&#xff0c;相信大部分人都还不怎么了解&#xff0c;因此分享这篇文章给大家参考一…

stack示例_C.示例中的Stack.Clone()方法

stack示例C&#xff03;Stack.Clone()方法 (C# Stack.Clone() method) Stack.Clone() method is used to create a shallow copy of the stack. Stack.Clone()方法用于创建堆栈的浅表副本。 Syntax: 句法&#xff1a; Object Stack.Clone();Parameters: None 参数&#xff1a…

简述计算机图形的图形应用主要有哪些,5计算机图形学考试简答题复习.doc

5计算机图形学考试简答题复习计算机图形学考试简答题复习1、简述计算机动画的概念&#xff0c;它经历了哪几个阶段的发展&#xff1f;(2分)计算机动画是指采用图形与图像的处理技术&#xff0c;借助于编程或动画制作软件生成一系列的景物画面&#xff0c;其中当前帧是前一帧的部…

在图片中选定任意凸多边形制作掩膜程序MATLAB

function S get_convex_S(C,vx,vy) %该函数实现的功能为指定图像中多边形的顶点&#xff0c;返回属于该凸多边形中的所有像素点 %xv&#xff0c;yv为顶点坐标按照顺时针或者逆时针。vx(1) xv(end); yv(1) yv(end) %输入的C是结构&#xff0c;vx vy是数组存的是顶点坐标。 %输…