web前端优化系列
此系列文章是以《高效前端-Web高效编程与优化实践》一书进行整理、记录和扩展的.这里只记录我目前没有用到或没了解到的知识点，大家有需要还是去看下这整本书，对前端进阶还是很有帮助的。
优化1：能用HTML/CSS解决的问题就不要用JS
以几个案例来介绍
1.1 导航高亮
这个案例不是普通鼠标放上去高亮，而是根据展示的页面不同，高亮响应的元素。
正常态时
nav li { opacity:0.5 }
而在选中状态时，导航不透明读为1。
为了实验此目的，首先通过body给不同页面添加不同的类，用于标识不同页面。
li也要有class标识
这样，如果当前页面是home,则body.home nav li.home这条规则生效，home导航高亮
如果用JS控制，则在脚本加载好之前，当前页面是不会高亮的，而当脚本加载好之后会突然高亮。
<!-- home.html-->
<body class = "home"></body>
<!-- buy.html-->
<body class = "buy"></body>
<li class="home">home</li>
<li class="buy">buy</li>
body.home nav li.home,
body.buy nav li.buy{
opacity:1
}
hover的高亮
nav li:hover{
opacity:1
}
1.2鼠标悬浮显示
引言：
鼠标悬浮的场景的实现，一般要把隐藏的对象如子菜单、信息框作为hover目标的子元素或者相邻元素，才方便CSS控制
代码1-2-1 菜单menu紧挨着user：
<li class="user">用户</li>
<li class="menu">
<ul>
<li>账户设置</li>
<li>登出</li>
</ul>
</li>
<!-- style代码 -->
<style>
/*正常下隐藏*/
.menu{
display:none;
}
/*
当导航Hover时结合相邻选择器，把它显示出来
注意,这里用的是相邻选择器。menu的位置可以用absolute定位
*/
.user:hover + .menu {
display:list-item
}
.menu {
display:list-item
}
</style>
问题: menu和导航需要挨在一起，若中间有空隙，则鼠标移开导航栏时，菜单也会消失。
但这里可以在Menu上再画一个透明的区域，可以用before/after伪类用absolute定位实现
ul.menu:before{
content:"",
position:absolute;
left:0;
top:-20px;
width:100%;
height:20px;
}
问题: 如果既写了CSS的hover，又监听了mouse事件，用mouse控制显示隐藏，双重效果会有什么情况发声？
在mouse事件里面hover的时候，添加了一个display:block的style，会覆盖掉CSS的设置
即，只要hover一次，CSS的代码就不管用了，因为内联样式的优先级会高于外联的
1.3 自定义radio/checkbox的样式
这里的主要逻辑是： 借助了CSS3提供的一个伪类：checked，只要radio/checkbox是选中状态，这个伪类就会生效，因此可以利用选中和非选中这两种状态，去切换不同的样式。代码清单如下
1-3 实现自定义单选、多选按钮样式
<style>
input[type=checkbox]{
display:none;
}
/*未选中checkbox的样式*/
.checkbox {}
/*选中时，样式*/
input[type=checkbox]:checked + .checkbox {}
</style>
<!--写在label里面是为了能够在单击span的时候改变checkbox的状态。最后再改一下选中态的样式即可-->
<label>
<input type="checkbox">
<span class="checkbox"></span>
</label>
1.4需要根据个数显示不同样式
例如有1~3个item显示在同一行，但item个数不一定，这时可以用CSS3轻松解决
1-4 借助nth-last-child实现个数区分
<style>
li {
width:100%;
}
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width:50%;
}
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width:33%;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
借助一个nth-last-of-type有时非常好用，特别是需要实现前向选择器。
如果有两个terms，想要隐藏第二个，只显示第二个，可以这样做
<style> .terms-box + .terms-box {display:none}</style>
<div class="terms-box"> </div>
<div class="terms-box"> </div>
反过来的话可以这样实现
当它是第一个元素，兵器它是倒数第二个的时候就隐藏。这样就实现了有两个term的时候隐藏第一个，只有一个的时候不隐藏
.terms-box:nth-of-type(1):nth-last-of-type(2) {
display:none;
}
其他
当要实现一个hover的时候显示提示信息，如果用title属性觉得效果太弱，但是又不想用JS写，这里可以用CSS3的attr属性实现，将想要展示的提示文案放单一个属性里面
<p> hello,<span data-title="Fronted Development">FED</span></p>
span[data-tilte] {
position:relative;
}
span[data-title]:hover:before{
content:attr(data-title);
position:absolute;
top:-50%;
left:50%;
transform:translateX(-50%);
white-space:nowrap;
}
css画三角形
.triagnle {
border-left: 50px solid transparent;
border-right: 50px soli transparent;
/*border-top: 50px solid #666;*/
/*角度控制，可以控制底的宽度即可*/
border-bottom: 50px solid #999;
width:0;
height:0;
background-color:#ccc;
}
优化2：尽可能使用伪元素
伪元素一般用于画图，特别是那种无关紧要的分隔线/点之类的小元素。
伪元素是一个元素的子元素，并且是行内元素，主要特点是无法用JS获取这个伪元素， 即可以增加视觉上的效果，但不会增加JS查DOM的负担，它对JS是透明的。
例：使用伪元素画分割线
.or {
text-align:center;
}
.or:after,
.or:before{
content:"";
/*注意把一个元素absolute定位后会强制把它变为块级元素*/
position:absolute;
top:24px;
height:1px;
background-color:#ccc;
width:200px;
}
.or:after{
right:-5px;
}
.or:before{
left:0;
}
这里把所有css的伪类整理出来
使用JS无法完全获取到伪元素?
并不是完全不行，getComputedStyle就是一个特例，因为它可以传第二个参数，以表示伪元素。
var style = window.getComputedStle(document.querySelector('.content'),':before')
var content = style.getPropertyValue("content");
优化3: JS使用策略模式
当某个组件或UI需要在多个地方使用，但 除里面的内容不同，其他都相同，可以使用策略模式，将里面不同的内容当作一个一个策略。
首先定义不同策略类型（这里就借用书中的例子了）
var popType =["register","favHouse","saveSearch"]
然后每种策略都有对应的内容
Data.text.pop = {
register:{
title:",,,,,",
subTitle:"...."
},
favHouse:{...},
saveSearch:{...}
}
渲染时可以这样用
function showPop(popType){
Mustache.render(popTemplate,Data.text.pop[popType]);
}
回调形式
var popCallback = {
favHouse:function(){
...
},
saveSearch:function(){
...
}
}
扫一扫
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
