一捂掰、何為電商

所謂電商，即電子商務(wù)曾沈，就是指通過使用電子類工具这嚣，圍繞著商品交易進(jìn)行的一系列活動(dòng)。既然是交易塞俱，那就離不開交易的三個(gè)過程姐帚。
交易的第一個(gè)過程，就是商品信息的交換障涯，賣方通過一定的渠道讓商品信息擴(kuò)散出去罐旗，而買方也通過一些方式能夠獲取到這些商品信息。無論是集市上的吆喝唯蝶，還是店鋪門口的廣告尤莺，亦或是當(dāng)今電商網(wǎng)站的網(wǎng)址，做的事本質(zhì)上都是一樣的生棍，就是傳達(dá)交易的信息颤霎。
交易的第二個(gè)過程，就是協(xié)議的達(dá)成涂滴，這個(gè)階段里買賣雙方通過談判來確定商品的質(zhì)量友酱、數(shù)量和價(jià)錢，當(dāng)然最核心的內(nèi)容也還是價(jià)錢柔纵。這個(gè)過程在傳統(tǒng)的交易過程中有可能會(huì)占用一些時(shí)間用來討價(jià)還價(jià)缔杉，但是放在電子商務(wù)里，這個(gè)過程一般都比較短暫搁料，甚至由于明碼標(biāo)價(jià)或详，這個(gè)過程都可以省略系羞。
交易的最后一個(gè)過程，就是我們交易達(dá)成的階段霸琴，我們經(jīng)過上一階段的協(xié)商椒振，如果能夠達(dá)成一個(gè)雙方都認(rèn)同的結(jié)果，那么接下來就是要進(jìn)行交換了梧乘，這里大部分是以錢異物澎迎，當(dāng)然也不排除有以物易物的可能。
我們這篇文章选调，就是要借著電商的發(fā)展過程中夹供，結(jié)合交易的三部曲，來聊一聊相應(yīng)前端技術(shù)都有了哪些發(fā)展仁堪。

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

電商的出現(xiàn)會(huì)比互聯(lián)網(wǎng)來的更早，那個(gè)年代雖然已經(jīng)有了計(jì)算機(jī)弦聂，但對交易過程有更大幫助的卻是出現(xiàn)比較早的電話袁铐、傳真等電子工具。電子商務(wù)這個(gè)事最最核心的東西就是信息的交換横浑，在沒有互聯(lián)網(wǎng)的年代剔桨，計(jì)算機(jī)還沒有傳達(dá)信息的能力，只能用做計(jì)算和存儲(chǔ)數(shù)據(jù)的介質(zhì)徙融。
這個(gè)年代的電子商務(wù)是很有限制的洒缀，第一個(gè)限制來自于通信的成本，當(dāng)時(shí)電話和傳真都很少民用欺冀，費(fèi)用也比較高树绩，所以電子商務(wù)絕大部分是以公對公的形式存在。而第二個(gè)限制來自于通信的方式隐轩，無論電話還是傳真所做的數(shù)據(jù)通信都是1對1的饺饭，這也就意味著如果你想達(dá)成交易，那么就要先找到交易對手职车，當(dāng)時(shí)的電子設(shè)備并不能對尋找交易伙伴有太大的幫助瘫俊。
在這個(gè)沒有互聯(lián)網(wǎng)的時(shí)代，web和瀏覽器都還沒出現(xiàn)悴灵，web前端也就更不會(huì)有了扛芽。

三、刀耕火種的年代

