zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    BZOJ5104 二次剩余板子
    BZOJ5329 [Sdoi2018]战略游戏 圆方树+虚树
    BZOJ1095 动态点分治
    BZOJ3992: [SDOI2015]序列统计
    kd-tree板子
    thusc2018翻车记
    BZOJ5336 DP套DP
    BZOJ4316 仙人掌DP
    问题 F: 最小花费
    问题 C: 热浪
  • 原文地址:https://www.cnblogs.com/as3lib/p/5118126.html
Copyright © 2011-2022 走看看