jQuery源码研究01

为了研究方便,我自己定义的jQuery对象改为xQuery,意思是扩展 jQuery.

首先jQuery整体的结构:

1 (function(window,undefined)
2 {
3 var xQuery = (function(){});
4 ....
5 window.xQuery = window.$ = xQuery;
6 })(window);

为什么jQuery要使用这样的结构呢?我们再看下面的代码:

 1 (function(){
2 function ftn1()
3 {
4 return 'ftn1()';
5 }
6 })();
7
8 function ftn1()
9 {
10 return 'ftn2()';
11 }
12 alert(ftn2());//ftn2()
13 alert(ftn1());//抛出异常,禁止访问

  如果想jQuery框架里面的代码和jQuery框架以外的代码隔离起来,那么最好的方式就是把jQuery代码放到一个匿名函数里面,如上代码所示:当我们执行代码的时候ftn2()是可以访问,而ftn()1是不能访问的,从结果我们可以看到,放在闭包里面的方法是不能直接被外界所引用的,那么为什么闭包里面的方法是不能被外界引用了?原因就是在于javascript的闭包原理,直接定义的ftn2函数(直接在script标签里面),他是属于window的对象,因此页面一加载就可以直接运行,而ftn1()的外层是function(){},在javascript里面函数可以这么定义 function ftn(){},也可以这么定义var ftn = function(){},而调用的时候都是ftn(),而第二种ftn就是这个function()的别名,知道这些原理,我们再看看下面的匿名函数,(function(){})();这就是相当于没有别名的一个函数,定义完后马上执行,而且里面的空间是一个封闭的空间,里面的变量也就可以和外部环境隔离开,外部不能进行直接的调用。但是定义的类库总是要被外部调用的,因此jQuery会把window对象传到函数内部,通过window.xQuery = window.$ = xQuery;,使得外部环境可以调用jQuery框架内部定义的方法

原文地址:https://www.cnblogs.com/sharpxiajun/p/2178454.html