(function($){...})(jQuery) 讲解

来源:互联网 发布:喀秋莎软件的操作介绍 编辑:程序博客网 时间:2024/05/16 18:59

当你第一眼看到“(function($){...})(jQuery)”的时候,你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句,这他妈什么劳什子。时过境迁,对于现在无比倚重Jquery的我,自感当时的自己是那么的无知,今天忙里偷闲,解释一下究竟“(function($){...})(jQuery)”该怎样理解:

代码一:

<html>
 <head>
  <title>代码一</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript">
   (function(name){
    alert(name);
   })("GaoHuanjie");
  </script>
 </head>
 <body>

 </body>
</html>

说明:在浏览器中运行上面代码,会弹出一个对话框,对话框的内容为GaoHuanjie。

上面代码中执行的JavaScript脚本和“(function($){...})(jQuery)”是一样的,也就是说“(function($){...})(jQuery)”中的函数会自动被执行,那么究竟该怎样理解“(function($){...})(jQuery)”呢?“(function($){...})(jQuery)”实际上表示的是已处于调用状态的匿名函数:function($){...}是定义的匿名函数,参数为$(之所以将参数声明为$是为了不与其他库冲突);为了调用该函数则在该匿名函数的后面添上了括号和实参(这里为jQuery),但又由于操作符的优先级,函数本身也需要用括号,所以又为匿名函数添加了括号。

释疑解惑

一、我运行下面代码为什么报错——jQuery is not defined:

<html>
 <head>
  <title>代码二</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript">
   (function($){
    alert($);
   })(jQuery);
  </script>
 </head>
 <body>

 </body>
</html>

嗯嗯,浏览器在解析上述js脚本时确实会出现问题,假如为jQuery添加英文双引号,再次使用浏览器运行上述脚本则不会出错,为什么不加就会出错呢,呵呵呵,其实这里的jQuery还是一个变量,如果为上述代码引入jQuery库,再次使用浏览器运行上述代码则不会出现问题:

<html>
 <head>
  <title>代码三</title>
  <script type="text/javascript" src="./jquery-1.6.2.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript">
   (function($){
    alert($);
   })(jQuery);
  </script>
 </head>
 <body>

 </body>
</html>

0 0
原创粉丝点击