网站交互、开发方式和前端框架介绍

　　这个世界惟一不变的可能就是变化，历史的车轮滚滚向前，它不会因任何人的消极缓慢而中止。时代抛弃你时，连一声再见都不会说。

　　从最开始的Javascrpit、到后来的Jquery、（ExtJs、EasyUI、MiniUI）、Bootstrap、Layui，再到现在的mvvm框架（Vue.js、Angular.js、React.js），整个前端的发展趋势一直在改变。

　　就拿Jquery来讲，在Dom操做领域无疑是一代霸主，它击败了全部Dom领域的竞争对手，却输给了时代，mvvm框架的出现，让它顿时黯然失色。

　　这不禁得让我想起大润发。大润发创始人离职时说：打败了全部对手，却输给了时代。大润发在零售行业是一个号称19年不关一家店的传奇商场。在商场这个领域里，没有任何人能战胜它，包括沃尔玛/家乐福，可是很惋惜他败给了这个时代，被阿里巴巴收购，高层集体走人。

　　听说在程序员界有那么一条鄙视链：每个程序员应该都据说过程序员鄙视链，作c的看不起作c++的，作c++看不起作java的，作java看不起作.net的，而后这些人都看不起搞PHP或前端的，能够说，前端程序员应该处于程序员鄙视链的底端。若是你看了以上这些惨绝人寰的鄙视链以后，仍然没有击倒你想要作程序员的心，那我必须提醒你一件最重要的事：先去交一个女友，再来学写程序；由于一旦你成为软件工程师以后，就交不到女友了。

      早期的前端俗称美工、切图仔，天天的工做就是切图、写写html、写写css。现在前端变得愈来愈重，早已不复当年，各类新技术突飞猛进、层出不穷，前端要学的东西太多，其学习的难度丝绝不低于后端。

　　最近这几年，前端的发展实在太快。Node.js的出现，更是将前端的发展提高到了一个新的境界。Node.js开启了前端模块化、组件化的进程，新技术层出不穷，各类mvc、mvvm框架也流行了起来。

网站交互方式

    网站交互有两种经常使用的方式：

• 经典的多页面
• 现代式的单页面

　　由多页面组成的站点，咱们称之为多页应用，由单页面组成的站点称之为单页应用。

　　在过去，许多Web后台经常使用UI框架，如ExtJs、EasyUI等等，经过iframe来嵌套页面，表面上看起来像单页应用，其本质其实依旧是多页应用。

多页Web应用（MPA）

　　每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫作多页应用。

　　多页应用以服务端为主导，先后端混合。例如：.php文件、aspx文件、jsp文件。

　　特色：

• 用户体验通常，每次跳转都会刷新整个页面
• 页面切换慢，等待时间过长
• 每一个页面都要从新加载渲染，速度慢
• 首屏时间快，SEO效果好（蜘蛛会爬连接）
• 先后端糅合在一块儿，开发和维护效率低

为何多页应用的首屏时间快？

　　首屏时间叫作页面首个屏幕的内容展示的时间，当咱们访问页面的时候，服务器返回一个html，页面就会展现出来，这个过程只经历了一个HTTP请求，因此页面展现的速度很是快。

为何搜索引擎优化效果好（SEO）？

　　搜索引擎在作网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是能够识别html内容的，而咱们每一个页面全部的内容都放在Html中，因此这种多页应用，seo排名效果好。

为何切换慢？

　　由于每次跳转都须要发出一个http请求，若是网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。

单页Web应用（SPA）

　　单页Web应用（single page web application），简称SPA，就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

　　单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，全部的操做都在这张页面上完成，都由JavaScript来控制。

　　单页应用开发技术复杂，因此诞生了一堆的开发框架：Angular.js、Vue.js、React.js。

      单页应用，先后端分离，各司其职，服务端只处理数据，前端只处理页面（二者经过接口来交互）。

单页应用的优势

