亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JQ插件封裝造輪子

BLUE / 2137人閱讀

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

JQ插件封裝第一天

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

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

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

自己寫個(gè)小例子：

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

js: 
//防止全局變量污染，影響其他插件
(function($){
    $.fn.isnum=function(str){
        //注意：操作this的時(shí)候這里已經(jīng)是$(this),請(qǐng)使用jq的操作dom的方法。
        //不能使用value,應(yīng)為val()
        //測(cè)試代碼：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插件封裝第二天

如上面如果封裝方法過(guò)多，看起來(lái)會(huì)非常亂，這時(shí)可以使用jq的extend。

jQuery.extend( target [, object1 ] [, objectN... ] )
jQuery.extend( [ deep ], target , object1 [, objectN... ] )
參數(shù)    描述
deep    可選/Boolean類型指示是否深度合并對(duì)象，默認(rèn)為false。如果該值為true，且多個(gè)對(duì)象的某個(gè)同名屬性也都是對(duì)象，則該"屬性對(duì)象"的屬性也將進(jìn)行合并。
target    Object類型目標(biāo)對(duì)象，其他對(duì)象的成員屬性將被復(fù)制到該對(duì)象上。 object1    可選/Object類型第一個(gè)被合并的對(duì)象。
objectN    可選/Object類型第N個(gè)被合并的對(duì)象。
個(gè)人理解extend的作用就是把好多對(duì)象合并到一個(gè)對(duì)象里面，目前有三個(gè)以上參數(shù)，第一個(gè)是否深度合并，第二個(gè)合并到的目標(biāo)，第三個(gè)被合并的對(duì)象，三個(gè)以后同第三個(gè)以此類推，通常只寫一種參數(shù)即可：合并的object

下面做個(gè)測(cè)試：

var a = function(){
    console.log("a");
}
var b = function(){
    console.log("b");
}
var c = function(){
    console.log("c");
}
var f = new Object;
//把a(bǔ)，b，c放到一個(gè)對(duì)象合集然后合并到f對(duì)象里
$.extend(f,{a,b,c})
console.log(f);

結(jié)果：

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

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

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

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

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

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

寫個(gè)測(cè)試：給文檔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"
        })

聲明一個(gè)變量settins來(lái)初始化默認(rèn)數(shù)據(jù)（即沒(méi)有傳參的默認(rèn)狀態(tài)），然后將opions形參合并到settins，最后作用到css中，所以在實(shí)例中添加參數(shù)就可以合并到settings中，完成自定義css，而且繼續(xù)傳參數(shù)會(huì)代替前面初始設(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90107.html

相關(guān)文章

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

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

    王笑朝 評(píng)論0 收藏0

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

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

    RancherLabs 評(píng)論0 收藏0

  • 手摸手，帶你封裝一個(gè)vue component

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

    pkhope 評(píng)論0 收藏0

  • vue無(wú)縫滾動(dòng)的插件開發(fā)填坑分享

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

    岳光 評(píng)論0 收藏0

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

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

    Ververica 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<