一个同事第一次使用Bootstrap,问了我一个诡异的问题——Modal Dialog(模态对话框)显示之后立即就自己关闭了。代码很简单,我看了下之后,感觉确实不应该有什么问题。


<script type="text/javascript" src="./test1_files/jquery.min.js"></script>
<script src="./test1_files/bootstrap.js"></script>
<script src="./test1_files/bootstrap.min.js"></script>
<script src="./test1_files/bootstrap-select.js"></script>
<script src="./test1_files/bootstrap-switch.js"></script>
<script src="./test1_files/bootstrap-dropdown.js"></script>

经过追查,发现了上面这样一个很怪异的地方,bootstrap.js和bootstrap.min.js都被include进来了,去掉其中一个之后,果然就ok了。这是什么原因呢?

经过查看bootstrap的源代码,原来模态对话框的显示和隐藏,是通过toggle来控制的。核心的代码就是在document ready的时候调用,绑定一个toggle事件,点击之后,原来隐藏的就显示,原来显示的就隐藏。而bootstrap.js和bootstrap.min.js,其实就是一样的代码,相当于元素被绑定了两个事件,相继执行,所以就出现了闪现的问题。

例如,我们仿照bootstrap的代码,用下面的代码进行试验,就可以看到,元素是如何先隐藏再显示的

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
  });
$("button").click(function(){
    $("#div1").fadeToggle();
  });
});
</script>
</head>

<body>

<button>点击这里,使矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
</body>

</body>
</html>

刚刚说了,bootstrap.js和bootstrap.min.js本质是一样的。我们平时在使用很多插件的时候,都会遇到这样的情况:在开发环境,使用js,发布环境使用min.js,因为后者是前者的压缩版,网上可以找到很多工具帮我们完成这个压缩过程。