大型网站架构的技术细节：前端架构单页应用的方法及发展趋势

单页应用用到的方法

首先明确一点，单页本身只是一个概念，其实就是把多个网页合并成一个网页。但是很多人会把单页应用和一些框架或工具（如Vue-CLI、Angular2及后续版本）混为一谈，认为只能通过这些框架才能创建单页应用。其实单页应用还是一个网页，基础技术还是HTML+CSS+JavaScript，只是单页应用往往具备更复杂的交互、更多的网页元素，所以导致网页内部非常复杂，模块化的问题更加突出。而一些框架或工具（如Vue-CLI、Angular 2及后续版本）提供了完备的模块化解决方案，所以使用这些框架开发单页应用是相对容易的。实际上，单页应用还是一个网页，只是比较复杂的网页，下面介绍单页应用用到的一些方法。

1.通过交互事件控制网页元素

单页应用只是将多个网页合并成一个网页，所以我们还是可以通过一些交互事件来控制网页元素的。如单击某个按钮后显示某些页面元素等。

2.通过路由

路由就是通过监听URL的变化，来控制网页元素。路由的方式有两种，hash和history。下面首先介绍hash方式。

hash是URL中hash（#）及后面的部分，如http://localhost/abc/#/home中的#/home便为hash，浏览器的地址栏只更新这部分是不会引起页面刷新重载的。我们可以通过hashchange事件监听URL的变化，然后再根据变化的值操作网页元素。例如，HTML代码如代码3.42所示，其中单击标签后改变了URL中的hash部分，JavaScript代码如代码3.43所示，URL中hash部分改变，触发ChangePage()函数，在函数内可操作网页元素。

代码3.42　HTML代码

代码3.43　JavaScript代码

而history方式则利用了history.pushState()、history.replaceState()等API去修改URL的路径部分，而使用这些API修改URL的路径部分是不发生跳转的。如将http://localhost/abc改成http://localhost/bcd，正常情况下，在浏览器地址栏中手动修改是会发生跳转的，但是通过这些API修改却不会发生跳转。但是，这些API不会触发事件通知，只会修改URL。所以我们需要自己触发事件。例子如下所示，HTML代码如代码3.44所示，JavaScript代码如代码3.45所示，当单击标签后，会被JavaScript拦截，JavaScript拦截后会执行history.pushState()函数并调用ChangePage()函数修改页面元素

代码3.44　HTML代码

代码3.45　JavaScript代码

对比“通过交互事件来改变网页元素”和“通过路由改变网页元素”这两种方式，其实原理上都是监听事件来改变网页元素，只是后者在单击浏览器中的“前进”或“后退”按钮时能做出响应，而前者却可能会跳转到别的网页。

注意：目前Vue.js、Angular、React.js都提供了路由的封装，使用上会比上述原生方法简单一些，而且这些框架会让路由与自身的模块化方法产生关联，所以使用框架会让单页应用的开发更省力一些。

单页应用的发展趋势

对于单页应用的讨论，网上有很多人都鼓吹把网站做成单页应用，仿佛不是单页应用的网站很快就会被淘汰一样。但是在实际开发时，把整个网站做成一个单页应用是十分危险的行为。具体问题有下面几点：

市面上的模块化方案目前不够好，网页开发是简单的，引用了模块化框架后开发反而变困难了。

缺少好的网页本地缓存机制，每次用户打开网站都需要下载一次网页。

虽然现在针对上面的问题有不同的解决方案，模块化方面，可以通过学习掌握模块化框架的使用；缓存方面，浏览器可以缓存JavaScript、CSS等资源文件。但是，在你幻想着并实际把整个网站做成一个单页网站的时候，会发现网站内部代码凌乱不堪，代码层次无法辨认的同时，网站加载奇慢无比。这样的项目笔者曾经历过（把一个大型网站做成一个单页应用），当时这个网站打开的时候需要几分钟，操作起来也是不流畅的，更糟糕的是，一般的计算机再想打开其他网页的话会造成浏览器崩溃。

因此，不要盲目地响应单页应用的潮流，我们更应该着眼当下，毕竟网站是做给现在的人用的。现今的浏览器毕竟不是操作系统，没有完备的本地储存机制，也没有健全的内存管理和进程线程调度机制。现今浏览器对于网页的要求是，网页必须是轻量的。

综上，前端架构需要适当地使用单页应用，权衡哪些网页需要合并成一个单页应用，哪些网页必须要分离。

注意：按目前的技术发展趋势来讲，以后很可能会出现像桌面软件和App那样的Web应用，但是目前还是不建议把整个网站做成一个单页应用。

小结

对于大型网站的前端网页部分，很多人都误认为只要选好一个前端框架就能把前端网页部分做得很好。但实际情况是，即使采用了最好的前端框架，也不一定能让前端网页的质量“过硬”。很多时候我们过于依赖某项现成的技术而忽略了项目的过程其实是量体裁衣的过程，每个项目都会有很多细节需要我们关注和解决。因此，前端架构开发人员应该对项目本身有足够的认识，清楚前端工程存在哪些问题。而采用现成技术的根本，仅仅是因为它可以解决我们需要解决的一些问题。

本篇介绍了前端架构需要关注的细节与对应的解决方法，包括规整化、适配性和兼容性、模块化及单页应用。另外，本章尽量还原了问题产生的原因，然后介绍具体的解决方法，希望读者在了解了这些问题和解决办法后，对前端架构能有一个清晰且全面的认知。

本文给大家讲解的内容是大型网站架构的技术细节：前端架构，单页应用