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

普通下載普通下載

相關(guān)電子資料下載

• Web前端開發(fā)需要學(xué)的有什么？ 73
• 前端開發(fā)之函數(shù)式編程實(shí)踐 162
• Web前端開發(fā)必常用的9個(gè)開源框架 1960
• 重新構(gòu)想前端開發(fā)！Kotlin推出新功能 1399
• 新手建站方法介紹：無需購買服務(wù)器快速部署靜態(tài)網(wǎng)頁 382
• 七個(gè)可提高前端開發(fā)效率的工具及插件 1662
• 3·8女神節(jié)，走近這幾位又美又颯的程序媛 1343
• 開關(guān)電源的前端開發(fā)防浪涌電路該怎樣設(shè)計(jì)方案 1544
• 6個(gè)高效的前端開發(fā)工具 3619
• 盤點(diǎn)總結(jié)微前端開發(fā)常見問題和誤區(qū) 2048