1994年中國被批準(zhǔn)加入互聯(lián)網(wǎng)积瞒，經(jīng)過一年多的研究測試階段川尖，在1995年，中國的互聯(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ù)的市場獲得了一次爆炸性的增長。當(dāng)然這個(gè)時(shí)候的爆炸可能也就是從100人的規(guī)模增長到1萬人規(guī)模的樣子李破，和現(xiàn)在的電商市場規(guī)模還是沒法比的宠哄。
這個(gè)年代最重要的事件是瀏覽器的出現(xiàn)，也標(biāo)志著web開始發(fā)展嗤攻。在電子商務(wù)發(fā)展的前期毛嫉，web技術(shù)也只是停留在信息的展示上。更多的公司的網(wǎng)站妇菱，也只是用來作為商品信息的載體承粤，然后在網(wǎng)站上放上聯(lián)系方式，線下完成交易闯团。這種初級(jí)的電商能夠支持商品交易的第一個(gè)過程辛臊，也就是商品信息的交換，但最終不能在線完成整個(gè)交易過程房交。無法達(dá)成全程電子商務(wù)的原因有兩個(gè)彻舰，一個(gè)是業(yè)務(wù)上的原因，當(dāng)時(shí)的在線交易里存在陌生人間交易的信任問題候味，是先交錢還是先發(fā)貨刃唤，是一個(gè)很容易進(jìn)入死循環(huán)的話題；第二是技術(shù)問題白群，當(dāng)時(shí)的互聯(lián)網(wǎng)技術(shù)有限尚胞，通過ASP、JSP這類模板語言加上簡單的javascript來做一套完整的交易網(wǎng)站帜慢，難度還是比較大的笼裳。
這個(gè)時(shí)代里，也沒有所謂的前端分支粱玲，頁面里簡單的js語言也就是用來做一下表單驗(yàn)證之類的最簡單的事情侍咱，當(dāng)時(shí)的開發(fā)人員也就隨手寫上了。
四密幔、全程電子商務(wù)時(shí)代
在全程電子商務(wù)時(shí)代之前楔脯，因?yàn)樾畔⒌膫鬟_(dá)已經(jīng)沒有問題，當(dāng)時(shí)的物流也發(fā)展了很多年胯甩，所以想要完成電子商務(wù)的整個(gè)流程昧廷，最大的困難就是我們上一章提到的交易的信用問題堪嫂。

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

而隨著交易流程的打通，從技術(shù)角度來說愕乎，電商系統(tǒng)的需求就變得復(fù)雜了阵苇，純靠當(dāng)時(shí)像ASP、JSP這些模板語言寫一個(gè)交易網(wǎng)站感论，程序猿們還是很痛苦的绅项。于是，從這個(gè)時(shí)候開始比肄，在業(yè)務(wù)的壓迫下快耿，技術(shù)也開始進(jìn)入一個(gè)高速發(fā)展期。而我們前端的技術(shù)分支也開始了從無到有芳绩，再到豐富的過程掀亥。
當(dāng)然，我們心里也要有一個(gè)概念妥色，那就是技術(shù)是工具搪花，它始終要為業(yè)務(wù)服務(wù)的。每一種技術(shù)能夠發(fā)展成熟，肯定是它在業(yè)務(wù)的某個(gè)發(fā)展時(shí)期解決了一些比較重要的問題撮竿，這才能讓這種技術(shù)得到認(rèn)可和普及吮便。全程電子商務(wù)時(shí)代才是前端這個(gè)技術(shù)分支發(fā)展的主要時(shí)期，下來我們聊一下這些年電商發(fā)展過程中遇到了什么問題幢踏？伴隨著這些問題的解決髓需，前端技術(shù)又都發(fā)生了什么樣的變化？

4.1 Ajax的應(yīng)用

最先要說的就是Ajax的出現(xiàn)房蝉，在其出現(xiàn)的時(shí)期僚匆，這個(gè)東西絕對是web開發(fā)的一大福音。舉個(gè)例子搭幻，設(shè)想一下如果沒有異步通信的時(shí)候咧擂，我們填寫了一個(gè)有20個(gè)輸入框的表單，又一個(gè)個(gè)檢查了一遍以后粗卜，終于有勇氣點(diǎn)了一下提交按鈕屋确。但是纳击！這時(shí)候返回的是一個(gè)錯(cuò)誤頁面续扔，“對不起，您的名字已存在焕数！”纱昧。這樣我們就又要去重新填那20個(gè)字段了，我們還要祈禱著第二次就都能填正確堡赔。但是ajax出現(xiàn)后识脆，這就大不一樣了，我們可以隨時(shí)在當(dāng)前頁面和后端做一個(gè)驗(yàn)證善已，來保證只要不是后端出了問題灼捂，我們提交過去的值都是合法的。
Ajax這個(gè)名稱是2005年才有的换团，在這之前各家瀏覽器廠商就已經(jīng)各自用自己的方式實(shí)現(xiàn)了異步通訊的機(jī)制悉稠，這也就有了另外一個(gè)問題，兼容性艘包！每個(gè)瀏覽器對Ajax的實(shí)現(xiàn)都不一樣的猛，但每一個(gè)瀏覽器都有一定的市場份額，這就有點(diǎn)難為程序猿了想虎，尤其當(dāng)時(shí)只把js當(dāng)做簡單的腳本語言的開發(fā)人員來說卦尊，一下子多了這么多的瀏覽器要去兼容，簡直是災(zāi)難舌厨！這個(gè)問題的解決是從兩方面來進(jìn)行的岂却，第一個(gè)是在2006年，W3C終于將Ajax納入其標(biāo)準(zhǔn)，這就意味著以后的瀏覽器都要按著統(tǒng)一的方法來實(shí)現(xiàn)Ajax淌友。但標(biāo)準(zhǔn)歸標(biāo)準(zhǔn)煌恢，等標(biāo)準(zhǔn)全部實(shí)現(xiàn)還是需要時(shí)間的尝苇，為了解決當(dāng)下的問題枢贿，就有人或組織封裝了一些兼容各種Ajax實(shí)現(xiàn)的類庫。其中最為有名的就是jQuery举户，它除了Ajax外器联，還抹平了其他例如Dom操作等方法的兼容性問題二汛，一度成為最流行的前端類庫。

