在现在的前端开发中,一直在倡导着这样三个分离:表现和结构分离;行为和结构分离;行为和表现分离。
前两个分离,都很好理解,就是通俗的div和css的分离,以及html和js程序的分离,而且这种分离很容易做到。
但对于第三个分离:行为和表现分离,比前两个要复杂得多。基本的问题是:哪些效果用CSS定义,哪些应该用JavaScript实现?尽管答案看似很明显:表现用CSS,行为用JS。但事实上存在很多CSS和JavaScript的灰色地带,不能清楚地把某个效果归为表现还是行为。
下面,我们通过两个常用的效果实现对比来分析下。
1.下拉菜单:hover或mouseover/mouseout
下拉菜单的用途是:当用户的鼠标移上某个主菜单上时,显示相应的子菜单;而当用户移出时,再将它隐藏。
下面是某个主菜单的下拉菜单的html程序;
<li><a href="#">News</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Abroad</a></li>
</ul>
</li>
通过css,我们可以这样来实现:
li ul{display:none;}
li:hover ul {display:block;}
如上,我们可以通过简短的两行CSS代码来实现目的,从代码量和维护量来看,CSS的:hover方案明显比JavaScript的mouseover/mouseout方案好得多,但从另一方面,IE6和更早的浏览器并不支持li:hover.而且有些人喜欢用键盘来代替鼠标,通过tab键和enter键来获取焦点,这些键盘用户将无法使用CSS下拉菜单,因为li:hover是一个纯鼠标选择器,它不会对键盘焦点作出响应。另外,焦点也不可能被放在<li>上,因为键盘焦点只能选择链接、按钮和表单域。相反,JavaScript可以适应键盘用户,具有更好的可访问性。
因此,两种方法都有其自身独特的优缺点,没有哪一种能完全胜出。
从更高层的理论视觉看,下拉菜单是表现还是行为?它只有在用户做出触发动作之后才会产生效果,似乎是行为;但是,这种效果是子菜单的呈现,它又像是表现。
总之,到底是用CSS还是JavaScript,最终还是归结为个人的选择。