JQ插件封裝造輪子

JQ插件封裝第一天

查看jq代碼，發現好多方法都是使用$.fn來封裝方法，但fn又是什麼，控制檯console後發現都是jq的方法
console.log($.fn)

$.prototype===$.fn,結果爲true

prototype：能夠爲對象添加方法和屬性。

這樣就能夠理解爲給jq原型添加方法及屬性。

本身寫個小例子：

1.實現字符串轉int方法（同parseInt()）

html:

<input type="text">

js:

//防止全局變量污染，影響其餘插件
(function($){
    $.fn.isnum=function(str){
        //注意：操做this的時候這裏已是$(this),請使用jq的操做dom的方法。
        //不能使用value,應爲val()
        //測試代碼：this.get(0).value=((+str||str==0)?(+str):NaN)
        this.val((+str||str==0)?(+str):NaN);
        console.log(this.value);
    }
})(jQuery)

使用

$('input').isnum('0999');//999
$('input').isnum('99s');//NaN

2.求最大div高度

html:

<div style="width: 20px;" ></div>
<div style="width: 10px;"></div>
<div style="width: 21px;"></div>
<div style="width: 5px;"></div>

js:

// 求最寬的div

(function($){
        $.fn.max_w = function(){
            var max = 0;
            $.each(this,function(i,item){
                max = Math.max(max,$(item).width());
            })
            return max;
        }
    })(jQuery)

    alert($('div').max_w())

JQ插件封裝次日

如上面若是封裝方法過多，看起來會很是亂，這時可使用jq的extend。

jQuery.extend( target [, object1 ] [, objectN... ] )
jQuery.extend( [ deep ], target , object1 [, objectN... ] )

參數 描述
deep 可選/Boolean類型指示是否深度合併對象，默認爲false。若是該值爲true，且多個對象的某個同名屬性也都是對象，則該"屬性對象"的屬性也將進行合併。
target Object類型目標對象，其餘對象的成員屬性將被複制到該對象上。 object1 可選/Object類型第一個被合併的對象。
objectN 可選/Object類型第N個被合併的對象。

我的理解extend的做用就是把好多對象合併到一個對象裏面，目前有三個以上參數，第一個是否深度合併，第二個合併到的目標，第三個被合併的對象，三個之後同第三個以此類推，一般只寫一種參數便可：合併的object

下面作個測試：

var a = function(){
    console.log("a");
}
var b = function(){
    console.log("b");
}
var c = function(){
    console.log("c");
}
var f = new Object;
//把a，b，c放到一個對象合集而後合併到f對象裏
$.extend(f,{a,b,c})
console.log(f);

結果：

若是要合併到jquery對象中上面的$.extend(f,{a,b,c})須要把f改成$或者jquery,也能夠直接省略該參數$.extend({a,b,c})，開發中就能夠直接使用$.extend({a,b,c}),這樣就能夠對jq全局對象進行添加方法了.

通常開發中都是對某個實例進行添加方法，再看下第一天的test代碼

(function($){
$.fn.isnum=function(str){
this.val((+str||str==0)?(+str):NaN); console.log(this.value); }
})(jQuery)

都是基於fn實例上添加方法，因此使用$.fn.extend（插件開發常常使用）
對上面的方法進行改寫：

(function($){
 $.fn.extend({
     isnum:function(str){
         this.val((+str||str==0)?(+str):NaN);
     },
     isNaN:function(){
         //…………
     }
  })
 
})(jQuery)
$('input').isnum('test')

總結：

在封裝插件時經常使用$.fn.extend（對dom操做時）.在封裝像parsInt這樣的方法時候適用於$.extend

上面差很少就知足了插件複用的基本需求了，可是，當你想在原來基礎上添加內容，或者修改變量時，就須要傳參來解決了。

寫個測試：給文檔div設置高度，寬度，背景及自定義css
html:<div>1</div><div>2</div><div>3</div><div>4</div>

js:

(function($){
            $.fn.extend({
                e_width:function(options){
                    var settings = $.extend({
                        width:'50px',
                        height:'20px',
                        background:'red'
                    },options);
                     this.each(function(){
                        $(this).css(settings);
                    });
                }
            })
        })(jQuery)
        $('div').e_width({
            'opacity':0.5,
            'cursor':'pointer'
        })

聲明一個變量settins來初始化默認數據（即沒有傳參的默認狀態），而後將opions形參合併到settins，最後做用到css中，因此在實例中添加參數就能夠合併到settings中，完成自定義css，並且繼續傳參數會代替前面初始設置的值。

封裝

(function(){
    $.extend({
    //變量在數組中是否存在，存在的位置
        areArray(b,arr){
            for(var i in arr){
                if(arr[i] == b){
                     return arr[i]+'所在位置'+i;
                }
            }
        },
        unrepeat(arr){
        //unrepeat 數組去重，返回去重後的數組
            for(var i =0;i<arr.length;i++){
                for(var j = i+1;j<arr.length;j++){
                    if(arr[i]==arr[j]){
                        arr.splice(i,1)
                    }
                }
            }
            return arr;
        },
        isnum(str){
        //字符串是否能夠轉爲數字
            return (+str||str==0)?true:false;
        }
    })
})();