jquery源码分析
http://www.w3ctech.com/topic/256
http://www.cnblogs.com/aaronjs/p/3278578.html
JS原型与原型链终极详解
http://www.108js.com/article/article1/10201.html?id=1092
JS中的prototype
http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html
jQuery对象是如何产生的?
http://www.cnblogs.com/sharpxiajun/archive/2012/05/07/2487208.html
问题一:$从哪里来?
$(".mydiv") 就是调用了一下jQuery()这个函数,甚至连构造函数都不是
第55行,只是return了jQuery里面的fn对象的一个init方法
第9539行 把$弄成window下的一个对象 也就是jQuery
模仿一下大概是这样:
(function(){ var rootMyjq; var myjq = function(selecter){ console.log(selecter) } window.myjq = window.$ = myjq; myjq.fn = myjq.prototype = { fun1:function(){ console.log("fun1") }, fun2:function(){ console.log("fun1") } }; myjq.Event = {}; //rootMyjq = myjq(document); })();
<div class="mydiv">mfdsfdsfdsfds</div> <!-- <script type="text/javascript" src="js/jquery-1.9.0.js"></script> --> <script type="text/javascript" src="js/myjq.js"></script> <script type="text/javascript"> $(".mydiv") </script>
问题二:$.extend({sayHello:function(){}}) 这样写插件之后为何可以直接$.sayHello()是怎么样绑定到jQuery对象上的
当调用$.extend() 这个方法的时候,如果是个对象,则走到325行,target被赋值成了jQuery对象,this是指jQuery对象,最后遍历options jQuery["sayHello"] = copy copy是指sayHello函数
问题三:new jQuery.fn.init
实际jQuery创建的对象是 new jQuery.fn.init ,知道了这个,基本就能理解了,博主写的太长。
$.extend 和 $.fn.extend虽然是同一个方法体,但由于上下文this不同,所以扩展的对象就不同。
$.extend 扩展的 jQuery这个 function , $.fn.extend扩展的是 $.fn 也就是$.prototype == $.fn.init.prototype
因为function也是Object,所以
$.test 调用的jQuery这个function[Object]的test,如var jQuery = { test:"123" } , jQuery.test
而 $().test,首先返回的是new jQuery.fn.init() 对象,然后调用定义在原型链上的test.
再一个原型链上的东西都是共享的,所以原型链上的函数只是通过上下文this的不同来实现不同对象的不同调用结果.
如
<script type="text/javascript"> function test(s) { this.testStr = s; } test.prototype = { testfn: function () { alert(this.testStr) }, testVal: { val :"default" } } var a = new test("1111"); var b = new test("2222"); a.testfn(); // 1111 b.testfn(); // 2222 alert(b.testVal.val); // default a.testVal.val = "change"; alert(b.testVal.val); // change a.testfn.test = "123"; alert(b.testfn.test);//123 </script>
Bootstrap源码分析:
http://suqing.iteye.com/blog/1984131
js面向对象编程:
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html