《前端们,贺老 Live 面试你了!》所引发的思考与实践
2016-12-02 20:28
260 查看
贺老在知乎live中提到了一个这样的问题:
产品经理提出了一个需求:用户点击文章阅读,返回之后阅读其他文章。当用户看得多了,容易点到自己看过的文章,造成时间浪费。所以想给点击过的文章加一个标记,如:《新闻一二三》-(已读)。问:如何实现
我想这问题简单啊,直接遍历给每个a标签添加click事件,点击后改变a标签内的文字。然后在微信群里就有人说:visited,我去,这个更好点,刚开始竟然没想到。
事实上,很多人入坑了,是我(们)有点naive。。。(大家可以自行尝试:visited是否可以实现= =)
贺老不断强调有思路很好,但是要写出来。不一会就有人说:visited实现不了,浏览器没反应,根本不渲染,然而我发现我的方法同样不能实现,这个时候贺老说:为什么不能实现,于是听众纷纷去谷歌。问题找到了:
原因由于浏览器的隐私保护,:visited只能改变访问过元素的
真是眼界大开啊,之前从未遇到过这样的问题。贺老继续问道,问题出现之后不能抛下不管,那么应该如何解决呢?
live中有人提到了一些 css奇淫技巧,用localStorage存取点击链接的索引,交给后端解决等。
css奇淫技巧是提前设置好a标签元素的内容,让“已阅读”文字颜色与背景色一致,点击后更改“已阅读”文字颜色,确实很棒,但是也有缺点,全选之后就全露馅了。。
与由于我不是很熟悉后端这边具体的解决思路,于是决定使用localStorage存取点击过的连接来实现,那么接下来就是实践部分:
如果不太熟悉localStorage,首先请阅读:《localStorage和sessionStorage的区别》:http://www.cnblogs.com/diligenceday/p/4073136.html
下面是代码,css就不贴了
html:
js:
运行效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201612/999483d35f32cd6bec2bb0c7470136d2.png)
大概思路:每个a标签被点击》设置localStorage{“index”,“已读”}》window监听load事件》如果localStorage存在一个索引相对的“已读”》设置a数组中该索引的a元素的innerHTML=“已读”
文章中如果出现错误,请果断评论指出,谢谢
文章为原创,转载请注明出处
产品经理提出了一个需求:用户点击文章阅读,返回之后阅读其他文章。当用户看得多了,容易点到自己看过的文章,造成时间浪费。所以想给点击过的文章加一个标记,如:《新闻一二三》-(已读)。问:如何实现
我想这问题简单啊,直接遍历给每个a标签添加click事件,点击后改变a标签内的文字。然后在微信群里就有人说:visited,我去,这个更好点,刚开始竟然没想到。
事实上,很多人入坑了,是我(们)有点naive。。。(大家可以自行尝试:visited是否可以实现= =)
贺老不断强调有思路很好,但是要写出来。不一会就有人说:visited实现不了,浏览器没反应,根本不渲染,然而我发现我的方法同样不能实现,这个时候贺老说:为什么不能实现,于是听众纷纷去谷歌。问题找到了:
“Privacy and the :visited selector”
详细内容请访问:https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector原因由于浏览器的隐私保护,:visited只能改变访问过元素的
color
background-color
border-color
outline-color
真是眼界大开啊,之前从未遇到过这样的问题。贺老继续问道,问题出现之后不能抛下不管,那么应该如何解决呢?
live中有人提到了一些 css奇淫技巧,用localStorage存取点击链接的索引,交给后端解决等。
css奇淫技巧是提前设置好a标签元素的内容,让“已阅读”文字颜色与背景色一致,点击后更改“已阅读”文字颜色,确实很棒,但是也有缺点,全选之后就全露馅了。。
与由于我不是很熟悉后端这边具体的解决思路,于是决定使用localStorage存取点击过的连接来实现,那么接下来就是实践部分:
如果不太熟悉localStorage,首先请阅读:《localStorage和sessionStorage的区别》:http://www.cnblogs.com/diligenceday/p/4073136.html
下面是代码,css就不贴了
html:
<a href="http://www.baidu.com" >百度123</a> <a href="http://www.baidu.com" >百度222</a> <a href="http://www.baidu.com" >333</a> <a href="http://www.baidu.com" >444</a> <a href="http://www.baidu.com" >555</a> <a href="http://www.baidu.com">666</a> <a href="http://www.baidu.com">777</a> <a href="#dsad">888</a>
js:
1 var a = Array.from(document.querySelectorAll("a"));//类数组对象转换为数组对象 2 3 a.forEach(function(e,index){ 4 e.addEventListener("click",function(){ 5 if(window.localStorage){ //判断浏览器是否可以使用localStorage 6 if(!localStorage.getItem(index)) //防止重复设置 7 { 8 localStorage.setItem(index,"(====已读)"); 9 } 10 } 11 else{ 12 alert("浏览器不支持localStorage") 13 } 14 }); 15 }) 16 window.addEventListener("load",function(){ 17 var localS=Array.from(localStorage); 18 localS.forEach(function(e,index){ //当页面重载,查询localStorage是否存在, 19 20 if (localS[index]) { 21 a[index].innerHTML+=localS[index]; //改变每个被点击过的元素的innerHTML 22 } 23 24 }) 25 })
运行效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201612/999483d35f32cd6bec2bb0c7470136d2.png)
大概思路:每个a标签被点击》设置localStorage{“index”,“已读”}》window监听load事件》如果localStorage存在一个索引相对的“已读”》设置a数组中该索引的a元素的innerHTML=“已读”
文章中如果出现错误,请果断评论指出,谢谢
文章为原创,转载请注明出处
相关文章推荐
- jq基础笔记
- 剑指offer——面试题28:字符串的排列
- 初级Java程序员 - 自我总结
- 剑指offer——面试题27:二叉搜索树与双向链表
- 【Todo】Java类面试题分析
- 剑指offer——面试题26:复杂链表的复制
- 【Todo】找出共同好友 & Spark & Hadoop面试题
- 初级程序员 - List.contains()的问题
- 剑指offer——面试题25:二叉树中和为某一值的路径
- 程序员的几个阶段-转
- 让程序员跳槽的非钱原因-转
- 当面试官问“你有什么问题想问的?”,怎么破比较好?!(转)
- 面试题--String s=new String("xyz"); 创建了几个对象
- 程序员装X指南(转载)
- 一道看似简单的面试题
- 一道面试题:怎么比较两个集合是否相等?(转)
- 简单面试题--值传递还是引用传递
- 一道SQL面试题(行列互换)
- 优秀程序员的性格--why (转)
- 什么是码农