非框架， 纯原生JS “商品详情跳转到商品列表，并记录高度“ 的写法思路
Posted huoan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了非框架， 纯原生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 “商品详情跳转到商品列表，并记录高度“ 的写法思路的主要内容，如果未能解决你的问题，请参考以下文章