• 用户体验好，就像一个原生的客户端软件同样使用，切换过程当中不会频繁有被“打断”的感受。
• 先后端分离，开发方式好，开发效率高，可维护性好。服务端不关心页面，只关心数据；客户端不关系数据库及数据操做，只关心经过接口拿到数据和服务端交互，处理页面。
• 局部刷新，只须要加载渲染局部视图便可，不须要整页刷新。
• 彻底的前端组件化，前端开发再也不以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整。
• API 共享，若是你的服务是多端的（浏览器端、Android、iOS、微信等），单页应用的模式便于你在多个端共用 API，能够显著减小服务端的工做量。容易变化的 UI 部分都已经前置到了多端，只受到业务数据模型影响的 API，更容易稳定下来，便于提供更棒的服务。
• 组件共享，在某些对性能体验要求不高的场景，或者产品处于快速试错阶段，借助于一些技术（Hybrid、React Native），能够在多端共享组件，便于产品的快速迭代，节约资源。

   单页应用的缺点

• 首次加载大量资源：要在一个页面上为用户提供产品的全部功能，在这个页面加载的时候，首先要加载大量的静态资源，这个加载时间相对比较长；
• 对搜索引擎不友好：由于界面的数据绝大部分都是异步加载过来的，因此很难被搜索引擎搜索到。
• 开发难度相对较高：开发者的JavaScript技能必须过关，同时须要对组件化、设计模式有所认识，他所面对的再也不是一个简单的页面，而是相似一个运行在浏览器环境中的桌面软件。

• 兼容性：单页应用虽然已经很成熟了，可是都没法兼顾低版本浏览器

表1.1-单页应用和多页应用对比

比较点	多页应用模式MPA	单页应用模式SPA
应用构成	由多个完整页面构成	一个外壳页面和多个页面片断构成
跳转方式	页面之间的跳转是从一个页面跳转到另外一个页面	页面片断之间的跳转是把一个页面片断删除或隐藏，加载另外一个页面片断并显示出来。这是片断之间的模拟跳转，并无开壳页面
跳转后公共资源是否从新加载	是	否
URL模式	http://xxx/page1.html http://xxx/page1.html	http://xxx/shell.html#page1 http://xxx/shell.html#page2
用户体验	页面间切换加载慢，不流畅，用户体验差，特别是在移动设备上	页面片断间的切换快，用户体验好，包括在移动设备上
可否实现转场动画	没法实现	容易实现（手机app动效）
页面间传递数据	依赖URL、cookie或者localstorage，实现麻烦	由于在一个页面内，页面间传递数据很容易实现
搜索引擎优化（SEO）	能够直接作	须要单独方案作，有点麻烦
特别适用的范围	须要对搜索引擎友好的网站 须要兼顾低版本浏览器的网站	对体验要求高的应用，特别是移动应用。 管理系统
开发难度	低一些，框架选择容易	高一些，须要专门的框架来下降这种模式的开发难度
CSS和JS文件加载	每一个页面都须要加载本身的CSS和JS文件	整个项目的CSS和JS文件只须要加载一次
页面Dom加载	浏览器须要不停的建立完整的DOM树，删除完整的DOM树	浏览器只须要建立一个完整的DOM树，此后的伪页面切换其实只是在换某个div中的内容
页面请求	全部页面请求都是同步的——客户端在等待服务器给相应的时候，浏览器中一片空白	全部的“伪页面请求”都是异步请求——客户端在等待下一个页面片断到来时，仍能够显示前一个页面内容——浏览器体验更好
HTML页面数	项目中有多个完整的HTML页面	整个项目中只有一个完整的HTML页面；其余HTML文件都是HTML片断。

　　说明：如今除了一些电商网站，其实已经不多有系统须要去兼容低版本的浏览器，大部分是IE9以上的浏览器。而用户想要拥有更好的上网操做体验，就不得不选择高版本的浏览器。若是不须要考虑SEO的项目，建议采用单页应用的开发方式，由于这样能够先后端彻底分离，提升开发效率，用户体验只是其次。

先后端分离的开发模式

    前端端分离的开发模式基本流程一般以下：

1. 项目立项
2. 需求分析
3. 服务端的工做

• 需求分析
• 数据库设计
• 接口设计（有时候也须要前端参与其中）
• 接口开发

1. 前端的工做

• 需求分析
• 写界面和功能
• 经过接口和服务端交互

先后端分离的开发方式，不管是多页应用仍是单页应用均可以采用，可是多页应用采用先后端分离模式的状况一般比较少。

前端的主要工做是什么？主要负责MVC中的V这一层；主要工做就是和界面打交道，来制做前端页面效果；

前端三大开发框架

单页应用开发实际上是比较复杂的，须要必定的技术支撑。因此一些前端框架应运而生。

