单页网站应用的现状及未来发展趋势_开题报告

第一部分   文献综述

网站，从浅层面来讲，可以理解为是一个用于信息展示的页面集合；

通常网站的网页由HTML（HyperTextMark-upLanguage）、CSS（Cascading Style Sheets)）和JS（java script）构成；HTML与CSS负责页面的静态数据展示部分，JS负责页面的各类动态数据展示以及动态页面效果。

从过去乃至现在，网站与使用者们的交互形式仍然大多数还是采用着非常经典的多页面模式。这种模式即使用WEB服务器部署软件，部署多份HTML文件（该HTML文件内部引用着它自身所需要用到的CSS、JS、以及其他资源文件），不同的HTML文件都具有它们自己特有的功能，提供着自己特有的信息。 当使用者们访问该网站时，可以根据自己当前的使用需求，打开不同的HTML文件，过去或者说现在这种模式仍然可以满足大部分网站使用者的需求。

随着技术的发展，网站使用者们对网站的要求越来越高，已经不满足于简单的信息获取或者复杂的功能交互，使用者们希望网站能在满足这些基本功能的前提下，响应的更快速，交互更友好。因此，单页网站应用应运而生，单页网站应用满足了网站使用者所需要的满足基本功能的前提下，能给与使用者更快的响应速度，交互更加友好。

目前来看，多页网站与单页网站这两个模式并存，且各自有他们的优缺点，在网站应用中被使用的频率也差不多持平。但是对于未来发展趋势来看，单页网站应用能满足网站使用者们更多的需求，单页网站应用势必会成为未来网站的主流模式。

单页网站应用的现状研究

单页网站应用，顾名思义，整个网站只有一个页面入口，即整个网站只有一个HTML入口文件。对于网站的功能划分，并不是按照传统的多页网站一样，通过不同的HTML入口文件来区分，而是通过不同的JS入口文件来区分。不同模块的JS入口文件中会加载各自对应模块功能的HTML片段、CSS样式以及其他资源文件到主入口的HTML入口文件中，以局部替换页面DOM结构的方式实现页面或者功能之间的切换；

同时，单页网站也意味着页面只会在首次加载时刷新了浏览器窗口，并加载资源文件。后续的子页面跳转是异步实现，页面只是局部刷新，那么如果通过url链接直接定位到子页面的功能（属于网站的基本功能之一）也非常重要，这就需要自己去根据网站的锚点功能实现一套自己的路由规则，通过路由解析实现进入网站时可以根据锚点直接定位到子页面模块。

单页应用的模式使得网站在使用过程中会不断的在页面中加入HTML片段，CSS以及JS，这就必须得注意CSS，JS的命名冲突问题，以及HTML中部分元素id属性冲突问题；通常针对HTML，单页应用通常会建议采用自定义渲染函数的方式来及决HTML属性结点冲突的问题，简单来说，就是将页面的DOM元素展现形式与JS中的数据变量进行单向绑定；同时对该JS变量进行监听，一旦变量发生变化，将会自动触发渲染函数将对应的JS变量生成对应的DOM结构并渲染在浏览器的主页面中，这样就避免了开发人员自己动手去处理HTML片段而产生冲突的问题；相对的，针对CSS，通常会采用SCSS或LESS预编译CSS语言技术来处理，即按照一定的语法规则编写CSS文件，最终会编译这份按照一定语法规则编写的CSS文件，对CSS每个命名都随机加上hash值，从而避免了不断往页面中注入CSS文件时CSS命名冲突的问题；JS的命名冲突问题通常也使用JS模块化的编程规范技术来处理，例如CMD、AMD等规范，然后通过编译打包JS的工具webpack、grunt等工具编译打包JS文件使得JS文件能在浏览器中正常运行。

综上所述，单页网站应用所具备的基本条件如下：

一个入口HTML文件；

一套页面路由解析规则

CSS预编译技术

JS模块化编程规范技术

编译打包JS工具

页面状态管理工具（可选，用于统一管理单项数据绑定的JS数据对象）

