JavaScript模块化编程
为什么模块化很重要?因为有了模块,我们就可以更方便的使用别人的代码,想要什么功能,就加载什么模块。 万事都有规矩,就是规范化!
目前,通行的Javascript模块规范有两种: CommonJS和AMD
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。
JavaScript模块化编程的更多相关文章
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- Javascript模块化编程(二):AMD规范
Javascript模块化编程(二):AMD规范 作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...
- Javascript模块化编程(一):模块的写法
Javascript模块化编程(一):模块的写法 作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html ...
- Javascript模块化编程(二):AMD规范(转)
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
- Javascript模块化编程(一):模块的写法(转)
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
- Javascript模块化编程(二):AMD规范 作者: 阮一峰
声明:转载自阮一峰的网络日志 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可 ...
- Javascript模块化编程(一):模块的写法 作者: 阮一峰
声明:转载自阮一峰的网络日志 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理. ...
- Javascript模块化编程之路——(require.js)
转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...
- Javascript模块化编程(一):模块的写法 (转载 学习中。。。。)
转载地址:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 阮一峰 大神:http://www.ruanyifeng.com/ ...
- Javascript模块化编程(二):AMD规范【转】
作者: 阮一峰 日期: 2012年10月30日 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为 ...
随机推荐
- Visual Basic 2012 借助DataGridView控件将SQL server2012 数据导入到Excel 2010
摘 要: SQL Server 2012 数据和Excel 2010之间的连接和数据的传输,本篇文章主要针对的是SQL Server 2012 数据导入到Excel 2010文件中.Excel软件对 ...
- 制造行业流程管理的“IPO”思维
流程管理是企业从流程角度出发,关注流程是否增值的一套管理体系.从认识流程.到建立流程.到管理流程.再到优化流程,企业管理人员要去除不增值和低价值的流程,减少员工犯错误的机会,建立一套卓越的流程体系. ...
- R 语言机器学习同步推进~
教材就是传说中的机器学习和R语言--中文版,大家可以去图书馆借来看看~~~,例子都是来自书上的 首先介绍一下KNN算法,KNN还好吧,说白了就是一个算距离的公式然后以统计的方式呈现出来,以二维平面为例 ...
- JS Math.max() 函数
Math.max(a,b,...,x,y) -- 返回数个数字中较大的值 max是maximum的缩写,中文"最大量"的意思 max函数语法Math.max(a,b,...,x,y ...
- hdu 1503, LCS variants, find a LCS, not just the length, backtrack to find LCS, no extra markup 分类: hdoj 2015-07-18 16:24 139人阅读 评论(0) 收藏
a typical variant of LCS algo. the key point here is, the dp[][] array contains enough message to de ...
- 用Advanced Installer制作DotNetBar for Windows Forms 12.0.0.1_冰河之刃重打包版详解
关于 DotNetBar for Windows Forms 12.0.0.1_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...
- mac brew mysql 启动之后报错
打开电脑 链接mysql 发现报错,连不上,应该是没自启动, 之前一直用windows电脑,就用mysql start 准备启动下,发现报错, p.p1 { margin: 0.0px 0.0px 0 ...
- Android Studio 2.2.2 发布
Android Studio 2.2.2 发布了.包括 canary, dev, beta, and stable 这几个系列. 该版本修复了 Android Studio 2.2.1 中排名较前的b ...
- Linux/Unix 线程同步技术之互斥量(1)
众所周知,互斥量(mutex)是同步线程对共享资源访问的技术,用来防止下面这种情况:线程A试图访问某个共享资源时,线程B正在对其进行修改,从而造成资源状态不一致.与之相关的一个术语临界区(critic ...
- css 中content内容特殊形状
用到的一些特殊字符和图标html代码<div class="cross"></div>css代码.cross{ width: 20px; hei ...