前端入门知识（一）

前端入门知识（一）

前端的发展历程

       总的概括一下前端的历史：做为后端的一部分----从后端分离出来----自己写前端和后端

       对应的前端程序员的历史：切图仔----前端工程师----全栈工程师

• 什么是前端

1. 前端：针对浏览器的开发，代码在浏览器中运行
2. 后端：针对服务器的开发，代码在服务器运行

• 前后端不分的时代

      互联网发展的早期，前后端开发是一体的，前端的代码是有后端人员进行开发的，也是做为后端代码的一部分

      大致的开发流程是这样的

1. 浏览器输入网址，发送请求
2. 后端收到浏览器的请求
3. 在数据库读取数据，放到渲染模板中，生成静态页面
4. 发送到浏览器

      浏览器输入的网址一般情况就是我们说的接口，后台通过拼接html代码（或者使用渲染模板）生成了静态页面，发送到浏览  器，然后浏览器的用户操作，一般是跳页面，或者form表单提交数据，无论哪一种，页面都会被刷新。

      这时候，前端工程师就负责写模板，让后台人员进行数据替换，这就是我们所说的切图仔。只是能对页面样式进行一些样式处理。

• 后端的MVC的开发模式

     那时候的网页开发，采用的后端的MVC模式

1. Model（模型层）：提供/保存数据
2. Controller（控制层）：数据处理，实现业务逻辑
3. View（视图层）：展示数据，提供用户界面

    View就是前端

• Ajax（第一个转折点）

       Ajax即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）

       Ajax技术出来了，改变了一切，Ajax可以独立获取数据，那就代表这获取数据，提交数据不再需要刷新整个页面，很多时候我们只需要刷新某部分的页面（比如列表分页），这样就会节省很多流量，用户的体验也变顺滑了

      缺点也是很明显，就是异步，异步就代表着有延迟，如果处理不好，用户会一脸懵逼

     1. 1998年：开始运用

     2. 2004年：Gmail

     3. 2005年：Google地图

• Web 2.0

      Ajax 技术促成了Web2.0 的诞生

1. Web 1.0： 静态页面，纯内容展示（只能读）
2. Web 2.0：动态页面，富交互，前端数据处理（可以读，写，跟其他用户进行交流，例如论坛，博客，微博）

     从这时候开始，前端变得复杂，切图仔开始需要对数据、动画、缓存等进行处理，来满足页面使用者。

• 前端MVC框架

      

     前端通过Ajax得到数据，因此也有了处理数据的需求。

     前端代码变得也需要保存数据、处理数据、生成视图，所以就诞生了MVC框架

     前端的MVC跟后台的MVC是有所区别的，特别是C控制层，因为前端处理业务逻辑比较少的，C层主要是用来保证M层和V层保持一致性。（需要手动更改）

   1. backbone.js

• 前端MVVM框架

    

   把C层换成VM层，更加简化了控制层，VM就是对M层和V层进行双向绑定。（不需要手动更改）

1. Angular
2. Vue

• 前后端分离

     1.Ajax-->前端应用兴起

      2.智能手机-->多终端支持

    这两个原因，导致前端开发方式发生根本的变化

    这时候切图仔变成前端工程师了

• Node的意义

1. javaScript成为服务器脚本语言
2. javaScript 成为唯一的浏览器和服务器都支持的语言
3. 前端工程师可以编写后端程序了

    在node的加持下面，一个人可以负责开发前端和后端，从数据库到UI