非框架, 純原生JS “商品詳情跳轉到商品列表,並記錄高度“ 的寫法思路
這裏只講思路,不提供代碼。
寫之前,我要先吐槽一種非常奇葩的寫法。 下面是他的寫法思路(雖不提倡,但可借鑒):
一個商品列表,然後把商品詳情寫在商品列表裏。 這是一個頁面,兩個不一樣的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 “商品詳情跳轉到商品列表,並記錄高度“ 的寫法思路