這裏只講思路，不提供代碼。

寫之前，我要先吐槽一種非常奇葩的寫法。 下面是他的寫法思路（雖不提倡，但可借鑒）：

一個商品列表，然後把商品詳情寫在商品列表裏。    這是一個頁面，兩個不一樣的div標簽，一個div標簽是商品類表，另一個div標簽是商品詳情   

從商品列表跳轉到商品詳情的操作是： 

　　請求商品詳情接口，請求到後賦值（在jq項目裏特地引了個vue來雙向綁定），

　　把當前頁面的高度記錄下來（$document.scrollTop()獲取高度），

　　然後把商品列表div標簽隱藏掉，然後再顯示商品詳情div標簽。

從商品詳情回退到商品列表的操作是：

　　點擊商品詳情頁面裏回退按鈕 ，觸發toIndex方法，

　　toIndex方法主要寫的是

　　隱藏商品詳情div標簽，顯示商品列表div標簽，並用$("html,body").scrollTop(剛記錄的高度)   回退到剛剛的位置

評價：

　　這是對公司有仇的人才會這麽寫，完全不考慮以後的擴展。

　　當項目有七八個不同類型的商品列表頁時，這種寫法簡直就是災難；因為每次改商品詳情，你要改七八個一模一樣的代碼，特別是每種詳情頁的邏輯還有點不一樣。

　　說白了，就是百分之95的代碼是一樣的，但有那麽百分之5是不一樣的，導致不能復制粘貼什麽的，你要全心全意去看七八遍近乎一樣的代碼，才能改。

　　在我眼裏，這思路爛到了極致，請允許我這麽去評擊。（當你維護了一年多這樣惡心的代碼，這不讓改，那不讓優化後，反而還要加東西，你也會大呼這以前是哪個智障寫的。）

　　優化，需要3天，沒有明確的需求文檔（產品也不知道這裏的需求是什麽），只能在以前的代碼裏尋找邏輯，然後整理歸納，可能會出現問題（出問題很正常。除非，這裏面所有的邏輯，一一列在文檔上，開發照著文檔重構。）。

　　不優化，只改新的需求，可能半天或者一天，還不容易出錯；但混亂不統一，這是一直存在的問題（這居然是被允許的，以前的錯誤，也是被允許的，除非用戶提意見反饋）。

　　領導關心的是結果，你關心的是技術。

　　然後胳膊擰不過大腿。 在你改七八遍近乎一模一樣的代碼時，你的技術能力已經在被廢的邊緣了。

優點：

　　簡單粗暴。

　　產品說要某個頁面跳轉到商品詳情頁，可以驕傲的回一句：對不起，這功能實現不了，我們沒有商品詳情頁，然後不用做了。

　　商品列表一多後，代碼變得極度混亂，後來人難以接手或者後來人看不起這種寫法，保證了自己的前端工作（你這新來的，不行啊。）

　　商品詳情頁，回退到列表，秒回退（回退速度最快，因為是同一個頁面。）。

缺點：

　　以後擴展功能，只能承認自己技術菜，這實現不了，那實現不了，因為我們沒有商品詳情頁。

　　沒有瀏覽器回退功能。

　　代碼冗余程度：每多一個列表頁面，就多上100%。

　　刷新商品詳情頁後是商品列表頁

這種代碼，維護的我都成了怨婦，就知道抱怨和吐槽了。

上面的寫法，是我的一種發泄吧。你若不爽，我也不改。

如果當初...沒有如果，也沒有當初。

言歸正傳，我們來講其他三種不一樣的寫法吧。（我目前已知的有三種）

一、獨立一個商品詳情頁，商品列表頁跳轉時需緩存數據和高度。（大多數公司正常的寫法，常規寫法）

商品詳情頁和商品列表頁是獨立的兩個頁面。


商品列表頁到商品詳情頁的操作：   

　　記錄當前列表的高度，並緩存，緩存當前列表的列表數據，緩存到sessionStorage（你也可以根據情況緩存到localStorage，cookie） 然後，location.href 跳轉到商品詳情頁。

商品詳情頁回退到商品列表頁的操作：   

　　商品詳情頁，直接是瀏覽器回退，沒其他操作。

　　商品列表頁，先通過document.referrer判斷來源是不是商品詳情頁，  如果是，則從緩存裏取出列表數據和列表高度。  如果不是，則重新請求接口獲取數據。

