《前端们,贺老 Live 面试你了!》所引发的思考与实践
贺老在知乎live中提到了一个这样的问题:
产品经理提出了一个需求:用户点击文章阅读,返回之后阅读其他文章。当用户看得多了,容易点到自己看过的文章,造成时间浪费。所以想给点击过的文章加一个标记,如:《新闻一二三》-(已读)。问:如何实现
我想这问题简单啊,直接遍历给每个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只能改变访问过元素的
真是眼界大开啊,之前从未遇到过这样的问题。贺老继续问道,问题出现之后不能抛下不管,那么应该如何解决呢?
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:
var a = Array.from(document.querySelectorAll("a"));//类数组对象转换为数组对象 a.forEach(function(e,index){
e.addEventListener("click",function(){
if(window.localStorage){ //判断浏览器是否可以使用localStorage
if(!localStorage.getItem(index)) //防止重复设置
{
localStorage.setItem(index,"(====已读)");
}
}
else{
alert("浏览器不支持localStorage")
}
});
})
window.addEventListener("load",function(){
var localS=Array.from(localStorage);
localS.forEach(function(e,index){ //当页面重载,查询localStorage是否存在, if (localS[index]) {
a[index].innerHTML+=localS[index]; //改变每个被点击过的元素的innerHTML
} })
})
运行效果:
大概思路:每个a标签被点击》设置localStorage{“index”,“已读”}》window监听load事件》如果localStorage存在一个索引相对的“已读”》设置a数组中该索引的a元素的innerHTML=“已读”
文章中如果出现错误,请果断评论指出,谢谢
文章为原创,转载请注明出处
《前端们,贺老 Live 面试你了!》所引发的思考与实践的更多相关文章
- 前端 & 技术团队 TL & 如何面试 & 如何带人
前端 & 技术团队 TL & 如何面试 & 如何带人 面试 带人 作为 TL,深度了解你的团队非常重要,要去了解每个人的想法是什么,他的诉求是什么,他目前的状态怎么样,以及对他 ...
- 「微前端实践」使用Vue+qiankun微前端方案重构老项目的本地验证
10月份换了新的工作,参与完一个月的需求迭代后,接到了项目重构的任务.简单来说,需要在短时间内提出方案设想,同时进行本地验证,最终需要拿出一套技术替换方案来.于是,埋头苦干了一个月,总算干了点成绩出来 ...
- 由面试引发的思考:B/S与C/S究竟是何物
一.现状说明: 就在这金三银四的求职黄金时期,我有幸作为公司的独立技术面试官,拥有最终决定录用权,在倍受上级领导的充分信任下,我也向上级保证,一定要为公司找到合适的人才,就在我满怀信心的情况下面试了一 ...
- 腾讯IVWEB前端工程化工具feflow思考与实践
本篇文章主要介绍腾讯IVWEB团队从0到1在工程化的思考和实践.feflow的全称是Front-end flow(前端工作流),致力于提升研发效率和规范的工程化解决方案.愿景是通过feflow,可以使 ...
- 前端HR告诉你—如何面试Web前端开发
分享一篇HR前端面试心得: 面试前端工程师对我来说是一件非常有意思的事,因为面试过程很大程度上也是自我提升的过程.无论大公司还是小公司,之所以在如何招聘到真正有能力的,前端工程师方面会遇到同样的问题. ...
- 记作为前端开发人员跑去面试C#.NET
先谈结果,"秦总",与我面试讨论一个半小时,十分感动,然后拒绝了我. 本月17日16时许,收到邀请,于18日9时到司面试,虽如今仅深入前端领域,皆因曾有1年ASP.NET(C#)的 ...
- 25、前端知识点--webpack篇之面试考点
前端面试之webpack篇 https://blog.csdn.net/sinat_17775997/article/details/78122999 关于webpack的面试题 随着现代前端开发的复 ...
- 石火电光追风逐日|前端优化之次时代图片压缩格式WebP的项目级躬身实践(Python3 PIL+Nginx)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_190 我们知道,在前端界有一个共识:速度就是生命,带宽就是金钱.怎样将页面加载速度有效提升是无数前端工程师无时不刻在思考的课题,目 ...
- 前端通信:SSE设计方案(二)--- 服务器推送技术的实践以及一些应用场景的demo(包括在线及时聊天系统以及线上缓存更新,代码热修复案例)
距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任 ...
随机推荐
- android操作线程各种方法解析
(一)刚开始学习android的时候我是这么写的 new Thread( new Runnable() { public void run() { myView.invalidate(); } }). ...
- Mac、Linux更换命令行svn diff为P4Merge、vimdiff
2015-01-21 21:25:52 这里先把那个程序员大神的博客地址贴一下(PS:大神,我不是为了抄袭哦,真是怕自己忘记了),http://www.ccvita.com/445.html,里面还有 ...
- HBase学习笔记-HBase性能研究(1)
使用Java API与HBase集群交互时,需要构建HTable对象,使用该对象提供的方法来进行插入/删除/查询等操作.要创建HTable对象,首先要创建一个带有HBase集群信息的配置对象Confi ...
- php判断post数据是否存在(or 为空)的方法
最近开发的php项目用到了表单 所以需要响应post请求 而在实际使用中 有些请求只需判断是否存在 百度了不少资料 发现都比较繁杂 然后想起了 count()函数 — 计算数组中的单元数目或对象中的 ...
- 添加jre/jdk A java Exception occurred
- java虚拟机判断对象是否存活的方式
引用计数算法: 给对象添加一个引用计数器,每当有地方应用时,计数器值就加一,当引用失效时,程序计数器就减一,只要引用计数器的值为零时,就表示对象不可能再被引用,例如微软的 component ob ...
- 解决msi文件在XP上安装未完成(提示安装程序被中断,未能安装app。需要重新启动该安装程序进行重试)的问题。
如图所示,我利用Visual Studio 2015制作了一个小程序.基于.Net 4.0.用VS的Install扩展,新建Install项目进行打包.打包为.msi文件.该安装文件在已经安装了 .N ...
- HDU 4857 逃生 (反向拓扑排序 & 容器实现)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4857 逃生 Time Limit: 2000/1000 MS (Java/Others) Mem ...
- 实现AJAX的异步交互的步骤
<input type="button" value="异步请求"id="btn"> <script> 实现ajax ...
- c++宏使用总结【转】
C/C++中宏总结C程序的源代码中可包括各种编译指令,这些指令称为预处理命令.虽然它们实际上不是C语言的一部分,但却扩展了C程序设计的环境. ANSI标准定义的C语言预处理程序包括下列命令: #de ...