felayman-------我的jquery源码分析之路

,/*
今天所有的学习都是为了能够坚持把JQuery的源码搞懂

首先我们在W3School上简单粗略的看看函数,W3School上对
javascript中的函数是这么定义的
:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
至于它的作用:
1.将脚本编写为函数，就可以避免页面载入时执行该脚本
2.函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行
3.你可以在页面中的任何位置调用脚本
讲述的非常粗浅,但这都是给那些刚入的coder看的,我们对其进行扩充,当一个浏览器加载一个
Html文档的时候,是从上向下,逐行进行解析的.而整个加载过程,是相当复杂的.我们知道当我们
在浏览器的地址上输入一个地址的时候,我们发送的第一个GET请求的时候,返回的文档类型总是
text/html,对,浏览器首先会获取整个文档(而不管文档内容),然后对文档的内容进行逐行解析
然后才在根据Html的各种标签(比如图片,js脚本,css文件)又继续发送GET请求给服务器进行索
取,然后又根据css和js的内容对原有的html文档的dom结构进行重绘,这里我就不说css了,直接
谈谈关于js的加载,当浏览器对html文档进行解析的时候,遇到<script>标签的时候,会根据src
的url地址来从服务器继续发送请求以获取该脚本内容,然而,如果有多个js文件呢?浏览器会发送
多个请求给浏览器,那么下面的html代码怎么办呢?此时会停止解析其他的html代码,会一直解析
js代码,知道所有的js脚本加载完毕,因此有时候,我们不建议所有的js脚本都放在head内,而是把
那些需要在html加载的时候就需要加载的js脚本放入(比如第三方js库),我们可以在我们需要的地方
去引入我们自己写的js库,尤其是那些需要事件触发的的js脚本,有时候放在Html文档的末端更好.
说了这么多,都是没有说到与JQuery相关的内容上,下面我们正式开始与其相关的话题,当浏览器加载
一个js文件的时候,会其解析其内容为机器代码,然后加载到内存中等待调用,我们大多时候引入的js文
件中很少直接是js文件一加载到html文档中便去执行,因为js不是css需要对页面进行太多的重绘,而是
由用户去触发事件才会调用的,因此我们会把js代码封装到函数内,因此最重要的话题出来了,函数,因为
以前对函数了解的不深入,因此在碰到很多经典的开源js库的时候,总是感觉很吃力,看不懂,然后后悔没有
把函数的基础打好,今天就带着悔恨之心来重温javascript的核心-----函数
记得最初在W3School上初学javascriprt函数的时候,还感觉很简单,但是看过其他书籍和源码后,深深
感觉到javascript函数的强大之处.上面我们只是简单的去重复了W3School上的javascript函数,但是
我们不去看他,我们转向目光去看ECMAScript 函数概述
什么是函数?一切简单的学问都是从'什么'和'为什么','能做什么'中获取,下面我们就从这三个问题
入手,函数是一组可以随时随地运行的语句,函数是 ECMAScript 的核心,数是由这样的方式进行声明的：
关键字 function、函数名、一组参数，以及置于括号中的待执行代码。如何调用函数呢?函数可以通过其
名字加上括号中的参数进行调用，如果有多个参数.即使函数确实有值，也不必明确地声明它。该函数只需要使用
return 运算符后跟要返回的值即可。另一个重要概念是，与在 Java 中一样，函数在执行过 return 语句后
立即停止代码。从上面对ECMAScript 函数的概述中看到,它也是再重复W3School上javascriprt函数的概述
因此,我们要向真的学到更多的有关javascript的核心知识,还只能依靠真正的经典的书籍.
*/
/*
上面的话,罗嗦至极,不用去看,只是给自己的一些提示.下面真正开始javascript函数的学习
*/
//函数的第一种表示方法(函数声明)
//        function fun_name1(){
//            alert("hello,felayman1");
//        }
/**
* 上面的写法是最通俗的写法,当我们这样写的时候,就把js代码进行打包封装了,只有当我们显示的
* 调用该函数的时候,才会执行封装好的代码块,调用如下
*/
//fun_name1();//这里会弹出我们想要的结果
//函数的第二种表示方法(函数表达式)
//        var func_name2 = function(){
//            alert("hello,felayman2");
//        }
/**
* 这种写法依然是很常见的写法,跟第一种写法的本质是一样的.只有经过显示的调用才会执行
* 该函数打包的代码块
*/
//func_name2();//这里也会得到我们想要的结果
/**
* 那么我的目的就是想简单的展示函数的两种表示方法嘛?不,一切从简单开始,
* 我们能不能对上述的两种方法进行扩展呢?首先我们从形式上进行扩展
*/
//扩展一
//        (alert("hello"));
//        (function func_name3(){
//            alert("hello,felayman3");
//        })
//       (alert("hello"));
/**
* 上面我只是把第一个函数进行了大括号的包装,但是浏览器却弹出了我不想看到的结果(hello,felayman2)
* 我纠结了好半天,这是为什么呢?而且当我注释掉上述的代码后,浏览器依旧继续弹出,我以为是浏览器缓存的结果
* 于是我测试将缓存清空,但是情况依旧,令人抓狂.然后总结了下,我们对于()的使用把握不准,因此返了很大的错误
* 然后,我吧上面的代码都注释掉,结果就出现我想要的,下面是完整总结.
*/

