Vue.js 3.x快速入门
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.2.1　Web应用

Web应用分为两类：传统Web页面应用和单页应用。

1．传统Web页面应用

传统Web页面就是打开浏览器，整个页面都会打开的应用。例如，笔者的个人网站http://siwei.me就是一个典型的“传统Web页面应用”，每次单击其中任意一个链接，都会引起页面的整个刷新，如图1-1所示。

图1-1　个人网站

从图1-1中可以看出，传统Web页面的每次打开，都要把页面中的.js、.css、.png、.html文件等资源加载一遍。在图1-1的左下角可以看到，本次共加载了10个请求（4个.css，2个.js，3个.png及1个.html文件），耗时0.837s。这个加载速度在PC端的表现还算可以，但是在手机端就会感觉特别慢，特别是在安卓手机上。

传统Web页面的特点是执行如下任何一个操作，都会引起浏览器对于整个页面的刷新：

·　单击链接。

·　提交表单。

·　触发location.href='...'这样的JS代码。

我们来看一个传统Web页面的例子。

<html>
<head>
    <script src="my.js"></script>
    <style src="my.css"></style>
</head>
<body>
    <img src='my.jpg' />
    <p> 你好！ 传统Web页面！ </p>
</body>
</html>

每个浏览器都会从第一行解析到最后一行，然后继续加载my.js、my.css、my.jpg这三个外部资源。

其实很好理解，这个就是传统Web页面的打开方式。

2．单页应用

单页应用的精髓是点击任何链接都不会引起页面的整体刷新，只会通过JavaScript替换页面的局部内容。

3．Ajax和XML

Ajax（Asynchronous JavaScript，JS的异步请求）的概念是每次打开新的网页时，不要让页面整体刷新，而是由JS发起一个“HTTP异步请求”，这个“异步请求”的特点就是不让当前的网页发生阻塞。

用户可以一边上下滚动页面播放视频，一边等待这个请求返回数据。浏览器接收到返回数据之后，由JS控制刷新页面的局部内容。

这样做的好处是：

（1）大大节省了页面的整体加载时间，各种.js、.css等资源文件加载一次就够了。

（2）节省了带宽。

（3）同时减轻了客户端和服务端的负担。

在智能手机和App应用（特别是微信）普及之后，大量的网页都需要在手机端打开，Ajax的优势就体现得淋漓尽致。

虽然Ajax的名称本意是“异步JS与XML”，但是目前在服务器端返回的数据中几乎都使用JSON，而抛弃了XML。

在2005年，国内的技术论坛开始提及Web 2.0，其中Ajax技术被人重视。到了2006年年初，可以说掌握Ajax是前端程序员的重要的加分项。

可惜当时jQuery在国内不是很普及，Prototype也没有流行起来。在笔者与北京软件圈子里的各大公司的同行们交流时，发现大家用的都是原生的JavaScript Ajax，这种不借助任何第三方框架的代码非常烦琐；而且由于需要考虑到浏览器的兼容问题，开发起来也很让人头疼。

例如，当时的代码往往是这样的：

var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
    try {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e2) {
        xmlHttp = false;
    }
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
}

上面的代码仅仅是为了兼容各种浏览器。实际上，后面还有几十行的冗余代码，之后才是正常的业务逻辑代码。

到2008年，国内开始流行Prototype、jQuery之后，发起一个Ajax请求的代码精简成几行：

jQuery.get('http://some_url?para=1', function(data){
    // 正常代码
})

从那时开始，Ajax在国内变得越来越普及。

4．Angular

第一个单页应用的知名框架应该是Angular，由Google在2010年10月推出。当时的Gmail、Google Map等应用把Ajax技术运用到了极致。而Angular框架一经推出，立刻引燃了单页应用这个概念。尽管后来各种SPA框架层出不穷，在2015年之前，Angular稳坐SPA的头把交椅。

5．当下的SPA技术趋势

SPA框架已经成为项目开发必不可少的内容，只要有移动端开发，就会面临以下两个选择：

·　做成原生App。

·　做成SPA H5。

无论是iOS端还是Android端都对SPA青睐有加，其优点如下：

（1）打开页面速度特别快。打开传统页面，手机端往往需要几秒，而SPA则在零点几秒内。

（2）耗费的资源更少。因为每次移动端只请求接口数据和必要的图片资源。

（3）对于点／单击等操作响应更快。对于传统页面，手机端的浏览器在操作时单击按钮会有0.1s的卡顿，而使用SPA则不会有卡顿的感觉。

（4）可以保存浏览的历史和状态。不是每一个Ajax框架都有这个功能。例如，QQ邮箱虽然也是页面的局部刷新，但每次打开不同的邮件时浏览器的网址不会变化。而在所有的SPA框架中，都会有专门处理这个问题的模块，叫作Router（路由）。例如：

http://mail.my.com/#/mail_from_boss_on_0620 ，对应老板在6月20日发来的邮件。

http://mail.my.com/#/mail_from_boss_on_0622 ，对应老板在6月22日发来的邮件。

2011—2012年间，各种SPA框架出现了井喷的趋势，包括Backbone、Ember.js等上百个不同的框架。近几年比较流行的框架是Angular、React和Vue.js。

本周热推：
图数据库实战快速念咒：MySQL入门指南与进阶实战零起步玩转掌控板与Mind+数据结构（Python语言描述）（第2版）Python安全攻防：渗透测试实战指南
上一章目录下一章