前端技术发展

时间 2019-11-24

原文原文链接

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

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

1.静态页面

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

<!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。java

<!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功能提交数据了，好比：react

<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>
复制代码

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

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

4.Ajax出现

ajax是Asynchronous javascript and XML的缩写，此后前端再也不是后端的模板，能够独立获得各类数据。程序员

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

5.jquery出现

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

$("*")                //选取全部元素
$("#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靠近的尝试。更况且半路又杀出个微信小程序。

10.webGL-three.js

three.js是使用默认的WebGL渲染器建立一个易于使用，轻量级的3D库。该库还在示例中提供了Canvas 2D，SVG和CSS3D渲染器。使得前端对图形学也占有一席之地。

前端技术可谓无所不能，前端技术还在不断的发展中，你去搜索下会发现，前端对AI、人工智能、神经网络等技术也有所涉猎。

代码是一种逻辑思想，看待问题解决问题的抽象，不一样程序员有不一样的世界观，创造出不一样的编程语言，本质是数学，函数。因此语言之间是互通的，只是语法规则不同，有不用的使用场景。

但愿有一天编程语言能大统一，在一种指导思想下，有多个分支，解决不一样的应用场景。