jQuery extend方法介紹

jQuery爲開發插件提拱了兩個方法，分別是：
jQuery.fn.extend(object);

jQuery.extend(object);
jQuery.extend(object);爲擴展jQuery類自己.爲類添加新的方法。
jQuery.fn.extend(object);給jQuery對象添加方法。這個應該很好理解吧。舉個例子。

1.合併多個對象。
這裏使用的就是$.extend()的嵌套多個對象的功能。
所謂嵌套多個對象，有點相似於數組的合併的操做。

<span style="font-size:18px;">//用法: jQuery.extend(obj1,obj2,obj3,..)
var Css1={size: "10px",style: "oblique"}
var Css2={size: "12px",style: "oblique",weight: "bolder"}
$.jQuery.extend(Css1,Css2)
//結果:Css1的size屬性被覆蓋,並且繼承了Css2的weight屬性
// Css1 = {size: "12px",style: "oblique",weight: "bolder"}
</span> 

二、深度複製

1.  <script type="text/javascript" src="jquery-extend.js"></script> 

2.  <script> 

3.  obj1 = { a : 'a', b : 'b' }; 

4.  obj2 = {  x : { xxx : 'xxx', yyy : 'yyy' },  y : 'y' }; 

5.  $.extend(true, obj1, obj2); 

6.  alert(obj1.x.xxx);  // 獲得"xxx" 

7.  obj2.x.xxx = 'zzz'; 

8.  alert(obj2.x.xxx); // 獲得"zzz" 

9.  alert(obj1.x.xxx); // 獲得"xxx" 

10.</script>  

$.extend(true, obj1, obj2)表示以obj2中的屬性擴展對象obj1，第一個參數設爲true表示深複製。

雖然obj1中原來沒有"x"屬性，但通過擴展後，obj1不但具備了"x"屬性，並且對obj2中的"x"屬性的修改也不會影響到obj1中"x"屬性的值，這就是所謂的「深複製」了。

3.能夠給jQuery添加靜態方法。

（能夠看下我以前的彈窗方法）

$.fn.mPop = function() {
        $("body").css("position", "relative");
        var sctop = top.location == self.location ? $(window).scrollTop() : $(parent.window).scrollTop();
        var winW = $(window).width();
        var winH = $(window).height();
        var tcH = $(document).height();
        var w = $(this).innerWidth();
        var h = $(this).innerHeight();
        $(this).css({"height":winH});
        $(".lottery_popup_bg").css({"height":winH});
        $(".tips_popup").css({"height":"auto"});
        $(this).css({
            "left": (winW - w) / 2 + "px",
            "z-index": "30"
        });
        var bgdiv = "<div class='bgdiv'></div>";
        $("body").append(bgdiv);
        if (h > winH) {
            $(this).css({
                "display": "block",
                "top": "0px"
            })
        } else {
            $(this).css("display", "block").css({
                top: ((winH - h) / 2 + sctop) + "px"
            });
        }
        $(".bgdiv").css({
            "width": winW + "px",
            "height": tcH + "px",
            "opacity": 0.8,
            "position": "absolute",
            "left": "0",
            "top": "0",
            "z-index": 20,
            "background-color": "#000",
            "display": "block"
        });
    }

使用此方法是能夠$("xx").mPop();

相似jq中click（）。

jq中將extend做爲擴展模塊的方法使用，在原生js中咱們也能夠使用。這是咱們是爲了將兩個構造函數結合在一塊兒。

<script>
    /*
        把父對象的全部屬性，直接複製到本身身上
    */

    function Cat(leg, tail) {
        this.leg = leg;
        this.tail = tail;
        this.climb = function() {
            alert("i can climb!");
        };
    };

    function Tiger(leg, tail, color) {
        this.leg = leg;
        this.color = color;
        this.extend = function(parent){ //複製繼承。父對象的屬性複製到他自身。原型鏈繼承影響下游全部對象，複製繼承不影響下游（jq複製繼承）
            for(var key in parent){
                //console.log(key);
                this[key] = parent[key];//循環複製添加給Tiger的this屬性
            };
        };
    };


    var tiger = new Tiger(5,1,"#f00");
    console.log(tiger.leg);//5   
    tiger.extend(new Cat(4,1));//從新賦值
    tiger.climb();//i can climb!
    console.log(tiger.leg);//4
    </script>