一、何為電商

所謂電商，即電子商務(wù)，就是指通過(guò)使用電子類(lèi)工具，圍繞著商品交易進(jìn)行的一系列活動(dòng)。既然是交易，那就離不開(kāi)交易的三個(gè)過(guò)程。

交易的第一個(gè)過(guò)程，就是商品信息的交換，賣(mài)方通過(guò)一定的渠道讓商品信息擴(kuò)散出去，而買(mǎi)方也通過(guò)一些方式能夠獲取到這些商品信息。無(wú)論是集市上的吆喝，還是店鋪門(mén)口的廣告，亦或是當(dāng)今電商網(wǎng)站的網(wǎng)址，做的事本質(zhì)上都是一樣的，就是傳達(dá)交易的信息。

交易的第二個(gè)過(guò)程，就是協(xié)議的達(dá)成，這個(gè)階段里買(mǎi)賣(mài)雙方通過(guò)談判來(lái)確定商品的質(zhì)量、數(shù)量和價(jià)錢(qián)，當(dāng)然最核心的內(nèi)容也還是價(jià)錢(qián)。這個(gè)過(guò)程在傳統(tǒng)的交易過(guò)程中有可能會(huì)占用一些時(shí)間用來(lái)討價(jià)還價(jià)，但是放在電子商務(wù)里，這個(gè)過(guò)程一般都比較短暫，甚至由于明碼標(biāo)價(jià)，這個(gè)過(guò)程都可以省略。

交易的最后一個(gè)過(guò)程，就是我們交易達(dá)成的階段，我們經(jīng)過(guò)上一階段的協(xié)商，如果能夠達(dá)成一個(gè)雙方都認(rèn)同的結(jié)果，那么接下來(lái)就是要進(jìn)行交換了，這里大部分是以錢(qián)異物，當(dāng)然也不排除有以物易物的可能。

我們這篇文章，就是要借著電商的發(fā)展過(guò)程中，結(jié)合交易的三部曲，來(lái)聊一聊相應(yīng)前端技術(shù)都有了哪些發(fā)展。

二、互聯(lián)網(wǎng)出現(xiàn)以前

電商的出現(xiàn)會(huì)比互聯(lián)網(wǎng)來(lái)的更早，那個(gè)年代雖然已經(jīng)有了計(jì)算機(jī)，但對(duì)交易過(guò)程有更大幫助的卻是出現(xiàn)比較早的電話、傳真等電子工具。電子商務(wù)這個(gè)事最最核心的東西就是信息的交換，在沒(méi)有互聯(lián)網(wǎng)的年代，計(jì)算機(jī)還沒(méi)有傳達(dá)信息的能力，只能用做計(jì)算和存儲(chǔ)數(shù)據(jù)的介質(zhì)。

這個(gè)年代的電子商務(wù)是很有限制的，第一個(gè)限制來(lái)自于通信的成本，當(dāng)時(shí)電話和傳真都很少民用，費(fèi)用也比較高，所以電子商務(wù)絕大部分是以公對(duì)公的形式存在。而第二個(gè)限制來(lái)自于通信的方式，無(wú)論電話還是傳真所做的數(shù)據(jù)通信都是1對(duì)1的，這也就意味著如果你想達(dá)成交易，那么就要先找到交易對(duì)手，當(dāng)時(shí)的電子設(shè)備并不能對(duì)尋找交易伙伴有太大的幫助。

在這個(gè)沒(méi)有互聯(lián)網(wǎng)的時(shí)代，web和瀏覽器都還沒(méi)出現(xiàn)，web前端也就更不會(huì)有了。

三、刀耕火種的年代

1994年中國(guó)被批準(zhǔn)加入互聯(lián)網(wǎng)，經(jīng)過(guò)一年多的研究測(cè)試階段，在1995年，中國(guó)的互聯(lián)網(wǎng)終于走向了民間，這個(gè)互聯(lián)網(wǎng)發(fā)展中的里程碑，也可以算作是電商發(fā)展中一個(gè)關(guān)鍵的時(shí)間節(jié)點(diǎn)。隨著互聯(lián)網(wǎng)出現(xiàn)的還有電子郵件和瀏覽器，這兩種工具的配合，使得電子商務(wù)變得成本更低，效果更好。同時(shí)也因?yàn)榛ヂ?lián)網(wǎng)的民用，電子商務(wù)的市場(chǎng)獲得了一次爆炸性的增長(zhǎng)。當(dāng)然這個(gè)時(shí)候的爆炸可能也就是從100人的規(guī)模增長(zhǎng)到1萬(wàn)人規(guī)模的樣子，和現(xiàn)在的電商市場(chǎng)規(guī)模還是沒(méi)法比的。

