前端技术发展-CSDN博客

前端开发技术，从狭义的定义来看，是指围绕HTML、JavaScript、CSS这样一套体系的开发技术，它的运行宿主是浏览器。

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

1.静态页面

最早期的Web界面基本用于浏览某些文档内容，最简单的是这样一个文件：

<!doctype html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <p>段落</p>
</body>
</html>
复制代码

万维网（WWW）是欧洲核子研究组织的一帮科学家为了方便看文档、传论文而创造的，这就是为什么Web网页都基于Document。Document就是用标记语言+超链接写成的由文字和图片构成的HTML页面，这样的功能已经完全满足学术交流的需要，所以网页的早期形态和Document一样，完全基于HTML页面，并且所有内容都是静态的。

2.出现javascript，带有简单的逻辑操作

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <input id="firsInput" type="text" /> 
  <input id="lastInput" type="text" /> 
  <input type="button" onclick="print()" value="获取内容"/>
  <script>
    function print() {
      var firstName = document.getElementById("firstNameInput").value;
      var lastName = document.getElementById("lastNameInput").value;
      alert("Hello, " + firstName + "." + lastName);
    }
  </script> 
</body>
</html>
复制代码

3.结合了服务端技术的混合编程---前后端不分

由于静态界面不能实现保存数据等功能，出现了很多服务端技术，ASP（使用VBScript或者JScript），JSP（使用Java），PHP等等,有了这类技术，在HTML中就可以使用表单的post功能提交数据了，比如：

<form method="post" action="username.asp">
    <p>First Name: <input type="text" name="firstName" /></p>
    <p>Last Name: <input type="text" name="lastName" /></p>
    <input type="submit" value="Submit" />
</form>
复制代码

互联网发展的早期，前后端开发是一体的，前端代码是后端代码的一部分。

1.后端收到浏览器的请求
2.生成静态页面
3.发送到浏览器

4.Ajax出现

ajax是Asynchronous javascript and XML的缩写，此后前端不再是后端的模板，可以独立得到各种数据。

由于Ajax的出现，规模更大，效果更好的Web程序逐渐出现，在这些程序中，JavaScript代码的数量迅速增加。出于代码组织的需要，“JavaScript框架”这个概念逐步形成，当时的主流是prototype和mootools，这两者各有千秋，提供了各自方式的面向对象组织思路。

5.jquery出现

早期的网页开发是由后端主导的，前端能做的也就是操作一下DOM。2006年 John Resig发布了jQuery，jQuery主要用于操作DOM，其优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手，因此很快风靡全球，大量基于jQuery的插件构成了一个庞大的生态系统。

$("*")                //选取所有元素
$("#lastname")        //选取id为lastname的元素
$(".intro")            //选取所有class="intro"的元素
$("p")                //选取所有&lt;p&gt;元素
$(".intro.demo")    //选取所有 class="intro"且class="demo"的元素
复制代码

6.前端变得越来越复杂，工程师开始鼓捣组件化，模块化。

1.浏览器端通常有针对JavaScript的，把某一类的Javascript代码写到单独的js文件中，界面根据需要，引用不同的js文件
2.Common.js
3.RequireJS，它遵循一种称为AMD（Asynchronous Module Definition）的规范。
4.针对 AMD 规范中可以优化的部分，CMD 规范出现了，而 SeaJS 则作为它的具体实现之一，与 AMD 十分相似。
5.ECMAScript6 Module。ECMAScript6 标准增加了 JavaScript 语言层面的模块体系定义，作为浏览器和服务器通用的模块解决方案它可以取代我们之前提到的 AMD ，CMD ,CommonJS。
6.webPack，typeScript等技术的出现。

7.MV*框架的出现---前后端分离

随着Web端功能的日益复杂，人们开始考虑这样一些问题：

如何更好地模块化开发
业务数据如何组织
界面和业务数据之间通过何种方式进行交互

在这种背景下，出现了一些前端MVC、MVP、MVVM框架，目前主流VueJs, ReactJs, AngularJS，另Backbone.js，Ember.js，Spine.js等

8.Node的出现

2009年，Node 项目诞生，它是服务器上的 JavaScript 运行环境。

Node = JavaScript + 操作系统 API

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

JavaScript 成为服务器脚本语言，与 Python 和 Ruby 一样
JavaScript 成为唯一的浏览器和服务器都支持的语言
前端工程师可以编写后端程序了

9.web app的出现

互联网进入了移动时代。web app也随之出现，相比原生应用，Web APP有太多好处：无须开发两套系统版本、无须安装、无须手动升级、无须审核……

fullpage API，Geolocation API、Vibration API、Luminosity API、Orientation API、CameraAPI、各种离线方案……都是对web app的支撑。

web app唯一的缺点就是Web App性能差，也就是这个原因，Native App还能作为主流存在一段时间，可是如果Web App的性能逐渐赶上Native了呢？目前的Hybrid、nw.js、Electron、react native、weex、ionic等都可以看做Web App在性能方面向Native靠近的尝试。更何况半路又杀出个微信小程序。