前端——如何演化

埋头学习了一段时间的前端基础知识 JavaScript  jQuery 以及当前比较火的MVVM模式数据驱动框架的VUE.js（类似的还有Angular.js React.js） 并在项目中开发了几个业务组件

感觉学习到很多，但是还是没有一个系统上的认识。

什么是前端 ？ 前端到底是用来做什么的？ 前端技术如何演化？为何演化？

下面我们来简单梳理一下:

静态网页：

最早的HTML页面是完全静态的网页，他是预先编译好的存放在web服务器上的html文件，当浏览器请求某个url时，web服务器就把指定的html文件返回给浏览器，显示文件内容。

动态网页：

显然我们不可能预先储备所有的页面。很多时候都需要动态生成网页。

这样是否可以通过编程语言，动态拼接成html文件给浏览器

于是，后面研究发现，大多数的html片段是不变的，变化的只有少数和业务相关的数据。

从而出现新的创建动态html的方式：ASP,JSP和PHP等，分别是有微软、SUN和开源社区开发

JavaScript引入

动态网页的缺点是，一旦浏览器显示了一个HTML页面，要更新页面内容，唯一的方法就是 重新向服务器获取一份新的HTML页面

有了JavaScript后，浏览器就可以运行JavaScript,然后对页面进行一些修改。通过修改html的dom结构和css来实现一些动画效果，

这些功能没法在服务器端实现，必须在浏览器端实现。

jQuery出现

由于原生的API很难懂，语法很长不好用，且考虑各种浏览器的兼容性。jQuery的出现简化了操作，且解决了很多棘手的问题。

jQuery就是用JavaScript更加方便的查询和控制页面控件。

MVC模式

需要服务器端的配合，JavaScript可以在前端修改服务器渲染后的数据。

问题是所有的通信都是单向的

• view 传送指令到controller
• controller完成业务逻辑后，要求model改变状态
• model将新的数据发送到view，用户得到反馈

MVVM模式

该模式，借鉴了桌面应用程序的mvc思想，把model用纯JavaScript对象表示，view负责显示。两者做到最大限度分离。

• 采用双向绑定：View的变动自动反应在ViewModel，反之亦然，model数据变动，也自动展示给页面显示。
• 把model和view关联起来的就是viewmodel，viewmodel负责把model的数据同步到view显示出来，还负责把view的修改同步回model

MVVM的核心思想：关注model的变化。让MVVM框架利用自己的机制去自动更新DOM，从而把开发者从操作DOM的繁琐中解脱出来。