JQ插件封裝造輪子

BLUE 發布于2019-08-21 17:51 / 2085人閱讀

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

JQ插件封裝第一天

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

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

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

自己寫個小例子：

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

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:

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:

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

GPU云服務器云服務器造輪子 jq插件 jq滾動條插件 jq彈出層插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90107.html

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

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

王笑朝 2019-08-29 17:18 評論0 收藏0
原生js造輪子之模仿JQ的slideDown()與slideUp()

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

RancherLabs 2019-08-26 13:22 評論0 收藏0
手摸手，帶你封裝一個vue component

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

pkhope 2019-08-20 15:48 評論0 收藏0
vue無縫滾動的插件開發填坑分享

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

岳光 2019-08-22 14:04 評論0 收藏0
用Vue搭建一個應用盒子（二）：datetime-picker

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

Ververica 2019-08-26 11:32 評論0 收藏0