个人总结之前端技巧-----页面的设计流程

首先先说说我们编写一个前端页面的流程：
1设计HTML：
首先根据页面的布局，来确定对应的div区域，接着判断处在同一层级或其样式是否是相同的，若是相同的，则将这些相同样式的类定义一个相同的类名。（方便再接下来编写对应的样式的时候，集中写在一起，减少代码重复率，并 同时提高代码的可维护性，便于后期进行维护，
**2设计CSS:**接着就是来 编写对应的样式了，如果在前期设计HTML阶段，设计的合理，那么这一步就会很方便了 ，为对应的类名定义对应的样式
3在JS中设计方法:
为了将这个讲的深一点，我们提出一个实际例子，讲解起来更加深刻
比如淘宝网顶部导航栏上的“我的淘宝”这个按钮，我们将鼠标放在上面的时候，会出现对应的下拉菜单栏：
（1该菜单栏的初始颜色为#cdd0d4,点击之后该背景颜色需要被更改为白色，且出现#cdd0d6颜色的边框
2该菜单右边的按钮图标会发生变化，所以就需要我们更换该图片）
我们要做的就是实现这个功能：
有以下三种方式可以实现，
1将该hover方法写在JS中，如下：
JS:

$(".dropdown").hover(function(){
var $dropdown=$(this);//this代表该函数的执行环境
$dropdown.find(".dropdown-tax").css({
backgroud-color:"#fff";
border-color:"#cdd0d6"}
$dropdown.find(".dropdown-img").css({
backgroud-image:"url(img/dropdown-act.png";
)},function(){//鼠标移出之后，就恢复之前的样式
var $dropdown=$(this);//this代表该函数的执行环境
$dropdown.find(".dropdown-tax").css({
backgroud-color:"#cdd0d4";
border-color:"#cdd0d4"}
$dropdown.find(".dropdown-img").css({
backgroud-image:"url(img/dropdown.png";
}

以上就是我们完成了对应的更改，
这是第一种方法，同时也是最不建议的一种方法，主要有以下三种原因：
1重绘
在我们使用js来改变div的样式的时候，浏览器会为了显示这个新样式会重新绘一遍该对应的div，影响浏览器的性能
2回流
和重绘类似，在使用js改变div属性的时候，比如长和高，不仅会该变自身，其周围的元素都有可能会受到影响，所以会导致浏览器重新计算一遍这些受影响的元素标签，这也是大大影响了浏览器的性能
3是否易于维护
采用这种方式编写，是非常不利于维护的，修改起来困难复杂

于是我们可以选择将实现该功能的方法写在js中，将具体的样式更改写在css中
JS：
$(".dropdown").hover(function(){
$(this).addClass(".dropdown-hov");//挡鼠标移动到该元素的时候，添加类名为dropdown-hov的样式
},function()}
$(this).removeClass(".dropdown-hov");//当鼠标移开的时候，删除该样式

CSS:
.dropdown-hov .dropdown-act{
background-colot:"#fff";
border-color:"#cdd0d6";
}
.dropdown-hov .dropdown-img{
background-image:“url(img/dropdown.png)”;
}
这就是我们的第二种方式，将方法的声明写在该js中，将样式的变换写在css中

除了这两种写法之外还有第三种写法：
将该方法和样式的都写在CSS中
CSS：
.dropdown:hover .dropdown-act{
background-colot:"#fff";
border-color:"#cdd0d6";
}
.dropdown:hover .dropdown-img{
background-image:“url(img/dropdown.png)”;
}
//适用于，该.dropdown-act类在.dropdown类中

这就是我们的第三种了，也是最简单直接的写法，便于修改和维护