当前位置: 首页 > news >正文

Javascript模块化编程(二):AMD…

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

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

(接上文)

七、模块的规范

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

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

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

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

八、CommonJS

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

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

这标志"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的用法,以及如何将模块化编程投入实战。

(完)

相关文章:

  • Javascript模块化编程(三):requ…
  • Minify压缩和削减CSS和JS
  • 如何写一个Jquerynbsp;的Plugin插件
  • 使用CSSnbsp;3创建不规则图形
  • 4人卖睡衣年赚7000万!绝对…
  • 我所理解的技术领导力
  • 问问题的艺术
  • 程序员发展十分重要的12条日常习惯
  • 暗时间
  • 说说程序员与博客
  • 自由职业者:如何找到你的第…
  • 要怎样努力,才能成为很厉害…
  • 人造超强大脑:取代人类的计…
  • 网站,越简单越好
  • Git工作流指南:集中式工作…
  • 【跃迁之路】【444天】程序员高效学习方法论探索系列(实验阶段201-2018.04.25)...
  • 2019.2.20 c++ 知识梳理
  • ECMAScript6(0):ES6简明参考手册
  • isset在php5.6-和php7.0+的一些差异
  • Java 11 发布计划来了,已确定 3个 新特性!!
  • JavaScript新鲜事·第5期
  • MySQL数据库运维之数据恢复
  • ReactNativeweexDeviceOne对比
  • springMvc学习笔记(2)
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • vue自定义指令实现v-tap插件
  • 初探 Vue 生命周期和钩子函数
  • 关于使用markdown的方法(引自CSDN教程)
  • 力扣(LeetCode)357
  • 盘点那些不知名却常用的 Git 操作
  • 手写双向链表LinkedList的几个常用功能
  • 写给高年级小学生看的《Bash 指南》
  • 移动端唤起键盘时取消position:fixed定位
  • 用quicker-worker.js轻松跑一个大数据遍历
  • 智能网联汽车信息安全
  • 自制字幕遮挡器
  • 《天龙八部3D》Unity技术方案揭秘
  • #if和#ifdef区别
  • #WEB前端(HTML属性)
  • #传输# #传输数据判断#
  • (动态规划)5. 最长回文子串 java解决
  • (附源码)计算机毕业设计SSM智慧停车系统
  • (七)c52学习之旅-中断
  • (十八)SpringBoot之发送QQ邮件
  • . ./ bash dash source 这五种执行shell脚本方式 区别
  • .NET 4 并行(多核)“.NET研究”编程系列之二 从Task开始
  • .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划
  • .NET Standard、.NET Framework 、.NET Core三者的关系与区别?
  • .NET 中的轻量级线程安全
  • .net解析传过来的xml_DOM4J解析XML文件
  • /boot 内存空间不够
  • @cacheable 是否缓存成功_让我们来学习学习SpringCache分布式缓存,为什么用?
  • @EnableConfigurationProperties注解使用
  • @FeignClient 调用另一个服务的test环境,实际上却调用了另一个环境testone的接口,这其中牵扯到k8s容器外容器内的问题,注册到eureka上的是容器外的旧版本...
  • @property python知乎_Python3基础之:property