用jQuery类库已经有很长一段时间了,但是直到今天我才发现平时我们在写一段js代码的时例如:
$(function(){ $('#mine').click(function(){ alert('hi,i"m jxcent'); }) })
事实上,我们都习惯这么写,其实$(function(){})是允许你绑定一个在 DOM 文档载入完成后执行的函数。对它就是一个回调函数,这样写的话有一点优势就是这段代码不管放在哪里都能够执行。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>MyTest</title> <script src="http://s.my.com/js/jquery-1.8.2.min.js"></script> <script> $(function(){ $('#mine').click(function(){ alert('hi,i"m jxcent'); }) }) </script> </head> <body> <a href="#" id="mine">Run Click</a> </body> </html>
在这里我特意将jQuery的代码放在head中,我们运行之后依然可以触发点击事件。该函数的作用如同 $(document).ready() 一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的其他 $() 操作符都包装到其中来。尽管从技术上来说,这个函数是可链接的,但真正以这种方式链接的情况并不多。
所以我们要改进一种更为优雅的jQuery写法,这是一种习惯。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>MyTest</title> </head> <body> <a href="#" id="mine">Run Click</a> </body> <script src="http://s.my.com/js/jquery-1.8.2.min.js"></script> <script> $('#mine').click(function(){ alert('hi,i"m jxcent'); }) </script> </html>
通过上段代码你会发现页面上面不存在$(function(){})之类的代码了,但是我们依旧可以触发点击事件,更为优雅的是jQuery或者其他js代码都在</body>之后,那么加载页面的速度也有了很大的提升。但是有一点你必须注意,如果现在把
<script src="http://s.my.com/js/jquery-1.8.2.min.js"></script> <script> $('#mine').click(function(){ alert('hi,i"m jxcent'); }) </script>
移动到head中,你会发现是触发不了点击事件的。原因就是函数写在DOM(mine)之前了。
我们采用优雅的写法给我们的代码带来清晰感,不会使代码过于臃肿和繁杂。