Vue.js和Angular.js、React.js 一块儿，并成为前端三大主流框架。

Angular

• 09年诞生
• Google
• 它的目的就是让咱们开发单页应用变得更方便了
• 它主要为前端带了mvvm开发模式，这是一个伟大的变革
• mvvm：数据驱动视图，不操做DOM

React

• Facebook公司本身开发的一个Web框架
• 组件化

Vue

• Vue做者：尤雨溪
• 早期由我的开发，在国内很火
• Vue借鉴了Angular和React之所长，属于后起之秀

　　前端三大主流框架各有千秋，对于规模不大的前端项目来讲，Vue 因其极易上手会被列出首选之位，而Angular 在快速开发大型 Web 项目上很受推崇，但仍存诸多缺陷，React则为 JavaScript 应用开发者提供新的开发方式。

　　若是硬是要给这三大框架一个排名，目前排名是React、Vue、Angular。从目前国内的总体行情看，一些中小企业，更青睐于Vue。做为一名开发者，咱们无需纠结哪一个更好，对咱们而言，不一样的框架或者不一样的语言，它们都只是一个工具而已，是咱们解决问题的工具。

　　Vue.js 是目前最火的一个前端框架，而React是最流行的一个前端框架（React除了开发网站，还能够开发手机App， 固然Vue一样也能够用于进行手机App开发，须要借助于Weex，并且没有React那么强大）。

　　Vue.js最火，表示想要学习的人员最多，React最流行，表示目前正在使用的人最多。而Angular 的流行度已呈现明显下滑趋势。甚至有人说：“对于 Angular 2，我想我永远不会再使用。 由于它带来的问题远远多于解决的问题。 它须要丰富的知识经验来构建大型应用程序，不然老是会遇到性能问题。

　　现在最火热的前端需求在于移动端，而再也不是 Web 。React Native 很是成功，同时它也会带动 React.js 的发展。Vue.js目前 只在 Web 前端中占据主导地位，而不会统治全部的前端领域。React 则能够在全部的前端领域中盛行。这是为何？

　　由于Vue.js 未能提供替代 React Native 的可行性方案（Weex 和 Quasar 太年轻，存在碎片化而且很脆弱），伴随着 React Native 和 React.js 的爆发式增加，若是你掌握了 Web 前端的 React 和 Redux ，你将得到极大优点：只要你想，即可在几周内熟练地将 React Native 应用到移动端。

　　而使用 Vue.js 编写 Web 的前端人员几周就能掌握 React Native，因此无论怎么说，学习Vue.js都是很是值得的。使人兴奋的是：”截止至目前为止，Vue在github上的start数已经超越了react，咱中国开发人员有着卓著的贡献，我很是看好Vue，也为咱中国人感到自豪！

为何要学习流行框架（mvvm框架）

• 企业为了提升开发效率：在企业中，时间就是效率，效率就是金钱。而使用框架，可以提升开发的效率。
• 提升开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js
• 在Vue中，一个核心的概念，就是让用户再也不操做DOM元素，解放了用户的双手，让程序员能够更多的时间去关注业务逻辑；
• 加强本身就业时候的竞争力

　　mvvm框架可以帮助咱们减小没必要要的DOM操做；提升渲染效率；双向数据绑定的概念：经过框架提供的指令，咱们前端程序员只须要关心数据的业务逻辑，再也不关心DOM是如何渲染的了。

　　在Vue中，一个核心的概念，就是让用户再也不操做DOM元素，从而解放用户的双手，让程序员能够有更多的时间去关注业务逻辑。

框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目若是须要更换框架，则须要从新架构整个项目。

框架举例：

• node 中的express
• Java中的spring boot

库（插件）：提供某一个小功能，对项目的侵入性较小，若是某个库没法完成某些需求，能够很容易切换到其它库来实现需求。

例如：

• 从Jquery 切换到 Zepto
• 从 EJS 切换到 art-template

参考文献

https://baike.baidu.com/item/SPA/17536313?fr=aladdin

http://pixeljets.com/blog/vue-js-vs-react-what-to-expect-in-2018/

https://www.jianshu.com/p/bae4f6604549

http://www.javashuo.com/article/p-fuduytsv-cs.html

https://www.jianshu.com/p/4c9c29967dd6

https://blog.csdn.net/qq_39579242/article/details/82703150