requirejs模块化编程怎么理解

一、requirejs模块化编程怎么理解

目前，通行的Javascript模块规范共有两种：CommonJS和AMD。

2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程，这标志”Javascript模块化编程”正式诞生。

在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。

node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。

假定有一个数学模块math.js，就可以像下面这样加载。

var math= require('math');

然后，就可以调用模块提供的方法：

var math= require('math');

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

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

define(id?, dependencies?, factory);

dependencies:所依赖的模块，可以省略。

factory:模块的实现，或者一个JavaScript对象。

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

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

require(['math'], function(math){

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

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

require.js加载的模块，采用AMD(异步模块定义规范)规范。也就是说，模块必须按照AMD的规定来写。

1、实现js文件的异步加载，避免网页失去响应

2、管理模块之间的依赖性，便于代码的编写和维护

<script src="js/require.js" data-main="js/main"></script>

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

require(['moduleA','moduleB','moduleC'], function(moduleA, moduleB, moduleC){

require.config用来配置一些参数，它将影响到requirejs库的一些行为。

require.config的参数是一个JS对象，常用的配置有baseUrl，paths等。

这里配置了paths参数，使用模块名“jquery”，其实际文件路径jquery-1.7.2.js（后缀.js可以省略）。

我们知道jQuery从1.7后开始支持AMD规范，即如果jQuery作为一个AMD模块运行时，它的模块名是“jquery”。注意“jquery”是固定的，不能写“jQuery”或其它。

注：如果文件名“jquery-1.7.2.js”改为“jquery.js”就不必配置paths参数了。

如果将jQuery应用在模块化开发时，其实可以不使用全局的，即可以不暴露出来。需要用到jQuery时使用require函数即可。

require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['moduleA','moduleB',

'moduleC']，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

二、javascript的作用

1、JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。[3]

2、是一种解释性脚本语言（代码不进行预编译）。[4]

3、主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。[4]

4、可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。[4]

5、跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

6、Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

7、JavaScript脚本语言具有以下特点:

8、(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

9、(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

10、(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

11、(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

12、(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。[3]

13、不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。

14、而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。

三、javascript最新版本是什么引入了哪些新的特性

EMCAScript6（ES6）是最新的Javascript，它包含了一些很棒的新特性。这些特性拥有不同程度的复杂性，对于简单的脚本和复杂的应用程序都非常的有用。\x0d\x0a\x0d\x0a增加的新特性：\x0d\x0a\x0d\x0a1.箭头操作符\x0d\x0a如果你会C#或者Java，你肯定知道lambda表达式，ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。\x0d\x0a我们知道在JS中回调是经常的事，而一般回调又以匿名函数的形式出现，每次都需要写一个function，甚是繁琐。当引入箭头操作符后可以方便地写回调了。\x0d\x0a\x0d\x0a2.类的支持\x0d\x0a ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。\x0d\x0a\x0d\x0a3.增强的对象字面量\x0d\x0a对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候能够做的事情更多了。具体表现在：\x0d\x0a(1).可以在对象字面量里面定义原型\x0d\x0a(2).定义方法可以不用function关键字\x0d\x0a(3).直接调用父类方法\x0d\x0a\x0d\x0a4.字符串模板\x0d\x0a字符串模板相对简单易懂些。ES6中允许使用反引号 `来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。如果你使用过像C#等后端强类型语言的话，对此功能应该不会陌生。\x0d\x0a\x0d\x0a5.解构\x0d\x0a自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。\x0d\x0a\x0d\x0a6.参数默认值，不定参数，拓展参数\x0d\x0a(1).默认参数值\x0d\x0a现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。\x0d\x0a(2).不定参数\x0d\x0a不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖，在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中，?x代表了所有传入add函数的参数.\x0d\x0a(3).拓展参数\x0d\x0a拓展参数则是另一种形式的语法糖，它允许传递数组或者类数组直接做为函数的参数而不用通过apply。\x0d\x0a\x0d\x0a6.let与const关键字\x0d\x0a可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。const则很直观，用来定义常量，即无法被更改值的变量。\x0d\x0a\x0d\x0a7.for of值遍历\x0d\x0a我们都知道for in循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。\x0d\x0a8.模块\x0d\x0a在ES6标准中，JavaScript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS和AMD模式。\x0d\x0a\x0d\x0a9.Map，Set和 WeakMap，WeakSet\x0d\x0a这些是新加的集合类型，提供了更加方便的获取属性值的方法，不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时，在进行属性值添加与获取时有专门的get，set方法。\x0d\x0a\x0d\x0a10.Proxies\x0d\x0a Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。\x0d\x0a\x0d\x0a11.Symbols\x0d\x0a我们知道对象其实是键值对的集合，而键通常来说是字符串。而现在除了字符串外，我们还可以用symbol这种值来做为对象的键。Symbol是一种基本类型，像数字，字符串还有布尔一样，它不是一个对象。Symbol通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性，外部无法直接访问由symbol做为键的属性值。\x0d\x0a\x0d\x0a12.Math，Number，String，Object的新API\x0d\x0a对Math,Number,String还有Object等添加了许多新的API。下面代码同样来自es6features，对这些新API进行了简单展示。\x0d\x0a\x0d\x0a13.Promises\x0d\x0a Promises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的deferred对象。当你发起一个异步请求，并绑定了.when(),.done()等事件处理程序时，其实就是在应用promise模式。