這個(gè)年代最重要的事件是瀏覽器的出現(xiàn)，也標(biāo)志著web開(kāi)始發(fā)展。在電子商務(wù)發(fā)展的前期，web技術(shù)也只是停留在信息的展示上。更多的公司的網(wǎng)站，也只是用來(lái)作為商品信息的載體，然后在網(wǎng)站上放上聯(lián)系方式，線下完成交易。這種初級(jí)的電商能夠支持商品交易的第一個(gè)過(guò)程，也就是商品信息的交換，但最終不能在線完成整個(gè)交易過(guò)程。無(wú)法達(dá)成全程電子商務(wù)的原因有兩個(gè)，一個(gè)是業(yè)務(wù)上的原因，當(dāng)時(shí)的在線交易里存在陌生人間交易的信任問(wèn)題，是先交錢(qián)還是先發(fā)貨，是一個(gè)很容易進(jìn)入死循環(huán)的話題；第二是技術(shù)問(wèn)題，當(dāng)時(shí)的互聯(lián)網(wǎng)技術(shù)有限，通過(guò)ASP、JSP這類(lèi)模板語(yǔ)言加上簡(jiǎn)單的javascript來(lái)做一套完整的交易網(wǎng)站，難度還是比較大的。

這個(gè)時(shí)代里，也沒(méi)有所謂的前端分支，頁(yè)面里簡(jiǎn)單的js語(yǔ)言也就是用來(lái)做一下表單驗(yàn)證之類(lèi)的最簡(jiǎn)單的事情，當(dāng)時(shí)的開(kāi)發(fā)人員也就隨手寫(xiě)上了。

四、全程電子商務(wù)時(shí)代

在全程電子商務(wù)時(shí)代之前，因?yàn)樾畔⒌膫鬟_(dá)已經(jīng)沒(méi)有問(wèn)題，當(dāng)時(shí)的物流也發(fā)展了很多年，所以想要完成電子商務(wù)的整個(gè)流程，最大的困難就是我們上一章提到的交易的信用問(wèn)題。

2003年，阿里巴巴公司發(fā)布了一款可以算是電商發(fā)展過(guò)程中里程碑般的產(chǎn)品——支付寶。這個(gè)產(chǎn)品最大的意義就是解決了陌生人間交易的信用問(wèn)題，支付寶通過(guò)把買(mǎi)家付款和賣(mài)家收款這兩個(gè)事拆分開(kāi)來(lái)，在中間做了一層代理。買(mǎi)家先把錢(qián)支付給支付寶，然后賣(mài)家發(fā)貨，當(dāng)貨物抵達(dá)買(mǎi)家。在這個(gè)交易模型下，用戶僅需要信任支付寶就可以完成交易，當(dāng)然這個(gè)信任也不是一下就建立起來(lái)的，總會(huì)有人擔(dān)心，我把錢(qián)給了支付寶，他們拿錢(qián)跑了怎么辦。但經(jīng)過(guò)一部分敢于信任的人的嘗試，這個(gè)顧慮一點(diǎn)點(diǎn)消失，用戶對(duì)支付寶的信任感也一點(diǎn)點(diǎn)增強(qiáng)。信任問(wèn)題解決以后，整個(gè)電商流程就變得順暢了，這樣電子商務(wù)就進(jìn)入了全程電子商務(wù)時(shí)代，這個(gè)時(shí)代一直持續(xù)到現(xiàn)在。

而隨著交易流程的打通，從技術(shù)角度來(lái)說(shuō)，電商系統(tǒng)的需求就變得復(fù)雜了，純靠當(dāng)時(shí)像ASP、JSP這些模板語(yǔ)言寫(xiě)一個(gè)交易網(wǎng)站，程序猿們還是很痛苦的。于是，從這個(gè)時(shí)候開(kāi)始，在業(yè)務(wù)的壓迫下，技術(shù)也開(kāi)始進(jìn)入一個(gè)高速發(fā)展期。而我們前端的技術(shù)分支也開(kāi)始了從無(wú)到有，再到豐富的過(guò)程。