4.2 前后端的劃分和分離

Ajax的出現(xiàn)拨拓，也帶來了另外一個(gè)問題肴颊，那就是有了Ajax以后，之前用模板語言實(shí)現(xiàn)起來的功能變得簡單渣磷，之前模板語言實(shí)現(xiàn)不了的功能現(xiàn)在也能實(shí)現(xiàn)了婿着。這樣就造成越來越多的邏輯轉(zhuǎn)移到了javascript上，使其變得越來越復(fù)雜醋界。
隨著js復(fù)雜度的增長竟宋，原來的開發(fā)模式出現(xiàn)了問題，一個(gè)程序猿搞定全站變得越來越不靠譜形纺，因此在這個(gè)時(shí)候就把網(wǎng)站開發(fā)這個(gè)職位劃分成了前端和后端兩個(gè)職位丘侠。但是只劃分了前后端的職責(zé)范圍還是遠(yuǎn)遠(yuǎn)不夠的，我們在原來的開發(fā)模式下逐样，前后端的代碼也在一起的∥献郑現(xiàn)在既然已經(jīng)分為前后端兩波人在開發(fā)了，維護(hù)同一套代碼就變得不那么方便脂新。項(xiàng)目越復(fù)雜挪捕，出現(xiàn)你等我，我等你的情況就會(huì)越來越多争便，這樣就拖慢了整體團(tuán)隊(duì)的節(jié)奏级零。所以為了團(tuán)隊(duì)的效率，前后端的代碼也要做分離始花。
前后端的分離方式分為部分分離和全部分離兩種妄讯，部分分離是只把腳本和樣式分離出去，而html模板還留在后端通過jsp酷宵，velocity或者freemarker來渲染亥贸；另一種就是完全分離，腳本樣式以及模板全都放在前端來維護(hù)浇垦。
部分分離已經(jīng)很大程度上解決了前后端開發(fā)時(shí)的協(xié)調(diào)問題炕置，開發(fā)效率也得到了很大程度的提升。但也得承認(rèn)，這種方式也還是有問題的朴摊。當(dāng)我們要開發(fā)html模板的時(shí)候默垄，就需要搭起一整套后端的開發(fā)環(huán)境，或者是找后端同學(xué)來協(xié)助甚纲。
而完全分離一般有兩種方案口锭，第一種就是使用velocity這種在nodejs和java下都可以編譯的頁面模板，在開發(fā)時(shí)放到前端項(xiàng)目里介杆，但在發(fā)布時(shí)鹃操，會(huì)把模板發(fā)布到后端的模板目錄下，這樣春哨，開發(fā)時(shí)就做到了完全分離荆隘。這種方式最大的好處就是線上模板的渲染還是由java來做的，形成的是帶有動(dòng)態(tài)數(shù)據(jù)的html赴背，比較有利于SEO椰拒。但這種方式下，前端的開發(fā)環(huán)境和發(fā)布系統(tǒng)的復(fù)雜度都相對較高凰荚，單純的前端改動(dòng)也還是要帶著后端一起發(fā)布燃观。
第二種完全分離的方式，就是把純靜態(tài)的html模板完全放在前端浇揩，數(shù)據(jù)全部通過RESTful接口來進(jìn)行交互仪壮。這樣前后端就完全分開了憨颠，脫離了后端的模板胳徽，而這種方式的系統(tǒng)復(fù)雜度也會(huì)比第一種完全分離的方式低。但這種方案下爽彤，所有的頁面數(shù)據(jù)都是用js渲染的养盗，沒有動(dòng)態(tài)模板，不太利于SEO适篙。這個(gè)不足我們可以通過做server render或者給蜘蛛做一套定制頁面來解決往核。

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

