前端進化史

時間 2019-11-19

標籤前端進化简体版

原文原文鏈接

忽然好奇前端的歷史由來。記錄下來。javascript

這是一個衆所周知的故事。說來可笑：現在奠基前端基石的javascript這門語言剛開始被開發出來時僅僅是爲了處理之前有服務器端語言負責的一些輸入驗證操做。次年，Netscape公司就發佈了瀏覽器端語言javascript,而且向ecma國際提交了將該javascript做爲工業化標準的申請，逐漸的便有了ECMAScript這個標準。ECMA-262的第三版在1999年12月發佈。在2009年1月，旨在爲javascript離開瀏覽器端開發而創建的一套共同的標準庫而成立的項目CommonJs產生，並且目前是做爲最好的後端編程語言之一。css

前端開發技術，從狹義看就是圍繞HTML，css，javascript的這樣一套體系的開發技術。它的運行宿主是瀏覽器。從前端技術的發展來看：大體分爲如下幾個階段：html

一.刀耕火種前端

最先的了web界面主要是用來瀏覽的，主要以html爲主，最多加點javascript腳本填寫表單而且提交。這個時候的css也用的比較少。java

幾個例子：web

<html>
    <head>
        <title>測試二</title>
    </head>
    <body>
        <input id="firstNameInput" type="text" /> 
        <input id="lastNameInput" type="text" /> 
        <input type="button" onclick="greet()" />
        <script language="JavaScript">
        function greet() {
            var firstName = document.getElementById("firstNameInput").value;
            var lastName = document.getElementById("lastNameInput").value;
            alert("Hello, " + firstName + "." + lastName);
        }
        </script> 
    </body>
</html>

可是因爲靜態頁面不能實現保存數據等功能，出現了不少服務端技術，早起的有CGI，ASP，JSP，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>

　　在這個階段，因爲客戶端和服務端的職責未做明確的劃分，好比生成一個字符串，能夠由前端的JavaScript作，也能夠由服務端語言作，因此一般在一個界面裏，會有兩種語言混雜在一塊兒，用<%和%>標記的部分會在服務端執行，輸出結果，甚至常常有把數據庫鏈接的代碼跟頁面代碼混雜在一塊兒的狀況，給維護帶來較大的不便。編程

<html>
    <body>
        <p>Hello world!</p>
        <p>
        <%
            response.write("Hello world from server!")
        %>
        </p>
    </body>
</html>

　　組件化的萌芽：後端

這個時代，也逐漸出現了組件化的萌芽。比較常見的有服務端的組件化，好比把某一類服務端功能單獨作成片斷，而後其餘須要的地方來include進來，典型的有：ASP裏面數據庫鏈接的地方，把數據源鏈接的部分寫成conn.asp，而後其餘每一個須要操做數據庫的asp文件包含它。數組

上面所說的是在服務端作的，瀏覽器端一般有針對JavaScript的，把某一類的Javascript代碼寫到單獨的js文件中，界面根據須要，引用不一樣的js文件。針對界面的組件方式，一般利用frameset和iframe這兩個標籤。某一大塊有獨立功能的界面寫到一個html文件，而後在主界面裏面把它看成一個frame來載入，通常的B/S系統集成菜單的方式都是這樣的。

此外，還出現了一些基於特定瀏覽器的客戶端組件技術，好比IE瀏覽器的HTC（HTML Component）。這種技術最初是爲了對已有的經常使用元素附加行爲的，後來有些場合也用它來實現控件。微軟ASP.net的一些版本里，使用這種技術提供了樹形列表，日曆，選項卡等功能。HTC的優勢是容許用戶自行擴展HTML標籤，能夠在本身的命名空間裏定義元素，而後，使用HTML，JavaScript和CSS來實現它的佈局、行爲和觀感。這種技術由於是微軟的私有技術，因此逐漸變得不那麼流行。

Firefox瀏覽器裏面推出過一種叫XUL的技術，也沒有流行起來。

二.鐵器時代

這個時代典型特徵就是Ajax的出現。

1.Ajax