優點：

　　1、商品詳情頁只做商品詳情頁的事（商品詳情頁的邏輯統一處理）。

　　2、刷新商品詳情頁後，回退到列表頁，也記錄列表數據和位置。（不知道算缺點還算優點， 可以特殊問題到時候特殊處理。）

缺點：

　　1、回退到列表頁的時候，部分瀏覽器 ，會有那麽一瞬間，先到頂部再到剛剛瀏覽的高度。

　　2、如果有個需求是商品詳情頁跳轉到商品列表頁的需求，則會跟我們這裏的邏輯有沖突。（特殊邏輯到時候特殊處理。）

二、利用template.js模板引擎寫一個商品詳情頁，掛在列表上。 （從上面那種奇葩式寫法得到的啟發，因為速度最快。 也是我的一種備用方案，真正方案是後面第三種思路。）

template.js模板引擎。寫個商品詳情的模板。

商品列表引入      template.js、商品詳情js模板、商品詳情js邏輯、商品詳情css

商品列表頁到商品詳情頁的操作：

　　把當前頁面的高度記錄下來（$document.scrollTop()獲取高度），

　　　請求商品詳情接口，請求到後 渲染商品詳情模板，然後插入到商品詳情的div內。

　　　顯示商品詳情div標簽，隱藏商品列表div標簽 　　

　商品詳情頁到商品列表頁的操作：

　　點擊商品詳情頁面裏回退按鈕 ，觸發toIndex方法，

　　toIndex方法主要寫的是

　　隱藏商品詳情div標簽並清空商品詳情div標簽內的內容，顯示商品列表div標簽，並用$("html,body").scrollTop(剛記錄的高度)   回退到剛剛的位置

優點：

　　商品詳情模板只做商品詳情頁的事（商品詳情的邏輯統一處理）。

缺點：

　　1、沒有商品詳情頁。

　　2、沒有瀏覽器回退功能。

　　3、刷新商品詳情頁後是商品列表頁。

三、在第二種的方法上，加上瀏覽器攔截，擴展一個商品詳情頁。

第二種方法

1、沒有商品詳情頁。  

　　我們就加一個商品詳情頁的頁面，直接引入template.js、商品詳情js模板、商品詳情js邏輯、商品詳情css。   然後根據url裏的參數去請求商品詳情接口。

2、沒有瀏覽器回退功能。

　　利用window的popstate事件，     來攔截瀏覽器回退和跳轉，  攔截到後，使其執行自己的toindex方法。

3、刷新商品詳情頁後是商品列表頁。

　　利用history的pushState和replaceState方法      來添加或更改  瀏覽器url地址。

商品列表頁到商品詳情頁的操作：

　　把當前頁面的高度記錄下來（$document.scrollTop()獲取高度），

　　　請求商品詳情接口，請求到後 渲染商品詳情模板，然後插入到商品詳情的div內。

　　　顯示商品詳情div標簽，隱藏商品列表div標簽， 用pushState改成真正的商品詳情地址，不跳轉（假跳轉），添加history瀏覽記錄

商品詳情頁到商品列表頁的操作：

　　點擊商品詳情頁面裏回退按鈕   或者  使用瀏覽器回退功能（會被攔截的）。       觸發toIndex方法，  

　　toIndex方法主要寫的是

　　隱藏商品詳情div標簽並清空商品詳情div標簽內的內容，顯示商品列表div標簽，並用$("html,body").scrollTop(剛記錄的高度)   回退到剛剛的位置


商品詳情頁到商品詳情頁的操作：

　　　請求商品詳情接口，請求到後 渲染商品詳情模板，然後插入到商品詳情的div內。

　　　顯示商品詳情div標簽，隱藏商品列表div標簽， 用replaceState替換真正的商品詳情地址，不跳轉（假跳轉），不添加history瀏覽記錄

優點：

　　1、商品詳情模板只做商品詳情頁的事（商品詳情的邏輯統一處理）。

　　2、有商品詳情頁，商品詳情頁獨立一個頁面。

　　3、實現瀏覽器回退功能。

缺點：

　　1、商品詳情頁刷新後，回退到列表頁，不記錄位置。（這算個缺點）

非框架， 純原生JS “商品詳情跳轉到商品列表，並記錄高度“ 的寫法思路