前端技術發展

時間 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靠近的嘗試。更況且半路又殺出個微信小程序。