//简单的定义个函数
// function fun1(){alert("hello,felayman1");}
//没任何问题,函数不调用就不会出现
//fun1();//完全弹出预期的结果
//继续简单的定义函数(表达式)
// var func1_name = function(){alert("hello,felayman2")};
//没有任何问题,不调用就不会
//func1_name();//完全弹出预期的结果
//对格式进行修改
// (function func2_name(){alert("hello,felayman3")});
//然后将上述部分代码进行格式处理,如下
//var func1_name = function(){alert("hello,felayman2")};
//(function func2_name(){alert("hello,felayman3")});
/*
这样写没有m没有任何问题,但是我稍微修改下,改写成下面的格式,请注意,仔细看了
为了对比更加清晰,我把上面的代码先注释掉
*/
var func_name = function(){
alert("hello,felayman2");
};(function func2_name(){
alert("hello,felayman3");
}
);
/**
* 上面的代码会弹出hello,felayman2,但是因为一个';'的原因,结果却出现了很大问,
* 下面就针对这个原因,进行深入分析.
*/
//函数原型如下
//        function name1(){
//            alert("hello1");
//        }
//为了不让函数闭包,加一句话
//        var name = "felayman";
//在定一个函数
//        function name2(){
//            alert("hello2");
//        }(alert("hello22"))
/**
* 上面的代码会弹出hello22,给出了自己的预期,那么如果我的调用name2函数呢?
*  结果会是什么呢?大家先猜猜
*/
//        name2();
/**
* 依旧弹出了hello2,好,这个时候我们可以去看看jquery的闭包方式,为了方便
* 我就把上述的代码部分全部注释掉,jquery的源码是由一个闭包函数来开篇的
*/
//然后我继续对其格式进行修改,如下
//       function name3(){
//           alert("hello3");
//       }(window);
/**
* 这么写又会出现什么效果呢?在上面的例子中,我们可以看到,该闭包函数会立即执行最后面的
* 括号内的内容,但是这里只是一个对象,又有什么含义呢?此时我们是站在javascript的角度
* 上来分析,这个是个BOM的window对象,也就是说,当加载到了函数name3的时候,首先是调用
* 了window对象,此时如果我们不去调用该函数,就不会执行函数体,然后我们再对jquery源码
* 进行补充
*/
//       (function name4(){
//           alert("hello4");
//       })(window);
/**
* 如果我们将代码上述一样的去写的时候,结果又是什么呢?结果为弹出hello4为hello4
* 如果你觉得只是偶然,我们再换个形式
*/
//       (function name5(){
//           alert("hello5");
//       })(alert("hello55"));
/*
你觉得这个时候,结果又是什么呢?你可以进测试,先弹出hello55后再弹出hello5
这个依旧说明不了什么问题,但是我们可以写个更晦涩的
*/
//       (function name6(){
//            var jquery = function(){
//                alert("hello6");
//            };
//        })(function test(){
//           alert("hello66");
//       });
/**
* 这样的结果依然令人抓狂.下面再改写一下,今天这些都是我为了入门jquery源码的开端,
* 我理了理大概的思路,才发现路漫漫其修远兮,这个周末好好看看关于闭包的原理.然后继续分
* 析JQuery源码,虽然我知道道路很艰辛,但是为了....,我会....
*/