實例分析京東詳情頁前端開發(fā)

　　簡介
　　詳情頁也叫做單品頁，域名以「item.jd.com/skuid.html」為格式的頁面。是負責(zé)展示京東商品SKU的落地頁面。主要任務(wù)是展示商品相關(guān)信息，如價格、促銷、庫存、推薦，從而引導(dǎo)用戶進入購買流程。同時單品頁有很多版本。一般分為兩類。一類我們通?？吹降摹竿ㄓ妙惸吭斍轫摗埂蓄惸慷伎梢允褂茫活愂遣唤?jīng)?？吹降摹复怪睂傩栽斍轫摗埂恍┯刑厥鈱傩缘纳唐芳?br /> 　　
　　首先，由于詳情頁量大（SKU數(shù)十億）、高并發(fā)（日PV數(shù)十億）等特性，在很長的一段時間里，單品頁都是后端程序生成靜態(tài)頁面使用CDN來解決量大、高并發(fā)的問題。
　　其次。單品頁涉及的「三方」系統(tǒng)特別多，比如促銷、庫存、合約、秒殺、預(yù)售、推薦、IM、店鋪、評價社區(qū)等。而單品頁的主要任務(wù)就是展示這些系統(tǒng)的信息，并且適當?shù)奶幚硭麄冎g的邏輯關(guān)系，而這些系統(tǒng)的接口一般都使用異步Ajax來完成，因為其一CDN無法做到頁面的動態(tài)化，其二一些系統(tǒng)的信息對實時性要求特別高（價格、秒殺），即使使用后端動態(tài)渲染也很難做到無緩存零延遲。
　　基于上面兩個原因，注定了單品頁是一種重多系統(tǒng)業(yè)務(wù)邏輯展示型頁面，重前端頁面。我大概匯總了一下頁面上異步接口，總共約有30個，頁首屏的接口特別重要，接口之間幾乎都有耦合關(guān)系：
　　
　　前端的發(fā)展歷程
　　混沌時期
　　混沌時期的單品頁并沒有前端開發(fā)的概念。核心的功能腳本只有三個：促銷價格（promotion.js）、庫存地區(qū)（iplocation.js）、其它邏輯（pshow.js）。這三個腳本分別是三個不同團隊的同事負責(zé)維護，當時我剛進入京東的時候在UED部門，負責(zé)頁面腳本整體的維護工作和pshow的開發(fā)。那時候我自己維護的pshow.js腳本壓縮后只有80kb，所有的代碼都是過程式的，沒有任何使用模式和代碼技巧，JS最多也只被用來做個判斷渲染DOM。那時候的前端工作內(nèi)容只在UI層面，寫樣式和一些交互腳本。
　　這個階段給我最深刻的感覺是單品頁后端模板很少維護（后端架構(gòu)是最老的aspx版本）。大多數(shù)的改動都要用Java去動態(tài)渲染。因為后端頁面是一個生成器生成的。如果頁面后端模板有改動那么就需要全量的生成一次，過程可能需要幾個小時。
　　初見端倪
　　當我接手這個項目時剛好有一次大改版，就在這時候老大說頁面上的腳本都要放在我們手里維護。然后就是一大波的重構(gòu)、重寫?；旧蟨show被重寫了大概80%其它的因為業(yè)務(wù)邏輯的問題并沒有完全重寫，只是做了些代碼層面的優(yōu)化。
　　有一個模板引擎叫trimPath，知道這個的估計都算老前端了。最早的客戶端Java MVC模式代表作品，只到現(xiàn)在還在使用。這個階段像評價這種完全異步加載的模塊特別適合使用模板引擎來減少維護的工作量。這個時候雖然頁面上的代碼并不都是我們寫的，但基本上前端對頁面的Java有了控制權(quán)，接下來的事情就是尋找機會逐個優(yōu)化。
　　這段時間是最痛苦的時候，維護的工作統(tǒng)一到前端。然后后端幾乎沒有變化，只是在一段時間將后臺的架構(gòu)從aspx過渡到了java。本質(zhì)上并沒有什么改變。前端卻做了比以前更多的事情，也是在這個時候我接手了大量的維護工作（包含全站公共庫的維護）使得我意識到了一些自動化、工程化方面的重要性，后文會主要講解，順便說下，那時候前端自動化工具Grunt剛面世，但是我自己卻用的是apache ant，不過不久就切換到了Grunt來構(gòu)建項目。
　　撥云見日
　　單品頁不僅重系統(tǒng)邏輯，也重維護。在這段時間里一方面有正常的維護類需求要做，一方面自己也不斷的學(xué)習(xí)新知識為以后的改版做鋪墊。不過就在這時單品頁有歷史意義的一次技改出現(xiàn)了——單品頁動態(tài)化技改。關(guān)于后端部分的改造細節(jié)可以去億級商品詳情頁架構(gòu)演進技術(shù)解密了解。
　　總的來說這次的改版后很多數(shù)據(jù)直接從后端讀取，不再從前端異步獲取而且我們也做過一些異步加載的優(yōu)化，多接口combo從統(tǒng)一服務(wù)吐出給前端使用。這時前端就不用再為異步接口的加載時苦腦了，只需要專注系統(tǒng)接口的邏輯。
　　隨著這次技改，前端的代碼也迎來了模塊化的時代。我們把所有的前端代碼都進行了模塊化然后基于SeaJS重寫，配合Nginx concat功能實現(xiàn)了本地模塊化開發(fā)，線上服務(wù)端合并。