jQuery 插件編程精講與技巧

時間 2019-11-18

標籤 jquery 插件編程技巧欄目 JQuery 简体版

原文原文鏈接

適應的讀者：javascript

一、有必定的jquery編程基礎可是想在技能上有所提高的人css

二、前端開發的程序員html

三、對編程感興趣的學生前端

爲何要學習jquery插件的編寫？java

爲何要學習jquery插件的編寫？相信這是不少人都會有的問題，由於目前市面上的插件衆多基本上知足平常的開發需求，可是我認爲一下的這幾點狀況是必定要學會插件基礎才能解決的：jquery

一、若是有這樣的一種場景：假設若是你使用了一個控件，可是這個控件有缺乏了一點點的相關的功能，那麼若是你不懂jquery插件編寫的話，那麼你就只能找其餘的控件進行補充，這樣就會形成冗餘，若是你會修改jquery插件的話，那麼這樣的問題就解決了，由於你只須要修改一點點的功能就可以完成任務程序員

二、有些時候，若是你是要使用一個大型的控件（或者是框架）中的一小部分功能，那麼你就須要引入整個控件（或者是框架）這樣就會使系統過於龐大，解決的方法是若是像是制定一個對話框等這些簡單的功能的話，那麼就能夠自行定義一個以達到不是太過龐大web

三、咱們能夠把經常使用的代碼進行封裝，方便之後進行重用編程

綜上所述，通常咱們編寫jquery控件是用來封裝經常使用的代碼，也能夠對一些簡單功能進行編寫或者對某些功能進行改寫數組

基礎知識講解：

首先要學習怎麼編寫jquery插件，咱們應該瞭解有幾種調用插件的方式：

一、經過$.extend()來拓展jquery

二、經過向$.fn來想jquery添加方法

三、經過$.widget()應用jQuery UI部件工場方法建立

其中的方式1沒辦法調用選擇器，僅僅被jQuery理解成爲添加靜態方法，因此咱們使用的時候不須要選中DOM對象

示例代碼：

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="name.js"></script>
</head>
<body>
    <script type="text/javascript">
        $.nameLength('leslie');
    </script>
</body>
</html>

JavaScript代碼：

$.extend({
    nameLength:function(name){
        alert(name.length);
    }
});

運行結果以下：

其中第一種方式開發開發插件比較少見，通常的插件都是使用第二種方法進行開發的

第二種方法是：往$.fn中添加一個方法，後面所要填寫的就是方法的名稱

HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DEMO</title>
    
</head>
<body>
    <div class="test" alt="No.1">這是第一段變紅色的代碼</div>
    <div class="test" alt="No.2">這是第二段變紅色的代碼</div>
    <div>這一段代碼不變色</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script src="test1.js"></script>
<script type="text/javascript">
    $('.test').changeColor();
</script>
</html>

JavaScript代碼：

$.fn.changeColor=function(){
    this.css('color','red');
    $(this).append(" "+$(this).attr("alt"));
}

運行的結果以下：

從上面的運行結果咱們能夠得出結論：插件調用成功，可是問題來了，第二段的文字是要加上NO.2可是卻加上了No.1，這個也就是直接使用方法帶來的一個問題，就是會將全部的複合條件的內容都進行統一的設置，那麼要怎樣才能夠編程No.2呢？那就須要引入一個方法來對每個複合要求的內容進行「個性化」，引入$.each()就能夠解決問題了

將以上的JavaScript修改成：

$.fn.changeColor=function(){
    this.css('color','red');
    this.each(function(){
        $(this).append(" "+$(this).attr("alt"));
    })
    
}

運行的效果以下：

第三種方式調用這裏咱們先不進行講解，待後續會由於須要jQuery UI的基礎的朋友才能更好的理解，因此有機會將會在下一次寫插件編程對其進行詳細的解剖

鏈式調用

細心的你可能會發現，這樣編寫出來的插件不能進行鏈式調用的，也就是：不能出現：$('div').function1('param1').function2('param2')，那麼這個問題怎麼解決呢，其實很簡單隻須要在插件中支持能夠鏈式調用的方法前面加上return就能夠了

將上面的JavaScript修改以下就能夠鏈式調用了

$.fn.changeColor=function(){
    this.css('color','red');
    return this.each(function(){
        $(this).append(" "+$(this).attr("alt"));
    })
    
}

同時一個強大的插件也毫不僅僅是容許用戶對其進行調用的，同時用戶也能夠自定義的對其進行傳參，使得插件更具靈活性，這裏的傳參跟普通的函數傳參是同樣的，略過

保存用戶自定義參數

先看一下下面的代碼

