Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

把空列表交给前端处理

  服务器经常要对特定的情况输出特定的数据,比如当一个列表为空时,服务器可能就需要输出一条数据为空的提示信息给用户。这样为特定的情况做特定输出会使服务器程序的逻辑变繁琐,我们应该尽量避免这种情况的出现,尽量把特殊情况交给前端来处理。
  就这个空列表的问题,服务器可能会有这样的代码
<?
$data=array('item1','item2','item3');
//$data=array();
?>
<ul><?
if(count($data))foreach($data as $i)
  echo '<li>'.htmlspecialchars($i).'</li>';
else echo '<li class="empty-item">暂无项目</li>'
?></ul>
  但如果用CSS中的:empty伪类来处理就不需要服务器的判断,为空的列表直接不输出内容就好了。
<?
//$data=array('item1','item2','item3');
$data=array();
?>
<style>
ul:empty:before {content:'暂无项目';}
</style>
<ul><?
foreach($data as $i)
  echo '<li>'.htmlspecialchars($i).'</li>';
?></ul>
  不仅是UL这样的列表元素可以使用,即使是TABLE也可以使用伪元素输出内容,具体操作见这里。但这个做法还是存在一些局限性的。首先,要使:empty伪类生效,容器中就不能存在文本节点(包括空文本节点)。目前CSS还不支持:has,要是有这个支持的话,操作起来会容易些。另一方面,我们使用了伪元素来为空容器添加描述,而伪元素可表达的范围毕竟是有限的,如果需要超链接之类的交互性提示信息就无法使用伪元素来实现。最后需要注意的是,:empty伪类是从IE9才开始支持的,如果需要兼容IE8或之前的浏览器就没法使用了。而目前我所做的东西基本都需要兼容IE8,有时候我真的会不惜插入一个SCRIPT标签来处理空列表也想来让服务器端的程序逻辑更简单一些。
  当然,大家可能在使用各种后端框架,它们可能自己集成了相应问题的处理方式。但我觉得,既然是列表就不应该在HTML原始源上插入其它信息,即使列表为空。在一个列表中插入那样的信息会破坏数据的结构化,比如一个爬虫抓取数据时遇到空列表可能会把空列表的提示信息当成是列表的内容来抓取。
网名:
54.226.58.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^