目前比较流行的单页网站应用开发有不少好的框架，例如：Reactjs（国外研发）、Vuejs（国内研发）等。从这里可以看出，不管是国内还是国外，大家技术发展方向还是比较统一，都往单页应用方向尝试。因此在单页网站应用这块的研究是很有必要的。

Webpack

Webpack是一个网站资源加载、JS编译打包的工具。它会根据模块的依赖关系，进行静态分析，然后将所有模块按照指定的规则生成对应的静态资源。它还配备了各类插件提供压缩JS代码、zip压缩打包文件的等等。

单页网站应用的JS是按照CMD或AMD的编码规范来编写的，这里就需要用到Webpack的编译打包功能，使得JS代码可以被浏览器正常的解析并执行。

Webpack-dev-server

Webpack-dev-server是一个小型的express服务器，它在开发阶段为Webpack打包的文件提供web服务。使得开发阶段可以实时查看网页，调试代码。同时它还具备当下热门的代码热替换功能，HTML、JS或者CSS文件更改通常需要刷新浏览器，使浏览器重新加载，才能加载到我们修改后的最新代码结果。使用了Webpack-dev-server的热替换功能后，热替换功能将实时监听网站工程下的文件变动，一旦有文件变动将利用socke技术，实时向浏览器更新变更的文件，使得浏览器始终展示最新的代码结果。

Reactjs

当下流行的单页网站应用开发的框架之一。它是一个可以在java script语言环境中构建用户界面的java script库。它将你的数据变化绑定在用户界面上，当有数据发生改变时，它将通过它自身特有的diff算法，以最小的变动，精确的更新页面DOM，是一个比较典型的单页应用开发框架；它自身还有许多配套的库，用于实现单页网站应用，例如：React-Router（单页应用的hash路由规则解析库）、React-Redux（页面状态管理库）等等。

Babel

用于编写下一代java script的编译器，有了它我们可以编码JS的时候采用最新的JS编码语法，ES2015、ES2017等。

SCSS

是一种CSS扩展语言，用规定的语法编写CSS文件，经过编译可以得到可以正常在浏览器中被识别的CSS文件。规定的语法使得我们开发过程中更好的理解CSS。

HTML、CSS、java script

HTML：超文本标记语言，标准通用标记语言下的一个应用，是网页内容构成的基础元素。

CSS：层叠样式表(英文全称：Cascading Style Sheets)，它用来表现HTML文件的样式，不仅可以静态地修饰网页，还可以配合java script语言动态的对网页的各元素进行格式化。

java script：是一种直译式的脚本语言，是一种动态类型、弱类型、基于原型的语言。通常在网页中使用，用来给网页增加动态功能。

第二部分  ^范文提纲

一、绪论

引言

单页网站应用的使用场景

单页网站应用的优势

本文实例开发所用框架、类库以及IDE

二、个人博客多页网站的实现

博客首页

我的相册

我的文章

关于我

三、个人博客单页网站应用的实现

博客首页

我的相册

我的文章

关于我

四、两次实例的结果对比

网页响应速度

用户体验

SEO

五、总结

多页网站的优缺点

单页网站的优缺点

单页应用的未来发展趋势

三、参考文献目录

[1]扎卡斯：《java script高级程序设计》人民邮电出版社 2006年；

[2]Alex、Banks、Eve、Porcello：《React学习手册》  中国电力出版社、 2017年12月；

[3]  MichaelS.Mikowski，JoshC.Powell：《单页Web应用 java script从前端到后端》人民邮电出版社2014年9月；

[4]  Emmit A.Scott：《SPA设计与架构：理解单页面Web应用》 电子工业出版社 2016年11月；

[5] 吴浩麟：《深入浅出Webpack》  电子工业出版社 2018年1月：

[6] 张鑫旭：《CSS世界》 人民邮电出版社 2017年12月；

[7] 未来科技：《HTML5+CSS3+java script从入门到精通（标准版）》 中国水利水电出版社  2017年5月；

[8] 胡晓霞 ：《HTML+CSS+java script网页设计从入门到精通（1DVD）》 清华大学出版社 2017年10月；

[9] 程墨：《深入浅出React和Redux》 机械工业出版社 2017年5月；

[10] 周俊鹏：《前端工程化：体系设计与实践》 电子工业出版社 2018年1月；