HTML代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DEMO</title>
    
</head>
<body>
    <div class="default">默認的樣式</div>
    <div class="change">修改後的樣式</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script src="test1.js"></script>
<script type="text/javascript">
    $('.default').fontSet();
    $('.change').fontSet({
        'color':'green',
        'fontSize':'20px'
    });
</script>
</html>

JavaScript代碼以下：

$.fn.fontSet=function(options){
    var font={
        'color':'red',
        'fontSize':'12px'
    };
    var setting=$.extend({},font,options);
    return this.css({
        'color':setting.color,
        'fontSize':setting.fontSize
    })
}

運行狀況以下：

在JavaScript中的extend方法中添加{}是用來對防止用戶傳入的值，直接覆蓋掉默認的數值

注意：在插件中的定量必須爲鍵值對數組，不然一旦編寫錯誤的話，那麼就會出現沒辦法將插件加載進來的狀況

面向對象插件開發

在開發大型的插件的時候，若是直接像上面的這種方法同樣，那麼會致使代碼混亂，管理難度大等諸多的問題，因此就須要像常規編程同樣使代碼更便於管理，所以面向對象的插件開發也就變得格外的重要，面向對象開發的大體格式能夠以下所示：

//定義對象的構造函數
var class_name=function(ele,opt){
    this.element=ele;
    this.defaults={
        //default setting
    };
    this.options=$.exetend({},this.defaults,opt);
}
//定義對象的方法
class_name.prototype = {
     method_name:function() {
         return …………
     }
};
//在插件中使用對象
$.fn.plugin=function(){
    //建立func實體
    var func=new class_name(this,options);
    //調用其方法
    return func.method_name();
}

實戰開發經驗分享

目前市面是的插件編程琳琅滿目，可是惟獨對開發經驗這一塊說的比較少，下面就結合我對插件開發的經驗以及其餘人開發的優秀特色驚醒分析，但願讀者能夠收穫一些東西，方便之後的使用

一、在插件開發的過程當中咱們要儘可能的保證插件內部環境的獨立性，也就是說內部儘可能的不被外界干擾，這時候閉包就派上用場了，並且在閉包的前面要加上; 以防止外部的語法錯誤使得錯誤指向插件內部

基本格式以下：

;(function($){
    //main contain

})(jQuery);

二、開發中常見的方法

find(‘m’);//主要用法是獲取每一個控件下面是否存在特定class屬性或者id屬性的對象

each() //主要是用來遍歷每一個控件

each(options,function(key,value)) //獲取在options範圍內每次循環的key和value的值

each(function(i,item)) //i爲遍歷對象位於第幾個，item爲DOM

三、因爲jquery 插件是基於jquery的，那麼就要求咱們要調用jquery插件以前要先調用jquery

四、對於像KO（knockout.js）等這些腳本支持自定義的屬性值，這又是怎樣作到的呢？

例如HTML代碼中有data-name這個屬性，那麼咱們能夠在插件中定義一對默認的鍵值對爲name:'xxx'，而後通遍歷全部的default中的key值，而且調用attr屬性查找

是否存在data-key這個屬性，若是這個屬性爲undefined那麼就將其傳入value，可是上面的這些插件都是要調用JS進行激活的

若是有哪位大神知道怎樣編寫像Boostrap這樣的直接寫class就能夠的插件，請告訴我實現方法，小菜鳥不勝感激

五、在插件開發的過程當中我發現，怎樣在一個事件觸發的同時觸發另外一個事件

例如：要實現拖動的效果，那麼咱們就必須在觸發點擊事件的同時觸發鼠標移動事件，

實現的代碼簡單的能夠寫爲：

btn.mousedown(function(event) {
    /* Act on the event */
    $(document).mousemove(function(event){
        //input your content
    })
});

這樣就能夠實現兩種事件同時觸發了

六、兼容性問題也是要注意的，在CSS3中咱們要注意IE、FixFox、Chrome這些瀏覽器之間的兼容性問題，通常咱們忽略IE的那些低版本的瀏覽器，而要在FixFox前面加上-moz，例如：-moz-box-shadow 而要在Chrome前面加上-webkit，對於Safari也是同樣的，這種差別主要是內核的不一樣致使的

UI插件的編寫流程

一、先要對所要製做的UI插件進行分析，而後對其進行分層，接着就編寫對應層次的div

二、第二步，咱們要經過編寫css達到將控件的初始化狀態製做出來

三、結合要實現的效果，製做JS腳本，而且要保證無誤的狀況下才能進行第四步

四、將JS文件經過插件編程的形式重寫，這樣UI插件就完成了