关于js脚本放在一个文件里的疑问?
对于一个小型网站,大多只有几个js文件(1~3),在各个页面引用这些js文件来完成各页面的交互,而不会(或者很少)在某个网页单独的写上js代码。这样,每个页面在dom加载完成后,需要执行的js脚本是怎么样调用的? 是在某个js文件里中有一个统一的调用接口,在这个接口里,执行所有的js事件绑定,以完成UI交互? 如果是这样,那么对于某个页面,必然存在绑定很多事件在一些不存在的dom节点上,这就产生了浪费,做了很多无用功。简略代码如下:
<!-- 页面1 -->
<html>
<head> ... </head>
<body>
'''
<div class="test1">...</div>
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript" src="test2.js"></script>
</body>
</html>
<!-- 页面2 -->
<html>
<head> ... </head>
<body>
...
<div class="test2">...</div>
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript" src="test2.js"></script>
</body>
</html>
// test1.js
$(document).ready(function(){
// 调用各页面封装的接口和执行事件绑定已完成页面交互
$('.test1').click(function(){
// do something
...
});
$('.test2').click(function(){
// do something
...
});
...
});
对于页面1 $('test2')的绑定就是多余的。
对于这种多余是可接受的吗? 就像对于css一样,把全站的样式放在几个css文件中。
如果不可介绍,是如何避免无效事件绑定(dom节点不存在的情况下)?
对于这种浪费,我现在能想到的是在js文件中编写各个页面的接口,然后在各个页面调用相应接口来避免这样的无效事件绑定,以提高性能(如果可以)。
22336
10 years, 5 months ago
Answers
ls是对的,如果感性上还是不能接受,可以用seajs,这样写页面:
<!-- 页面1 -->
<html>
<head> ... </head>
<body>
'''
<div class="test1">...</div>
...
<script type="text/javascript" src="sea.js"></script>
<script type="text/javascript" src="config.js"></script>
<script>
seajs.use('test1', function () {
$('.test1').click(function(){
// do something
...
});
})
</script>
</body>
</html>
test1做test1的事情,test2的绑定放到test2中去,做好代码的解藕。
昵称又被抢了
answered 10 years, 5 months ago