AJAX實際上是一系列已有技術的組合，早在這個名詞出現以前，這些技術的使用就已經比較普遍了，GMail由於恰當地應用了這些技術，得到了很好的用戶體驗。

因爲Ajax的出現，規模更大，效果更好的Web程序逐漸出現，在這些程序中，JavaScript代碼的數量迅速增長。出於代碼組織的須要，「JavaScript框架」這個概念逐步造成，當時的主流是prototype和mootools，這二者各有千秋，提供了各自方式的面向對象組織思路。

2.javascript基礎庫

Prototype框架主要是爲JavaScript代碼提供了一種組織方式，對一些原生的JavaScript類型提供了一些擴展，好比數組、字符串，又額外提供了一些實用的數據結構，如：枚舉，Hash等，除此以外，還對dom操做，事件，表單和Ajax作了一些封裝。

Mootools框架的思路跟Prototype很接近，它對JavaScript類型擴展的方式別具一格，因此在這類框架中，常常被稱做「最優雅的」對象擴展體系。

從這兩個框架的所提供的功能來看，它們的定位是核心庫，在使用的時候通常須要配合一些外圍的庫來完成。

jQuery與這二者有所不一樣，它着眼於簡化DOM相關的代碼。例如：

DOM的選擇

jQuery提供了一系列選擇器用於選取界面元素，在其餘一些框架中也有相似功能，可是通常沒有它的簡潔、強大。

$("*")                //選取全部元素
$("#lastname")        //選取id爲lastname的元素
$(".intro")            //選取全部class="intro"的元素
$("p")                //選取全部<p>元素
$(".intro.demo")    //選取全部 class="intro"且class="demo"的元素

鏈式表達式：
在jQuery中，可使用鏈式表達式來連續操做dom，好比下面這個例子：

若是不使用鏈式表達式，可能咱們須要這麼寫：

var neat = $("p.neat");
neat.addClass("ohmy");
neat.show("slow");
//有了鏈式表達式，就能夠這樣一行代碼完成；
$("p.neat").addClass("ohmy").show("slow");

　　除此以外，jQuery還提供了一些動畫方面的特效代碼，也有大量的外圍庫，好比jQuery UI這樣的控件庫，jQuery mobile這樣的移動開發庫等等。

3.模塊代碼加載方式：

以上這些框架提供了代碼的組織能力，可是未能提供代碼的動態加載能力。動態加載JavaScript爲何重要呢？由於隨着Ajax的普及，jQuery等輔助庫的出現，Web上能夠作很複雜的功能，所以，單頁面應用程序（SPA，Single Page Application）也逐漸多了起來。單個的界面想要作不少功能，須要寫的代碼是會比較多的，可是，並不是全部的功能都須要在界面加載的時候就所有引入，若是可以在須要的時候才加載那些代碼，就把加載的壓力分擔了，在這個背景下，出現了一些用於動態加載JavaScript的框架，也出現了一些定義這類可被動態加載代碼的規範。

在這些框架裏，知名度比較高的是RequireJS，它遵循一種稱爲AMD（Asynchronous Module Definition）的規範。

好比下面這段，定義了一個動態的匿名模塊，它依賴math模塊：

define(["math"], function(math) {
    return {
        addTen : function(x) {
            return math.add(x, 10);
        }
    };
});

　　假設上面的代碼存放於adder.js中，當須要使用這個模塊的時候，經過以下代碼來引入adder：

<script src="require.js"></script>
<script>
    require(["adder"], function(adder) {
        //使用這個adder
    }); 
</script>

　　三.工業革命

這個時期，隨着Web端功能的日益複雜，人們開始考慮這樣一些問題：

1.如何更好的模塊化開發；

2.業務數據如何組織；

3.界面和業務數據之間經過何種方式進行交互。

在這種背景下，出現了一些前端MVC、MVP、MVVM框架，咱們把這些框架統稱爲MV*框架。這些框架的出現，都是爲了解決上面這些問題，具體的實現思路各有不一樣，主流的有Backbone，AngularJS，Ember，Spine等等，下篇主要選用Backbone和AngularJS來說述一些相關場景。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。