jquery内核及实现原理(一)
jquery框架原理
1)起源--原型继承
<script type="text/javascript"> var $ = jquery = function(){ //定义jquery对象，重命名为$ };</script>?
在定义了一个空对象后，可以用ptototype来实现继承机制
<script type="text/javascript"> var jquery = function(){}; jquery.fn = jquery.protopyte = { //扩展原型对象重命名成jquery.fn，如果不带jquery，则表示fn属于window对象 }</script>?
模仿jquery框架源码，给它添加两个成员，一个是原型属性jquery，另外一个是size方法:
<script type="text/javascript"> var $ = jquery = function(){}; jquery.fn = jquery.protopyte = { //扩展原型对象 jquery : 1.9.0, size : function(){ return this.length; } }</script>?
2)生命--返回实例
以往，我们可以通过如下方法调用：
<script type="text/javascript"> var my$ = new $(); alert(my$.jquery); alert(my$.size()); </script>
?
但是jquery不是这么调用的，jquery的调用方法：
$().jquery;$().size();
?
也就是说，jquery框架没有用new操作符进行实例化，因此，正确的结构是
应该把jquery看做一个类，也要看做一个函数，并返回jquery的实例:
<script type="text/javascript"> var $ = jquery = function(){ return new jquery(); }; jquery.fn = jquery.protopyte = { //扩展原型对象 jquery : 1.9.0, size : function(){ return this.length; } } alert($().jquery); alert($().size()); </script>?
但是这样做的话会报错，return new jquery()这一行会报内存溢出，应该用如下方法返回一个jquery实例：
<script type="text/javascript"> var $ = jquery = function(){ return jquery.fn.init(); } jquery.fn = jquery.protopyte = { //扩展原型对象 init : function(){ return this; }, length : "1", jquery : "1.9.0", size : function(){ return this.length; } } alert($().jquery); alert($().size()); </script>?
3)学步--分隔作用域
<script type="text/javascript"> var $ = jquery = function(){ return jquery.fn.init(); } jquery.fn = jquery.protopyte = { //扩展原型对象 init : function(){ this.length = "0"; this.test = function(){ return this.length; } return this; }, length : "1", jquery : "1.9.0", size : function(){ return this.length; } } alert($().jquery); alert($().size()); alert($().test()); </script>?
由于init返回的this指向的是init作用域，所以size()方法返回的是0而不是1，如果init中没有length属性，则size()和test()
返回的都是1，其实就是由于init和fn中的this关键字没有隔离开来，相互冲突了，因此，jquery用了如下方法来避免冲突:
<script type="text/javascript"> var $ = jquery = function(){ return new jquery.fn.init(); }</script>?
但是这样的话，就无法访问fn中的属性和方法，入以上打印$().jquery会是undefined，打印$().size()会报错，
?4）-- 跨域访问
jquery用如下方法来实现访问fn中的属性和方法：
<script type="text/javascript"> var $ = jquery = function(){ return new jquery.fn.init(); } jquery.fn = jquery.protopyte = { //扩展原型对象 init : function(){ this.length = "0"; this.test = function(){ return this.length; } return this; }, length : "1", jquery : "1.9.0", size : function(){ return this.length; } } jquery.fn.init.prototype = jquery.fn; alert($().jquery); alert($().size()); alert($().test()); </script>?
打印出来的是1.9.0 0 0 size()方法打印出0是因为this指向的还是init域，jquery.fn.init.prototype = jquery.fn这行代码
是一招妙棋，这样就使new jquery.fn.init()创造出来的对象继承了fn里的方法和属性。
至此，jquery中如何创建对象已经完成。