隨著業(yè)務(wù)進(jìn)一步的復(fù)雜，我們又開始考慮怎么讓一個(gè)復(fù)雜系統(tǒng)變得可維護(hù)嚷节，這時(shí)候就體現(xiàn)出一個(gè)網(wǎng)站架構(gòu)的作用了聂儒。因?yàn)楹蠖吮惹岸税l(fā)展的要早，分層架構(gòu)這個(gè)概念在后端的發(fā)展過程中就已經(jīng)有了硫痰，我們最常見的就是MVC結(jié)構(gòu)衩婚。這個(gè)時(shí)候前端也發(fā)展到一定的程度上了，也是需要分層架構(gòu)來讓代碼變得更加可維護(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í)說的也都是一個(gè)意思什湘。在前端的分層方式上凳忙，和后端并不太一樣，所以后端的MVC模式并不能完全搬到前端來禽炬。前端的分層設(shè)計(jì)在MVC的基礎(chǔ)上又做了進(jìn)一步的演進(jìn)涧卵，形成了更適合前端的MVV*等方式的分層，來支持前端的邏輯腹尖。

4.4 模塊化來了

分層架構(gòu)有一定的解耦效果柳恐，但是遇到復(fù)雜業(yè)務(wù)，所有的邏輯就分成三大塊顯然也是不夠的热幔，并且基于javascript語言的特性乐设，如果我們沒有對全局變量做管理，變量沖突也是無法避免的绎巨。因此我們就有了模塊化的處理方案近尚。
由于前端的發(fā)展一直處于百花齊放，百家爭鳴的狀態(tài)场勤， 所以在每一種技術(shù)或者方案的發(fā)展過程中基本都會(huì)出現(xiàn)幾個(gè)分支戈锻。我們的模塊化方案也未能免俗。模塊化中比較有代表性的就是AMD和媳、CMD格遭、CommonJS和es6模塊化這幾種方案。
AMD 是 RequireJS 在推廣過程中的規(guī)范化產(chǎn)出留瞳，而CMD 是 SeaJS 在推廣過程中的規(guī)范化產(chǎn)出拒迅，這兩個(gè)模塊化方案有些相似，主要的區(qū)別是加載和運(yùn)行的時(shí)機(jī)不太一樣她倘。這兩種模塊化方案是可以直接在瀏覽器上運(yùn)行的璧微，但也有個(gè)缺點(diǎn)，就是會(huì)將模塊化的代碼和業(yè)務(wù)代碼摻雜在一起硬梁，對于強(qiáng)迫癥的同學(xué)來說前硫，這并不算一個(gè)很好的方案。
而隨著nodejs的發(fā)展靶溜，我們有了對代碼做編譯的能力开瞭。這樣原本不能在瀏覽器上運(yùn)行的模塊化方案懒震，通過編譯處理以后，也能正常在瀏覽器上跑了嗤详。這種模塊化方案最具代表性的就是CommonJs的模塊化方案个扰。由于我們是要編譯的，所以大部分處理模塊化的代碼都可以通過編譯的過程追加進(jìn)去葱色，這樣我們只用關(guān)心業(yè)務(wù)邏輯部分就可以了递宅。當(dāng)然這種方案也不是完美的，這種提前編譯打包的方案會(huì)把所有引用的代碼都打包進(jìn)去苍狰，如果想按需加載就需要再做進(jìn)一步的處理办龄。總體來說淋昭，我還是比較傾向這種模塊化方案俐填。
在模塊化方案中，還有一種被納入標(biāo)準(zhǔn)的ES6模塊化方案翔忽，理論上這種模塊化方案也是可以直接運(yùn)行在瀏覽器上的英融，但對瀏覽器的版本要求比較高。現(xiàn)在也有一種方案歇式，就是通過babel編譯驶悟，把ES6的語法轉(zhuǎn)換成大部分瀏覽器可以兼容的舊版本js的語法。但這樣的話材失，ES6的模塊化相對CommonJs也就沒有多大的優(yōu)勢了痕鳍。

五、下一個(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)昼榛，階梯式上升的過程。
電商的下一個(gè)時(shí)代會(huì)是什么樣剔难，應(yīng)該沒有人能說的清胆屿。但是能看到的像大規(guī)模數(shù)據(jù)的處理、機(jī)器學(xué)習(xí)偶宫、智能化推薦和VR展示這些技術(shù)已經(jīng)在路上了非迹，有的也已經(jīng)有了不錯(cuò)的進(jìn)展。而對于前端來說纯趋，將來也不排除會(huì)在這些領(lǐng)域承擔(dān)下一些責(zé)任憎兽，尤其像VR這種用于展示的技術(shù)還是很有想象空間的冷离。
無論下一個(gè)時(shí)代會(huì)是什么樣，但愿我們始終保持一顆好奇心纯命，能以興趣驅(qū)動(dòng)的方式跟上技術(shù)變革的潮流西剥。