2020这样就过去了。疯狂加班一个月总算结束了,难得休息开始玩起了cocos 和一些vuejs 之前未试过的玩法。休息时间写写博客也是最写意也。前段时间看了一个菜单分割线做法,看了这个写法上的差别。下面也来做一下实验。
我们经常遇到菜单加分割线做法。中间2个线是通过border-right实现,只是这个做法会出现最后一个菜单尾部的问题,影响美观。一般情况下需要使用last-child 去修正。
我们实验一下另外做法,采取not选择器。这个写法又一些差别,这个我在一些公众号看过一些文章。我们通过一个简单案例来实现一下。以下的代码是一个普通移动菜单。采取flex 进行布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单测试</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<style type="text/css">
.menus{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.menu-item{
width: 33.333%;
text-align: center;
cursor: pointer;
}
.menu-item:not(:last-child){
border-right: 1px solid #ccc;
}
</style>
<body>
<div id="menus" class="menus">
<div class="menu-item">菜单一</div>
<div class="menu-item">菜单二</div>
<div class="menu-item">菜单三</div>
</div>
</body>
</html>
第一种写法是采取not选择器,它告诉我们不要选择最后一个。这样子,菜单采取了border-right 写法后,最后一个border-right就不会显示出来。
.menu-item:not(:last-child){
border-right: 1px solid #ccc;
}
再看看另外一种传统的做法。例如这样。先实现子节点全部border-right 出处理,然后再处理最后一个
.menu-item{
width: 33.333%;
text-align: center;
cursor: pointer;
border-right: 1px solid #ccc;
}
/*.menu-item:not(:last-child){
border-right: 1px solid #ccc;
}*/
.menu-item:last-child{
border-right: none;
}
对比两种写法,not的语法更像是另外一种思维,告诉浏览器不要包含最后一个。两者都可以实现菜单最后一个border 消失的效果。实现了菜单分割线效果。但看着not 写法更高级一点。
2 .采取父节点去监听点击
在动态渲染子节点的时候,有时候遇到了不方便添加监听方法时候。有一种思路可以简单实现。那就是先从父节点入手,采取事件event.target的方式去监听点击对象是谁,从而实现监听子节点的目的。例如监听图片点击放大,也可以采取这种方式实现。只要判断到是图片就可以处理对应交互效果了。
<body>
<div id="menus" class="menus">
<div class="menu-item">菜单一</div>
<div class="menu-item">菜单二</div>
<div class="menu-item">菜单三</div>
</div>
<script type="text/javascript">
var menu = document.getElementById('menus');
menu.addEventListener('click',function(e){
console.log(e.target.className)
if(e.target.className == 'menu-item'){
alert('点击了菜单' + e.target.innerText)
}
})
</script>
</body>
总体来讲,css和js都在逐年进步和变化,还有很多新特性在逐年排队实现。过去一些比较老做法已经不推荐。前端还真是一个苦逼的行业,大前端流行趋势,这个大前端也具备不少知识和优化技巧学习。好了,今天就记录一些最近学习到技巧。