當(dāng)然，我們心里也要有一個(gè)概念，那就是技術(shù)是工具，它始終要為業(yè)務(wù)服務(wù)的。每一種技術(shù)能夠發(fā)展成熟，肯定是它在業(yè)務(wù)的某個(gè)發(fā)展時(shí)期解決了一些比較重要的問(wèn)題，這才能讓這種技術(shù)得到認(rèn)可和普及。全程電子商務(wù)時(shí)代才是前端這個(gè)技術(shù)分支發(fā)展的主要時(shí)期，下來(lái)我們聊一下這些年電商發(fā)展過(guò)程中遇到了什么問(wèn)題？伴隨著這些問(wèn)題的解決，前端技術(shù)又都發(fā)生了什么樣的變化？

4.1 Ajax的應(yīng)用

最先要說(shuō)的就是Ajax的出現(xiàn)，在其出現(xiàn)的時(shí)期，這個(gè)東西絕對(duì)是web開(kāi)發(fā)的一大福音。舉個(gè)例子，設(shè)想一下如果沒(méi)有異步通信的時(shí)候，我們填寫(xiě)了一個(gè)有20個(gè)輸入框的表單，又一個(gè)個(gè)檢查了一遍以后，終于有勇氣點(diǎn)了一下提交按鈕。但是！這時(shí)候返回的是一個(gè)錯(cuò)誤頁(yè)面，“對(duì)不起，您的名字已存在！”。這樣我們就又要去重新填那20個(gè)字段了，我們還要祈禱著第二次就都能填正確。但是ajax出現(xiàn)后，這就大不一樣了，我們可以隨時(shí)在當(dāng)前頁(yè)面和后端做一個(gè)驗(yàn)證，來(lái)保證只要不是后端出了問(wèn)題，我們提交過(guò)去的值都是合法的。

Ajax這個(gè)名稱(chēng)是2005年才有的，在這之前各家瀏覽器廠商就已經(jīng)各自用自己的方式實(shí)現(xiàn)了異步通訊的機(jī)制，這也就有了另外一個(gè)問(wèn)題，兼容性！每個(gè)瀏覽器對(duì)Ajax的實(shí)現(xiàn)都不一樣，但每一個(gè)瀏覽器都有一定的市場(chǎng)份額，這就有點(diǎn)難為程序猿了，尤其當(dāng)時(shí)只把js當(dāng)做簡(jiǎn)單的腳本語(yǔ)言的開(kāi)發(fā)人員來(lái)說(shuō)，一下子多了這么多的瀏覽器要去兼容，簡(jiǎn)直是災(zāi)難！這個(gè)問(wèn)題的解決是從兩方面來(lái)進(jìn)行的，第一個(gè)是在2006年，W3C終于將Ajax納入其標(biāo)準(zhǔn)，這就意味著以后的瀏覽器都要按著統(tǒng)一的方法來(lái)實(shí)現(xiàn)Ajax。但標(biāo)準(zhǔn)歸標(biāo)準(zhǔn)，等標(biāo)準(zhǔn)全部實(shí)現(xiàn)還是需要時(shí)間的，為了解決當(dāng)下的問(wèn)題，就有人或組織封裝了一些兼容各種Ajax實(shí)現(xiàn)的類(lèi)庫(kù)。其中最為有名的就是jQuery，它除了Ajax外，還抹平了其他例如Dom操作等方法的兼容性問(wèn)題，一度成為最流行的前端類(lèi)庫(kù)。

4.2 前后端的劃分和分離

Ajax的出現(xiàn)，也帶來(lái)了另外一個(gè)問(wèn)題，那就是有了Ajax以后，之前用模板語(yǔ)言實(shí)現(xiàn)起來(lái)的功能變得簡(jiǎn)單，之前模板語(yǔ)言實(shí)現(xiàn)不了的功能現(xiàn)在也能實(shí)現(xiàn)了。這樣就造成越來(lái)越多的邏輯轉(zhuǎn)移到了javascript上，使其變得越來(lái)越復(fù)雜。

