前言
在前端的世界，以下几个东西总是绕不过去的： Javascript, AJAX, jQuery, AngularJS, Node.js， 它们之间的关系到底是怎样的呢？
JavaScript
JavaScript 是一种编程语言，这个语言是用在 web 浏览器上； 这就是说，当你要设计一个Web 页面时，就要用到 JavaScript 了。 如果要抠字眼的话，JavaScript 是个什么东西呢？ 它是Java吗？ 当然不是，它与 Java没有半毛钱的关系； 既然带有 Script，那么，它是脚本语言吗？ 当然不是， JavaScript 同样是一种面向对象的编程语言。
对 JavaScript 的理解，切不可望文生义！因为它的名字，容易把你带到沟里去。
JavaScript 是一门功能完整的编程语言，注意： JavaScript 是运行在浏览器上的， 比如： Chrome 、 Firefox、 IE 浏览器等。 JavaScript 用来操作浏览器上的元素， 整个浏览器就是一个DOM树 （Document Object Model）文档对象模型。
JavaScript 在哪儿运行呢？具体来说，是运行在浏览器的客户端； 那么 JavaScript 代码存在在什么地方呢？ 它存放在后台服务器上，这个服务器称之为 web sever； web server 把 JavaScript 发送到用户的浏览器上，浏览器是个极为强大的东西，它能够识别 JavaScript 代码，这个识别的过程就是对 JavaScript 的解释，解释完了，开始运行 JavaScript 代码。 这一切都发生在一个沙盒（sandbox）中，从而确保JavaScript 不会改变浏览器内核，也不会获取电脑系统偏底层的东西。
所以说，Web 应用，也成为 Web APP 是比较安全的； 从另一方面讲，Web 应用的性能和功能抵不过PC 客户端应用。 尤其是在调用系统底层的API时， 浏览器就乏力了。
来段 JavaScript 程序：
<!DOCTYPE html>
<html>
<head>
<title> javascript test </title>
</head>
<body>
<script> alert("hello world!"); </script>
</body>
</html>
看下这段 javascript代码： alert("hello world!");, 需要把这段 javascript 代码放在 <script> 标签中。 在浏览器打开这段代码，你会看到 hello world 对话框。 如图：
image.png
AJAX
AJAX 是 “Asynchronous JavaScript and XML“, 的简称。 我们知道，网页的内容是动态发生变化的，这些变化的数据从哪里来的呢？ 当然是来自Web sever； XML 是一种标记语言，早期的网页与Web server 的数据交互格式是 XML； 而今天是 JSON (“JavaScript Object Notation”) 的天下了。JSON 越来越受欢迎。从 JSON 的名字就能看出来， JSON 是 “JavaScript Object Notation” 的缩写，这就是说，JSON 与 JavaScript 的关系更有渊源。 JavaScript 解析 JSON 数据结构，更加简洁、易用！
先剧透下，自从有了 jQuery， AJAX 越来越边缘化了。
jQuery
jQuery 是一个 JavaScript 库，为什么有JavaScript 库呢？ 按说，JavaScript 自身也有很多函数，问题是，直接用这些函数有些麻烦。上面提到这么多家的浏览器， 自家都说自家的好，这可害苦了开发者， 有的 JavaScript 函数在一个浏览器上表现好好的，换为另一个浏览器就不好使了。 jQuery的强大之处在于： 它解决了浏览器的兼容问题，对程序员来说，这是一件幸事，所以，jQuery 受到热捧。
既然 jQuery 是 JavaScript库， 在调用jQuery时，先引入jQuery 库， 有两种方法：
- 引入本地的 jQuery 库；
- 引入 jQuery 的CDN 链接；
一个简单的调用 jQuery 的例子， 当点击这个box 时，这个小弹出框会隐藏起来。
<script src="path/to/jquery.js">
<script>
$("#box").click(function(){$("#box").slideUp()});
</script>
AngularJS
AngularJS 是一个完整的前端框架， 它是MVC 架构。AngularJS 的编程语言是 javascript。AngularJS 诞生于 Google，借助AngularJS ，可以快速创建一个大型的、单页面Web 应用。
注意这里的用词，我们要创建的是 WEB application （Web 应用），而不是简单的网页。
因为 AngularJS 是用 JavaScript编写的，就像用jQuery 一样， 当用到 AngularJS 时，也需要 <script> 标签。 那么， AngularJS 与 jQuery 的区别又在哪里呢？
AngularJS 与 jQuery 的区别
-
AngularJS 是一个完整的前端框架，而 jQuery 是一个 JavaScript库； 也就是说， jQuery 仅仅是对 JavaScript 的封装，它确实提供了一些便利： 原本 JavaScript也可以直接操作 DOM中的元素，只是用jQuery 操作 DOM 更加便利。 从本质上讲，所有的前端框架都是为了解决如何操作DOM的问题。
-
AngularJS 本身就包含了一个mini 版本的 jQuery 。 这就是产生了一个疑问，在引入 AngularJS 时，要不要事先引入 jQuery 呢？ （卖个关子，下期分解）
特别强调：
AngularJS 是用 javascript 编写的，所以，要想掌握1. AngularJS ，必须很好地理解 javascript，尤其是对 javascript prototype 的理解，
AngularJS 官网上有大量的实例， example projects built with AngularJS, 可以作为学习者的参考资料。
Node.js
也许你还记得，在本文的开头，我就提到，JavaScript 是运行在浏览器上的。 这样一来，JavaScript 只能做前端的事，后端还得用 Java、.net 来编写。 这是因为，Web 应用只能运行在 Tomcat、 Apache、IIS 之类的 Web 应用服务器上。
但是，自从有了 Node.js ，这一切都改变了。 所以说， node.js 为 JavaScript带来了新的生命力。
从本质上说，node.js 是Chrome’s V8 引擎，也可以说是 JavaScript的引擎（engine）。
在node.js 出现之前，前端和后台的开发是分开的，前端用JavaScript语言，而后台用 PHP、Java、 .net 。这是因为，在 node.js 之前，JavaScript只能运行在浏览器上；自从出现了 node.js 之后，JavaScript也能运行在后台服务器上了。 这个后台服务器就是node.js 服务器。
小结
JavaScript 是一种编程语言，它是用来写网页的，而且是运行在浏览器上；
**AJAX ** 网页上数据来自后台服务器，如何获取服务器上数据呢？ JavaScript通过AJAX来获取，通过异步的方式；
**jQuery ** 是一个 JavaScript 库，它解决了不同浏览器的兼容问题，从功能上讲，通过 jQuery可以很轻松地实现动画的效果；
Angular 是一个完整的前端框架，它是用 JavaScript编写的，用于创建大型的、单页面Web 应用；
Node.js 为JavaScript提供了更为广阔的舞台，在node.js 出现之前，JavaScript只能运行在浏览器上，有了node.js 之后，JavaScript 便可以运行在 Web 应用服务上。当然，这个Web 应用服务器是部署在node.js 环境上的。
参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》
更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。
网友评论