jquery下组织javascript代码(js函数化)
2024-05-06 14:27:35
供稿：网友
从神奇的"$"函数开始
"$"函数将在文档加载完成之后为一个指定的button 绑定事件，这些代码在单个网页中工作正常。但是如果我们还有其它的网页，我们将不得不重复这个过程。
代码如下:
<a href="javascript:;" id="sayHello">Say Hello</a>
<script type="text/javascript">
//when dom ready, do something.
//bind click event to a button.
$(function(){
$('#sayHello').click(function(){
alert('Hello world!');
});
});
</script>
如果我们需要另一个行为的button怎么办？比如象这样：
代码如下:
<a href="javascript:;" id="sayUnlike">Unlike it</a>
<script type="text/javascript">
//when dom ready, do something.
//bind click event to a button.
$(function(){
$('#sayUnlike').click(function(){
alert('I unlike it.');
});
});
</script>
接下来，更多的问题出现了，我们需要很多这样的button, 这好象也不难。
代码如下:
<a href="javascript:;" class="sayUnlike">Unlike it</a>
<script type="text/javascript">
//Change to a class selector to match all the button elements.
$(function(){
$('.sayUnlike').click(function(){
alert('I unlike it.');
});
});
</script>
一个页面里面同种出现了两种button ......
代码如下:
<a href="javascript:;" class='sayHello'>Say Hello</a>
<a href="javascript:;" class="sayUnlike">Unlike it</a>
<script type="text/javascript">
$(function(){
$('.sayHello').click(function(){
alert('Hello world!');
});
$('.sayUnlike').click(function(){
alert('I unlike it.');
});
});
</script>
但是呢，不是所有的页面都会用到这两种的button，为了不在页面上使用额外的选择器，我们要作一些必要的调整，因为基于class的选择器的性能相对于id选择器开销很大，需要遍历所有dom元素，并使用正则表达式匹配class属性来选定满足条件的元素。
代码如下:
<? if($page == 'A'){?>
<script type="text/javascript">
$(function(){
$('.sayHello').click(function(){
alert('Hello world!');
});
});
</script>
<? } ?>
<? if($page == 'B'){?>
<script type="text/javascript">
$(function(){
$('.sayUnlike').click(function(){
alert('I unlike it.');
});
});
</script>
<? } ?>
我们的项目功能越来越复杂，经过一段时间以后，变成了这个样子, quick but dirty......
代码如下:
<? if($page == 'A' or $page == "C" and $page is not "D"){ ?>
<script type="text/javascript">
......
</script>
<? } ?>
<? if($page == "B" or $page == "E" and $page is not "X"){ ?>
<script type="text/javascript">
.....
</script>
<? } ?>
