JSON 知识量：10 - 17 - 48
计算机科学中的框架含义并不是建筑学上支持结构或底层结构的意思，而是一层位于软件或编程语言之上的为开发者提供支持的结构。在JavaScript语言中框架通常称为库或工具包。有了框架你就不必什么都从0开始编程，会有一些现成的代码可供直接使用，就像有了整体厨房安装服务，你就不必操心厨房的建造细节，可以省出时间做其他更重要的事情。
这种节约时间、专注重点的框架在计算机科学中也被称为抽象化工具。抽象化工具是用来帮助进行抽象化工作的，借助抽象化，每次只需要思考问题的一部分即可。
jQuery是一种允许开发者专注于操作DOM构建功能的抽象化工具。DOM就是文档对象模型的简写，英文名为Document Object Model，为我们与HTML页面进行交互提供了方便。
不使用jQuery当然也可以对DOM进行操作，例如：隐藏一个按钮（一段HTML代码内）。
<button id="hideButton">HideButton</button>
<script>
document.getElementById("hideButton").style.display = "none";
</script>以上代码首先在HTML中定义了一个id为hideButton的按钮，然后在一段JavaScript代码中使用document对象的getElementById(id)方法，找到按钮，将其显示属性设为none，实现了对按钮的隐藏。如果使用jQuery来实现，JavaScript代码部分将修改为：
$("#hideButton").hide();当然使用jQuery的前提是将jQuery框架导入HTML文件，这也非常简单，例如：在js文件夹中准备好下载的jQuery框架文件后（这里为：jquery-3.1.1.min.js），只需要在HTML的head部分写入：
<script src="js/jquery-3.1.1.min.js"></script>
利用jQuery可以节约大量的时间。除此以外，jQuery还可以解决浏览器兼容问题。例如解决JSON.parse()函数在较早的浏览器中不支持的问题。使用jQuery解析JSON：
var myCar = jQuery.parseJSON('{"car" : "BMW"}');以上代码执行时，jQuery会先尝试使用原生的JSON.parse()函数，如果失败，会使用与eval()函数功能类似的new Function()，同时它会对一些不合法的字符进行检测，如果发现有注入攻击的威胁，就会抛出错误。
对于通过HTTP请求JSON数据的JavaScript函数，jQuery也可以大大简化。使用JavaScript的代码如下：
var myXMLHttpRequest = new XMLHttpRequest();
var url = "http://www.pnotes.cn/test.json";
myXMLHttpRequest.onreadystatechange = function () {
if (myXMLHttpRequest.readyState === 4 && myXMLHttpRequest.status === 200) {
var myObject = JSON.parse(myXMLHttpRequest.responseText);
var myJSON = JSON.stringify(myObject);
}
}
myXMLHttpRequest.open("GET", url, true);
myXMLHttpRequest.send();如果使用jQuery，代码相应的修改为：
var url = "http://www.pnotes.cn/test.json";
$.getJSON(url, function (data) {
//...对返回JSON数据的后续操作
});jQuery框架通过缩减请求和解析JSON的时间来缩短开发时间，从而对JSON提供支持。
想要了解jQuery的更多知识可以点击这里。
除了jQuery外，JavaScript还有一个重要的框架---AngularJS框架。AngularJS是专注于创建单页应用的抽象化工具。单页应用很像桌面应用，使用时没有页面的跳转等感受，可以为用户提供无缝交互体验。
AngularJS并不为开发者构建一个单页应用，它所提供的，是一个基于模型-视图-控制器（MVC）架构概念的框架。
AngularJS实现的MVC概念如下：
模型：JavaScript对象即数据模型。
视图：HTML（提供了与模型进行数据绑定的语法）。
控制器：使用AngularJS语法来定义和操作与模型和视图间的交互的JavaScript文件。
示例：使用AngularJS获取JSON数据并显示汽车的宽度值。
首先，从www.pnotes.com获取car.json文件。
angular.module('myApp', [])
.controller('myAppController', function ($scope, $http) {
$http.get('http://www.pnotes.cn/car.json')
.success(function (data, status, headers, config) {
$scope.carData = data;
});
});car.json文件如下：
{
"name": "BMW",
"color": "black",
"size": [
{
"length": 5000,
"width": 2000,
"height": 1650
}
]
}程序获取car.json文件后，会对JSON文件进行反序列化，然后它将作为名为carData的对象被添加到全局作用域中，这样就可以通过HTML视图的插值语法将其作为数据模型进行绑定。
<body ng-app="myApp">
<div id="wrapper" ng-controller="myAppController">
<div>
{{carData.size[0].width}}
</div>
</div>
</body>HTML标签上的“ng-app”和“ng-controller”属性设置了一个支持数据绑定的视图。数据绑定就是指借助一系列的占位符将数据“绑定”到页面。AngularJS语法要求在数据占位符的两边加上标识，这些标识由两个左花括号和两个右花括号组成，它们包裹着占位符，即carData.size[0].width。
car.json中size属性由一个数组构成，通过size[0]来获取这一对象，然后选择width属性。可以编写一个每60秒刷新一次数据的单页应用，HTTP请求会在后台执行，同时数据模型的更新会自动触发HTML模板的更新。不需要初始化请求，所有这些都会在后台进行，也就是说，JavaScript代码不需要去改变HTML的面貌（DOM），更新数据模型会自动更新视图。
专业术语：
抽象化：一种处理复杂系统的技术，主要思想是将一个大问题转换为多个小问题。
框架：一种能够节约时间，以让我们更专注于构建功能的抽象化工具。
jQuery.parseJSON()：一个jQuery的函数，它不仅会调用JOSN.parse()函数，还会兼容那些不支持JSON.parse()函数的老式浏览器，且通过验证字符来评估字符串，从而避免了可能的安全问题。
jQuery.getJSON()：jQuery.ajax()函数的简写形式，其中包含了将JSON解析为JavaScript对象的功能。
单页Web应用：与传统的多页方式不同，着力于提供更加无缝的应用体验的网页。
模型-视图-控制器（MVC）：一种应用架构模式，它将应用分为三部分：模型（数据）、视图（展示）以及控制器（更新模型和视图）。
AngularJS：一款使用JavaScript对象作为数据模型的JavaScript MVC框架。
重要概念：
jQuery：一款提供了JSON请求和解析功能的能够缩短开发时间的抽象化工具。同时它还能解决跨浏览器兼容问题。
AngularJS MVC的概念：1、JSON是模型（数据模型）。2、HTML是视图，且提供了与模型进行数据绑定的语法。3、控制器是使用AngularJS语法来定义和操作与模型和视图间交互的JavaScript文件。
AngularJS使得JavaScript对象和JSON在MVC架构中大放异彩。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6