性能和体验的互联网前端数据可视化的设计与实现【字数：9942】
摘 要本项目主要是在公司工作阶段针对新的形势对官网界面展示和效果做的更新迭代，通过对整站前端的分析和架构，为这一类型的网站提供一个合理高效的解决方案。本设计主要实现数据的实时展示更新。设计之初项目的核心是jQuery，整合流行的requireJS进行模块化开发。使用的图表插件是TradingView。 上线之后随着使用和用户的反馈，发现了该设计的很多弊端，继而再次对问题进行了分析和审查，做出了改变前端框架的决定。新的前端框架使用的是Vue.js。此设计为纯前端开发，调用公司的接口。开发阶段可以在本地使用nginx反向代理获取线上的数据，或者在vue项目里的配置文件加上要访问的ip地址。部署上线的时候可以将访问地址置为空，服务器会自动获取当前的地址进行数据访问。本文将以一个前端开发者的身份，系统地阐述本项目的设计思路，开发中遇到的问题以及解决方案。
目录
1. 引言 1
1.1课题背景 1
1.2课题研究的意义 1
1.3课题研究的主要内容 2
2. 可行性及需求分析 3
2.1可行性分析 3
2.1.1技术可行性分析 3
2.1.2经济可行性分析 3
2.1.3社会可行性分析 3
2.2需求分析 4
3. 项目设计1.0版本 5
3.1项目背景 5
3.2前端开发环境 5
3.2.1 NGINX的安装 5
3.2.2 NGINX的配置 5
3.2.3 hosts文件的修改 6
3.3前端开发工具 6
3.4前端开发相关技术 7
3.4.1项目核心jQuery 7
3.4.2整合项目模块的工具库require.js 7
3.5项目设计及分析 7
3.5.1项目设计 7
3.5.2项目分析 11
4. 项目设计2.0版本 14
4.1项目背景 14
4.2前端开发环境 14
4.2.1 Node.js的安装 14
4.2.2 Yarn的安装 14
4.3前端开 *好棒文|www.hbsrm.com +Q: @351916072@
发工具 15
4.4前端开发相关技术 15
4.4.1数据的双向绑定 15
4.4.2组件的生命周期 16
4.5项目设计及分析 17
4.5.1项目设计 17
4.5.2项目分析 17
5. 开发总结 19
5.1开发思维的转变（ 操作DOM > 操作数据 ） 19
5.2设计模式的转变（ MVP > MVVM ） 20
5.3性能分析 21
5.3.1从页面首屏载入角度分析 21
5.3.2从处理业务角度分析 22
参考文献 23
致谢 24
引言
1.1课题背景
此课题是在公司工作的大半年中，随着技术的不断更新，经历了不同的开发阶段，对新技术的一次探索。就公司来看，公司本身需要向用户展示大量的数据，而数据本身需要实时的更新。如何帮助用户去理解这些后台传过来的数据和信息，如何在大量的数据中去借助图表从而让用户能够探索其中的规律，如何将数据使用的更高效等等将是前端开发必须要思考的问题。参考StateOfJS[1]的2018调查报告，新的前端Javascript[2]技术中如ES6[8]拥有86.3%的使用率，TypeScript拥有46.7%的使用率，它们正火热地被开发者使用中。而伴随着前端框架的迅速崛起，前端工作日益变得更加复杂。在那些以数据展示和交易为主的公司，如果仍然使用传统的前端框架设计，将面临着极高的性能挑战。在通常的情况下，作为前端开发人员很难感受到压力，因为当他们使用着他们强大的16核心工作站和高速的互联网的时候，没有人会关心速度快慢的问题，但是当网络环境变得恶劣、用户的设备差异化严重的时候，这种情况开发者会感到很大的压力。目前正是前端框架高速发展的时期，为了迎合前端发展趋势，同时也契合本公司前端开发的需要，所以一款基于性能和体验的前端解决方案替代传统的原生开发应运而生。
1.2课题研究的意义
我们身处于一个大数据的时代，数据正爆炸式地增长，我们知道如此多的信息的质量往往很大程度上取决于表达它的方式。图表无疑是其中的一种，但是光有图表还是不行的，对于我们公司而言因为数据是时刻变化的，通过在企业工作的这段时间分析总结出一个适合该行业的一个互联网前端解决方案势在必行。映射后端返回的数据变成可视化的表单，图表，实时地展示数据。作为一种互联网的技术，Web应用从没有像今天这样如此火热，这种B/S结构的系统会有非常好的跨平台性，用户不必担心当你的PC或者MAC关机后，对突发的市场行情变化无所适从，只需要在手机上打开网页就能进行和桌面平台一样的交互体验。Web应用同样是易扩展的，只需要从后台调取相应的接口，前端就能实现想要的需求。甚至这种扩展所使用的技术是另一种框架，仍然可以完美的部署在服务端，用户完全不会觉得有交互的障碍。为了做出符合这种要求的前端应用，相应地对Web技术的要求也和以往的Web开发差别很大，本项目意在提供一种解决方案，让承载数据可视化的前端技术拥有更好的用户体验和更高的性能。
1.3课题研究的主要内容
本文研究的课题为基于性能和体验的互联网前端数据可视化设计。使用Web技术来开发，整个项目前后分离，前端通过调用后端接口完成数据的展示，为纯前端的项目，项目是工作时为公司开发的前端的简化版。主要是针对对数据展示更新和实时交易有极大需求的行业而设计。抽象一下前端开发者的工作，无非就是维护页面的状态和更新页面的视图，而这些维护和更新都避免不了对DOM的操作，此项目最初的版本是使用一套以jQuery库[5]为主要技术构建的网站，整个网站利用requireJS[9]这个工具库将项目分割为多个有依赖的模块。这些模块异步加载并且整个网站是只有一个html的单页面应用。没错，jQuery强大的选择器和一些函数简化了对DOM的操作，仅仅是简化对本项目还是提升太少，随后的一个更新版本使用的是前端框架Vue.js,与上一套技术最明显的不同就是Vue它只关注数据和视图，大大解放了DOM操作，迎合了目前的前端框架的发展趋势，也解决了前一个项目版本因为大量的DOM操作面对复杂数据更新无所适从的问题。
可行性及需求分析
2.1可行性分析
目录
1. 引言 1
1.1课题背景 1
1.2课题研究的意义 1
1.3课题研究的主要内容 2
2. 可行性及需求分析 3
2.1可行性分析 3
2.1.1技术可行性分析 3
2.1.2经济可行性分析 3
2.1.3社会可行性分析 3
2.2需求分析 4
3. 项目设计1.0版本 5
3.1项目背景 5
3.2前端开发环境 5
3.2.1 NGINX的安装 5
3.2.2 NGINX的配置 5
3.2.3 hosts文件的修改 6
3.3前端开发工具 6
3.4前端开发相关技术 7
3.4.1项目核心jQuery 7
3.4.2整合项目模块的工具库require.js 7
3.5项目设计及分析 7
3.5.1项目设计 7
3.5.2项目分析 11
4. 项目设计2.0版本 14
4.1项目背景 14
4.2前端开发环境 14
4.2.1 Node.js的安装 14
4.2.2 Yarn的安装 14
4.3前端开 *好棒文|www.hbsrm.com +Q: @351916072@
发工具 15
4.4前端开发相关技术 15
4.4.1数据的双向绑定 15
4.4.2组件的生命周期 16
4.5项目设计及分析 17
4.5.1项目设计 17
4.5.2项目分析 17
5. 开发总结 19
5.1开发思维的转变（ 操作DOM > 操作数据 ） 19
5.2设计模式的转变（ MVP > MVVM ） 20
5.3性能分析 21
5.3.1从页面首屏载入角度分析 21
5.3.2从处理业务角度分析 22
参考文献 23
致谢 24
引言
1.1课题背景
此课题是在公司工作的大半年中，随着技术的不断更新，经历了不同的开发阶段，对新技术的一次探索。就公司来看，公司本身需要向用户展示大量的数据，而数据本身需要实时的更新。如何帮助用户去理解这些后台传过来的数据和信息，如何在大量的数据中去借助图表从而让用户能够探索其中的规律，如何将数据使用的更高效等等将是前端开发必须要思考的问题。参考StateOfJS[1]的2018调查报告，新的前端Javascript[2]技术中如ES6[8]拥有86.3%的使用率，TypeScript拥有46.7%的使用率，它们正火热地被开发者使用中。而伴随着前端框架的迅速崛起，前端工作日益变得更加复杂。在那些以数据展示和交易为主的公司，如果仍然使用传统的前端框架设计，将面临着极高的性能挑战。在通常的情况下，作为前端开发人员很难感受到压力，因为当他们使用着他们强大的16核心工作站和高速的互联网的时候，没有人会关心速度快慢的问题，但是当网络环境变得恶劣、用户的设备差异化严重的时候，这种情况开发者会感到很大的压力。目前正是前端框架高速发展的时期，为了迎合前端发展趋势，同时也契合本公司前端开发的需要，所以一款基于性能和体验的前端解决方案替代传统的原生开发应运而生。
1.2课题研究的意义
我们身处于一个大数据的时代，数据正爆炸式地增长，我们知道如此多的信息的质量往往很大程度上取决于表达它的方式。图表无疑是其中的一种，但是光有图表还是不行的，对于我们公司而言因为数据是时刻变化的，通过在企业工作的这段时间分析总结出一个适合该行业的一个互联网前端解决方案势在必行。映射后端返回的数据变成可视化的表单，图表，实时地展示数据。作为一种互联网的技术，Web应用从没有像今天这样如此火热，这种B/S结构的系统会有非常好的跨平台性，用户不必担心当你的PC或者MAC关机后，对突发的市场行情变化无所适从，只需要在手机上打开网页就能进行和桌面平台一样的交互体验。Web应用同样是易扩展的，只需要从后台调取相应的接口，前端就能实现想要的需求。甚至这种扩展所使用的技术是另一种框架，仍然可以完美的部署在服务端，用户完全不会觉得有交互的障碍。为了做出符合这种要求的前端应用，相应地对Web技术的要求也和以往的Web开发差别很大，本项目意在提供一种解决方案，让承载数据可视化的前端技术拥有更好的用户体验和更高的性能。
1.3课题研究的主要内容
本文研究的课题为基于性能和体验的互联网前端数据可视化设计。使用Web技术来开发，整个项目前后分离，前端通过调用后端接口完成数据的展示，为纯前端的项目，项目是工作时为公司开发的前端的简化版。主要是针对对数据展示更新和实时交易有极大需求的行业而设计。抽象一下前端开发者的工作，无非就是维护页面的状态和更新页面的视图，而这些维护和更新都避免不了对DOM的操作，此项目最初的版本是使用一套以jQuery库[5]为主要技术构建的网站，整个网站利用requireJS[9]这个工具库将项目分割为多个有依赖的模块。这些模块异步加载并且整个网站是只有一个html的单页面应用。没错，jQuery强大的选择器和一些函数简化了对DOM的操作，仅仅是简化对本项目还是提升太少，随后的一个更新版本使用的是前端框架Vue.js,与上一套技术最明显的不同就是Vue它只关注数据和视图，大大解放了DOM操作，迎合了目前的前端框架的发展趋势，也解决了前一个项目版本因为大量的DOM操作面对复杂数据更新无所适从的问题。
可行性及需求分析
2.1可行性分析
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/651.html