隨著js復(fù)雜度的增長(zhǎng)，原來(lái)的開(kāi)發(fā)模式出現(xiàn)了問(wèn)題，一個(gè)程序猿搞定全站變得越來(lái)越不靠譜，因此在這個(gè)時(shí)候就把網(wǎng)站開(kāi)發(fā)這個(gè)職位劃分成了前端和后端兩個(gè)職位。但是只劃分了前后端的職責(zé)范圍還是遠(yuǎn)遠(yuǎn)不夠的，我們?cè)谠瓉?lái)的開(kāi)發(fā)模式下，前后端的代碼也在一起的。現(xiàn)在既然已經(jīng)分為前后端兩波人在開(kāi)發(fā)了，維護(hù)同一套代碼就變得不那么方便。項(xiàng)目越復(fù)雜，出現(xiàn)你等我，我等你的情況就會(huì)越來(lái)越多，這樣就拖慢了整體團(tuán)隊(duì)的節(jié)奏。所以為了團(tuán)隊(duì)的效率，前后端的代碼也要做分離。

前后端的分離方式分為部分分離和全部分離兩種，部分分離是只把腳本和樣式分離出去，而html模板還留在后端通過(guò)jsp，velocity或者freemarker來(lái)渲染；另一種就是完全分離，腳本樣式以及模板全都放在前端來(lái)維護(hù)。

部分分離已經(jīng)很大程度上解決了前后端開(kāi)發(fā)時(shí)的協(xié)調(diào)問(wèn)題，開(kāi)發(fā)效率也得到了很大程度的提升。但也得承認(rèn)，這種方式也還是有問(wèn)題的。當(dāng)我們要開(kāi)發(fā)html模板的時(shí)候，就需要搭起一整套后端的開(kāi)發(fā)環(huán)境，或者是找后端同學(xué)來(lái)協(xié)助。

而完全分離一般有兩種方案，第一種就是使用velocity這種在nodejs和java下都可以編譯的頁(yè)面模板，在開(kāi)發(fā)時(shí)放到前端項(xiàng)目里，但在發(fā)布時(shí)，會(huì)把模板發(fā)布到后端的模板目錄下，這樣，開(kāi)發(fā)時(shí)就做到了完全分離。這種方式最大的好處就是線上模板的渲染還是由java來(lái)做的，形成的是帶有動(dòng)態(tài)數(shù)據(jù)的html，比較有利于SEO。但這種方式下，前端的開(kāi)發(fā)環(huán)境和發(fā)布系統(tǒng)的復(fù)雜度都相對(duì)較高，單純的前端改動(dòng)也還是要帶著后端一起發(fā)布。

第二種完全分離的方式，就是把純靜態(tài)的html模板完全放在前端，數(shù)據(jù)全部通過(guò)RESTful接口來(lái)進(jìn)行交互。這樣前后端就完全分開(kāi)了，脫離了后端的模板，而這種方式的系統(tǒng)復(fù)雜度也會(huì)比第一種完全分離的方式低。但這種方案下，所有的頁(yè)面數(shù)據(jù)都是用js渲染的，沒(méi)有動(dòng)態(tài)模板，不太利于SEO。這個(gè)不足我們可以通過(guò)做server render或者給蜘蛛做一套定制頁(yè)面來(lái)解決。

4.3 分層架構(gòu)的出現(xiàn)

隨著業(yè)務(wù)進(jìn)一步的復(fù)雜，我們又開(kāi)始考慮怎么讓一個(gè)復(fù)雜系統(tǒng)變得可維護(hù)，這時(shí)候就體現(xiàn)出一個(gè)網(wǎng)站架構(gòu)的作用了。因?yàn)楹蠖吮惹岸税l(fā)展的要早，分層架構(gòu)這個(gè)概念在后端的發(fā)展過(guò)程中就已經(jīng)有了，我們最常見(jiàn)的就是MVC結(jié)構(gòu)。這個(gè)時(shí)候前端也發(fā)展到一定的程度上了，也是需要分層架構(gòu)來(lái)讓代碼變得更加可維護(hù)。

分層設(shè)計(jì)最大的意義就是解耦，如果我們的系統(tǒng)中的各層之間是松散耦合的，當(dāng)我們要改變其中一個(gè)層級(jí)的時(shí)候，只要保證該層級(jí)的接口不變即可，里面的實(shí)現(xiàn)方式可以隨意變動(dòng)。其他經(jīng)常提到的優(yōu)點(diǎn)，比如易維護(hù)、易復(fù)用、易擴(kuò)展，其實(shí)說(shuō)的也都是一個(gè)意思。在前端的分層方式上，和后端并不太一樣，所以后端的MVC模式并不能完全搬到前端來(lái)。前端的分層設(shè)計(jì)在MVC的基礎(chǔ)上又做了進(jìn)一步的演進(jìn)，形成了更適合前端的MVV*等方式的分層，來(lái)支持前端的邏輯。

