《前端们,贺老 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上,所以适应这边的节奏和业务的开发任 ...
随机推荐
- Javascript 事件对象(五)事件捕获
事件捕获: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" c ...
- Ruby on Rails搭建环境出现的问题及解决方案
问题一:在win7系统64位环境下执行cmd命令:rails new testapp 之后,回报如下图错误:Gem:installer::ExtensionBuildError: ERROR:Fail ...
- div内容滚动,无缝滚动
function startmarquee(lh, speed, delay) { var t; var oHeight = 373; /** div的高度 **/ ...
- 1.2 ASSEMBLY LANGUAGE
People are much happier moving up the ladder,socially or even technically.So our profession has move ...
- linux git 推送空文件夹
/********************************************************************************* * linux git 推送空文件 ...
- 搞懂 SynchronizationContext
SynchronizationContext -MSDN 很让人失望 我不知道为什么,目前在.Net下关于这个类只有很少的资料.MSDN文档也只有很少的关于如何使用SynchronizationCon ...
- in a devstack Openstack env, how to start a service, such as aodh-listener
in terminal, when start the service, the service will run in this terminal, and if kill this termina ...
- Ftp类
using System; using System.Collections.Generic; using System.Text; using System.Net; using System.IO ...
- jsonp解决跨域
ajax请求: $.ajax({ type: "get",//必须使用get方式 async: false, url: "htt ...
- Cause: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xm
mybatis解析xml配置文件出现异常: org.apache.ibatis.exceptions.PersistenceException: Error building SqlSession. ...