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

posted on 2016-01-10 11:58  防空洞123  阅读(155)  评论(0编辑  收藏  举报

导航