4.4 模塊化來(lái)了

分層架構(gòu)有一定的解耦效果，但是遇到復(fù)雜業(yè)務(wù)，所有的邏輯就分成三大塊顯然也是不夠的，并且基于javascript語(yǔ)言的特性，如果我們沒(méi)有對(duì)全局變量做管理，變量沖突也是無(wú)法避免的。因此我們就有了模塊化的處理方案。

由于前端的發(fā)展一直處于百花齊放，百家爭(zhēng)鳴的狀態(tài)， 所以在每一種技術(shù)或者方案的發(fā)展過(guò)程中基本都會(huì)出現(xiàn)幾個(gè)分支。我們的模塊化方案也未能免俗。模塊化中比較有代表性的就是AMD、CMD、CommonJS和es6模塊化這幾種方案。

AMD 是 RequireJS 在推廣過(guò)程中的規(guī)范化產(chǎn)出，而CMD 是 SeaJS 在推廣過(guò)程中的規(guī)范化產(chǎn)出，這兩個(gè)模塊化方案有些相似，主要的區(qū)別是加載和運(yùn)行的時(shí)機(jī)不太一樣。這兩種模塊化方案是可以直接在瀏覽器上運(yùn)行的，但也有個(gè)缺點(diǎn)，就是會(huì)將模塊化的代碼和業(yè)務(wù)代碼摻雜在一起，對(duì)于強(qiáng)迫癥的同學(xué)來(lái)說(shuō)，這并不算一個(gè)很好的方案。

而隨著nodejs的發(fā)展，我們有了對(duì)代碼做編譯的能力。這樣原本不能在瀏覽器上運(yùn)行的模塊化方案，通過(guò)編譯處理以后，也能正常在瀏覽器上跑了。這種模塊化方案最具代表性的就是CommonJs的模塊化方案。由于我們是要編譯的，所以大部分處理模塊化的代碼都可以通過(guò)編譯的過(guò)程追加進(jìn)去，這樣我們只用關(guān)心業(yè)務(wù)邏輯部分就可以了。當(dāng)然這種方案也不是完美的，這種提前編譯打包的方案會(huì)把所有引用的代碼都打包進(jìn)去，如果想按需加載就需要再做進(jìn)一步的處理?？傮w來(lái)說(shuō)，我還是比較傾向這種模塊化方案。

在模塊化方案中，還有一種被納入標(biāo)準(zhǔn)的ES6模塊化方案，理論上這種模塊化方案也是可以直接運(yùn)行在瀏覽器上的，但對(duì)瀏覽器的版本要求比較高?，F(xiàn)在也有一種方案，就是通過(guò)babel編譯，把ES6的語(yǔ)法轉(zhuǎn)換成大部分瀏覽器可以兼容的舊版本js的語(yǔ)法。但這樣的話，ES6的模塊化相對(duì)CommonJs也就沒(méi)有多大的優(yōu)勢(shì)了。

五、下一個(gè)時(shí)代

互聯(lián)網(wǎng)行業(yè)的發(fā)展總是會(huì)受到技術(shù)的限制，有很多想做的事可能因?yàn)榧夹g(shù)原因不能做。但另一方面，業(yè)務(wù)也總是在促進(jìn)技術(shù)的發(fā)展，如果一個(gè)事的價(jià)值非常大，那么技術(shù)通常會(huì)進(jìn)化到可以搞定它的狀態(tài)。業(yè)務(wù)和技術(shù)的就是這樣一個(gè)互相促進(jìn)，階梯式上升的過(guò)程。

電商的下一個(gè)時(shí)代會(huì)是什么樣，應(yīng)該沒(méi)有人能說(shuō)的清。但是能看到的像大規(guī)模數(shù)據(jù)的處理、機(jī)器學(xué)習(xí)、智能化推薦和VR展示這些技術(shù)已經(jīng)在路上了，有的也已經(jīng)有了不錯(cuò)的進(jìn)展。而對(duì)于前端來(lái)說(shuō)，將來(lái)也不排除會(huì)在這些領(lǐng)域承擔(dān)下一些責(zé)任，尤其像VR這種用于展示的技術(shù)還是很有想象空間的。

無(wú)論下一個(gè)時(shí)代會(huì)是什么樣，但愿我們始終保持一顆好奇心，能以興趣驅(qū)動(dòng)的方式跟上技術(shù)變革的潮流。