国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JQ插件封裝造輪子

BLUE / 2080人閱讀

摘要：插件封裝第一天查看代碼，發(fā)現(xiàn)好多方法都是使用來封裝方法，但又是什么，控制臺后發(fā)現(xiàn)都是的方法結(jié)果為可以為對象添加方法和屬性。不能使用應(yīng)為測試代碼使用求最大高度求最寬的插件封裝第二天如上面如果封裝方法過多，看起來會非常亂，這時可以使用的。

JQ插件封裝第一天

查看jq代碼，發(fā)現(xiàn)好多方法都是使用$.fn來封裝方法，但fn又是什么，控制臺console后發(fā)現(xiàn)都是jq的方法
console.log($.fn)

$.prototype===$.fn,結(jié)果為true

prototype：可以為對象添加方法和屬性。 這樣就可以理解為給jq原型添加方法及屬性。

自己寫個小例子：

1.實現(xiàn)字符串轉(zhuǎn)int方法（同parseInt()） html:

js: 
//防止全局變量污染，影響其他插件
(function($){
    $.fn.isnum=function(str){
        //注意：操作this的時候這里已經(jīng)是$(this),請使用jq的操作dom的方法。
        //不能使用value,應(yīng)為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:
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... ] )
參數(shù)    描述
deep    可選/Boolean類型指示是否深度合并對象，默認為false。如果該值為true，且多個對象的某個同名屬性也都是對象，則該"屬性對象"的屬性也將進行合并。
target    Object類型目標對象，其他對象的成員屬性將被復(fù)制到該對象上。 object1    可選/Object類型第一個被合并的對象。
objectN    可選/Object類型第N個被合并的對象。
個人理解extend的作用就是把好多對象合并到一個對象里面，目前有三個以上參數(shù)，第一個是否深度合并，第二個合并到的目標，第三個被合并的對象，三個以后同第三個以此類推，通常只寫一種參數(shù)即可：合并的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);

結(jié)果：

如果要合并到j(luò)query對象中上面的$.extend(f,{a,b,c})需要把f改為$或者jquery,也可以直接省略該參數(shù)$.extend({a,b,c})，開發(fā)中就可以直接使用$.extend({a,b,c}),這樣就可以對jq全局對象進行添加方法了.

一般開發(fā)中都是對某個實例進行添加方法，再看下第一天的test代碼

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

都是基于fn實例上添加方法，所以使用$.fn.extend（插件開發(fā)經(jīng)常使用）
對上面的方法進行改寫：

 (function($){
 $.fn.extend({
     isnum:function(str){
         this.val((+str||str==0)?(+str):NaN);
     },
     isNaN:function(){
         //…………
     }
  })
 
})(jQuery)
$("input").isnum("test")
總結(jié)： 
在封裝插件時常用$.fn.extend（對dom操作時）.在封裝像parsInt這樣的方法時候適用于$.extend

上面差不多就滿足了插件復(fù)用的基本需求了，但是，當你想在原來基礎(chǔ)上添加內(nèi)容，或者修改變量時，就需要傳參來解決了。

寫個測試：給文檔div設(shè)置高度，寬度，背景及自定義css
html:

1
2
3
4

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來初始化默認數(shù)據(jù)（即沒有傳參的默認狀態(tài)），然后將opions形參合并到settins，最后作用到css中，所以在實例中添加參數(shù)就可以合并到settings中，完成自定義css，而且繼續(xù)傳參數(shù)會代替前面初始設(shè)置的值。

封裝 
(function(){
    $.extend({
    //變量在數(shù)組中是否存在，存在的位置
        areArray(b,arr){
            for(var i in arr){
                if(arr[i] == b){
                     return arr[i]+"所在位置"+i;
                }
            }
        },
        unrepeat(arr){
        //unrepeat 數(shù)組去重，返回去重后的數(shù)組
            for(var i =0;i

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90107.html

相關(guān)文章

  • 原生js造輪子之模仿JQ的slideDown()與slideUp()

    摘要：代碼如下原生調(diào)用該文件中加入這一行代碼參數(shù)參數(shù)時間調(diào)用該文件加入這一行代碼中引入綁定到實例原型上組件中調(diào)用鄙人創(chuàng)建了一個群，供大家學(xué)習交流，希望和大家合作愉快，互相幫助，交流學(xué)習，以下為群二維碼 代碼如下: const slider = (function() { var Slider = {}; // the constructed function,timeManager,...

    王笑朝 評論0 收藏0

  • 原生js造輪子之模仿JQ的slideDown()與slideUp()

    摘要：代碼如下原生調(diào)用該文件中加入這一行代碼參數(shù)參數(shù)時間調(diào)用該文件加入這一行代碼中引入綁定到實例原型上組件中調(diào)用鄙人創(chuàng)建了一個群，供大家學(xué)習交流，希望和大家合作愉快，互相幫助，交流學(xué)習，以下為群二維碼 代碼如下: const slider = (function() { var Slider = {}; // the constructed function,timeManager,...

    RancherLabs 評論0 收藏0

  • 手摸手，帶你封裝一個vue component

    摘要：靈活性和針對性。所以我覺得大部分組件還是自己封裝來的更為方便和靈活一些。動手開干接下來我們一起手摸手教改造包裝一個插件，只要幾分鐘就可以封裝一個專屬于你的。 項目地址：vue-countTo配套完整后臺demo地址：vue-element-admin系類文章一：手摸手，帶你用vue擼后臺 系列一（基礎(chǔ)篇）系類文章二：手摸手，帶你用vue擼后臺 系列二（登錄權(quán)限篇）系類文章三：手摸手，帶...

    pkhope 評論0 收藏0

  • vue無縫滾動的插件開發(fā)填坑分享

    摘要：寫插件的初衷項目經(jīng)常需要無縫滾動效果，當時寫的時候用用這個老插件，相對不上很好用。后來轉(zhuǎn)向在沒有找到好的無縫滾動插件，除了配置可以實現(xiàn)但是相對來說太重了，于是自己造了個輪子。 寫插件的初衷 1.項目經(jīng)常需要無縫滾動效果，當時寫jq的時候用用msClass這個老插件，相對不上很好用。2.后來轉(zhuǎn)向vue在vue-awesome沒有找到好的無縫滾動插件，除了配置swiper可以實現(xiàn)但是相對來...

    岳光 評論0 收藏0

  • 用Vue搭建一個應(yīng)用盒子（二）：datetime-picker

    摘要：接著上次的進度，我們已經(jīng)實現(xiàn)了一個。我們應(yīng)該完成的效果是一個，日期選擇器。好了，到這一步，還不能實現(xiàn)這個插件。我們還需要添加一個方法，因為并沒有被執(zhí)行，所以我們需要添加如下代碼好了，這里事件選擇插件就能順利使用了。與的結(jié)合使用實例 接著上次的進度，我們已經(jīng)實現(xiàn)了一個todo-list。它已經(jīng)具備了基本的功能，可以新建、編輯、刪除任務(wù)。但是美中不足的是，它的時間設(shè)定上只能通過輸入一段字符...

    Ververica 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<