javaScript學習總結（二）——jQuery插件的開發

時間  2019-11-10
標籤 javascript 學習 總結 jquery 插件 開發 欄目 JavaScript 简体版
原文   原文鏈接

概要javascript

jQuery插件就是以jQuery庫爲基礎衍生出來的庫，jQuery插件的好處是封裝功能，提升了代碼的複用性，加快了開發速度，如今網絡上開源的jQuery插件很是多，隨着版本的不停迭代愈來愈穩定好用，在jQuery官網有許多插件：http://plugins.jquery.com/css

1、插件開發基礎

1.一、$.extend

在jQuery根命名空間下直接調用的方法能夠認爲是jQuery的靜態方法或屬性，經常使用方法名來調用，使用.方法名來調用，使用.extend這個靜態方法能夠完成兩個功能：html

1.1.一、擴展屬性或方法給jQuery

好比咱們想給jQuery擴展一個用於快速向控制檯寫入日誌的工具方法log，而不須要使用console.log且在沒有console.log的瀏覽器中使用其它的方法替代：java

複製代碼 
        <script src="js/jQuery1.11.3/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $.extend({
                log: function(message) {
                    console.log(message);
                }
            });

            $.log("控制檯日誌");
        </script>
複製代碼

運行結果：node

1.1.二、擴展對象

複製代碼 
            var x={a:1};
            var y={a:2,b:3};
            var z={b:4,c:5};
            //使用第2個及後的對象擴展前面的對象，若是有則覆蓋
            $.extend(x,y,z);
            $.log(x.a+","+x.b+","+x.c);
複製代碼

運行結果： jquery

除了能夠擴展對象的屬性，方法也能夠擴展。git

1.二、$.fn.extend

.fn就是jQuery的原型，.fn就是jQuery的原型，.fn等於jQuery.prototype，是jQuery的別名。是jQuery的別名。.fn.extend方法的做用是用於擴展jQuery實例對象，也就是咱們從頁面中得到的jQuery對象。github

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>extend</title>
    </head>
    <body>
        <button>按鈕1</button>
        <button>按鈕2</button>
        <input type="text" value="username"/><input type="text" value="password"/>
        <script src="js/jQuery1.11.3/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        $.fn.extend({
            show:function(){
                $(this).click(function(){
                    alert($(this).val()||$(this).html());
                });
            },
            log:function(){
                console.log($(this).val()||$(this).html());
            }
        });
        $("button").show();
        $("input[type=text]").log();
        </script>
    </body>

</html>
複製代碼

運行結果：npm

1.三、$.fn

在上面的示例中咱們經過編程

.fn擴展了jQuery的原型，讓所有的jQuery實例對象都得到的擴展的方法，其它也可以直接修改jQuery.prototype來實現，.fn擴展了jQuery的原型，讓全部的jQuery實例對象都獲得的擴展的方法，其它也能夠直接修改jQuery.prototype來實現，.fn是jQuery.prototype的簡寫，源代碼以下：

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>extend</title>
    </head>
    <body>
        <button id="btn1">按鈕1</button>
        <button>按鈕2</button>
        <input type="text" value="username"/><input type="text" value="password"/>
        <script src="js/jQuery1.11.3/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
           $.fn.bgColor=function(color){
                   this.css("background",color);
           }
           
           jQuery.prototype.color=function(color){
               this.css("color",color);
           }
           
           $("button,input").bgColor("lightGreen");
           $("button,input").color("red");
        </script>
    </body>
</html>
複製代碼

運行結果：

2、插件開發

2.一、jQuery插件開發基本模式

jQuery插件開發的基本模式須要有一個私有的塊級做用域，通常經過IIFE實現，在1.3中的示例是存在問題，因他它直接暴露在根命名空間下，可使用以下辦法解決：

複製代碼 
            ;(function(method) {
                method(window, window.document, jQuery);
            }(function(win, doc, $) {
                console.log("這是一個私有的塊級做用域，IIFE");

                $.fn.yourPluginName = function(options) {

                }
            }));
複製代碼

前置的分號是爲了與插件使用前的代碼劃清界線；兩個IIFE表達式的做用是：一個爲了當即執行且造成一個私有的塊級做用域，另外一個是爲了將後置的參數前置，方便看到IIFE執行時帶的參數。帶參數的目的是爲了加快查找的速度，提高性能。

插件的命名：

固然一個好的插件應該有一個容易記住且規範的名稱，能見名知意且不與別的插件同名衝突，文件的基本命名規範以下：

jQuery.YourPluginName-1.5.js 源代碼

jQuery.YourPluginName-1.5.min.js 壓縮代碼

2.二、獲取上下文

插件方法執行範圍內能夠直接經過this關鍵字獲得上下文，這裏的this就是一個jQuery對象，無需使用$(this)將DOM轉換成jQuery對象。

複製代碼 
            ;
            (function(method) {
                method(window, window.document, jQuery);
            }(function(win, doc, $) {
                console.log("這是一個私有的塊級做用域，IIFE");

                $.fn.myPlugin = function(options) {
                    this.css({ //this是一個jQuery對象
                        "color": "blue"
                    });
                }
            }));

            $("button").myPlugin();
複製代碼

運行結果：

上面的示例中是講.fn的形式擴展，如果使用.fn的形式擴展，若是使用.fn.extend狀況仍是同樣嗎？

複製代碼 
            ;
            (function(method) {
                method(window, window.document, jQuery);
            }(function(win, doc, $) {
                console.log("這是一個私有的塊級做用域，IIFE");

                $.fn.extend({
                    myPlugin2: function(options) {
                        this.css({ //this是一個jQuery對象
                            "background": "lightgreen"
                        });
                    }
                });
            }));
            $("button").myPlugin2();
複製代碼

運行結果：

可見.fn與.fn與.fn.extend兩種方法中的this都是指jQuery對象，這也符合this指向調用他的對象的原則。

2.三、第一個jQuery插件

這是一個Hello World示例，完成一個能夠變長的元素插件，指定每次增長長度參數，在指定的HTML元素後增長一個加號點擊加號能夠將元素加寬指定長度。

jQuery.SuperPlus-1.0.js文件內容以下：

複製代碼 
;
(function(method) {
    method(window, window.document, jQuery);
}(function(win, doc, $) {
    $.fn.SuperPlus = function(length) {
        
        $.each(this, function(index, obj) {
            $("<span/>").html("+").css("cursor", "pointer").click(function() {
                $(obj).width($(obj).width() + length);
            }).insertAfter(obj);
        });

    }
}));
複製代碼

HTML頁面：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery插件</title>
    </head>
    <body>
        <button>按鈕1</button><br />
        <button>按鈕2</button><br />
        <input type="text" value="username" /><br />
        <input type="text" value="password" />
        <script src="js/jQuery1.11.3/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/SuperPlus/jQuery.SuperPlus-1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $("button").SuperPlus(10);
            $("input").SuperPlus(50);
        </script>
    </body>

</html>
複製代碼

運行結果：

插件中使用each的緣由是jQuery選擇器選擇的內容默認就是一個包裝集，中間有多個元素，包裝集中含有多個DOM元素，each中的元素就再也不是jQuery對象而是一個DOM對象。

練習：$("#div1,#div2").superDiv(50,50,3,"blue");在div1與div2中都添加3個長50，寬50的div，設置背景色爲藍色，點擊時div消失，添加的div要求橫向排列，間隔爲寬高的1/10。

$("#div1,#div2").superDiv({width:50,height:50,color:"red",before:function(){},after:function(){}});

插件代碼：

;
(function(method){
    method(window,window.document,jQuery);
}(function(win,doc,$){
    $.fn.AdddivPlugin=function(options){
        var setting={
            w:60,
            h:60,
            n:3,
            color:"lightgreen",
            before:null,
            after:null
        };
        $.extend(setting,options);
        
        return $.each(this, function(index,obj) {
            for (var i=0;i<setting.n;i++) {
                $("<div>").css("width",setting.w).css("height",setting.h).css("background",setting.color).css("margin",setting.w/10).css("float","left").click(function(){
                    if(setting.before){
                        setting.before($(obj));
                    }
                    $(this).css("visibility","hidden");
                    if(setting.after){
                        setting.after($(obj));
                    }
                }).appendTo(obj);
            }
        });
    }
}));

頁面代碼：

<div id="div1"></div>
        <div id="div2"></div>
        
        <script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
        <script type="text/javascript" src="js/myPlugins/jQuery.Plugin-1.1.js" ></script>
        <script type="text/javascript">
            $("#div1,#div2").AdddivPlugin({w:50,h:50,n:5,color:"lightgreen",
                before:function(){
                    alert("你將隱藏該div");
                },
                after:function(){
                    alert("div已經隱藏了");
                }
            });
        </script>

運行結果：

2.四、鏈式編程

幾乎在全部基於「類型」的語言中若是調用一個方法後將對象做爲方法參數返回則就會造成鏈式編程，如：

複製代碼 
        return $.each(this, function(index, obj) {
            $("<span/>").html("+").css("cursor", "pointer").click(function() {
                $(obj).width($(obj).width() + length);
            }).insertAfter(obj);
        });
複製代碼

上面的示例中當$.each循環完成後返回this對象，返回的仍然是一個jQuery對象，因此能夠繼續jQuery編程。

$("button").SuperPlus(10).height(26).width(100).css("color","blue");

運行結果：

2.五、參數與默認值

參數是插件對外部提供的接口，靈活的參數會讓插件變得使用方便，這裏主要從3個方面來說參數：

2.5.一、默認值

最好爲每一個參數提供默認值，有缺省的默認值會減小錯誤，如：

$("input").SuperPlus();

這樣沒有提供參數，點擊時沒有任何效果，也沒有錯誤提示，應該給參數增長一個默認值，如：

複製代碼 
;
(function(method) {
    method(window, window.document, jQuery);
}(function(win, doc, $) {
    $.fn.SuperPlus = function(length) {
        length=length||3;
        return $.each(this, function(index, obj) {
            $("<span/>").html("+").css("cursor", "pointer").click(function() {
                $(obj).width($(obj).width() + length);
            }).insertAfter(obj);
        });

    }
}));
複製代碼

length=length||3意思是若是用戶沒有提供參數則length的值爲3。

2.5.二、參數對象

上面的示例中只有一個參數，直接做爲方法的參數沒有任何問題，但若是參數很是多，且都要默認值，處理就很麻煩，最好的辦法是使用參數對象：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery插件</title>
    </head>
    <body>
        <button>按鈕1</button><br />
        <button>按鈕2</button><br />
        <input type="text" value="username" /><br />
        <input type="text" value="password" />
        <script src="js/jQuery1.11.3/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/SuperPlus/jQuery.SuperPlus-1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $("button").SuperPlus({
                length: 100
            });
            
            $("input").SuperPlus({
                color: "red"
            });
        </script>
    </body>
</html>
複製代碼

插件：

複製代碼 
;
(function(method) {
    method(window, window.document, jQuery);
}(function(win, doc, $) {
    $.fn.SuperPlus = function(options) {
        //默認參數
        var setting={
            length:3,
            color:"blue"
        };
        //使用用戶的參數覆蓋默認參數
        $.extend(setting,options);
        
        return $.each(this, function(index, obj) {
            $("<span/>").html("+").css("cursor", "pointer").css("color",setting.color).click(function() {
                $(obj).width($(obj).width() + setting.length);
            }).insertAfter(obj);
        });
        
    }
}));
複製代碼

運行結果：

2.5.二、參數類型

參數對象的類型但是屬性，方法，對象，數組等多種形式，也可使用回調方法，好比這裏咱們要爲插件增長一個執行後的事件changeAfter，當目標元素被修改後觸發。

修改後的插件：

複製代碼 
;
(function(method) {
    method(window, window.document, jQuery);
}(function(win, doc, $) {
    $.fn.SuperPlus = function(options) {
        //默認參數
        var setting={
            //每次增長的長度
            length:3,
            //加號的顏色
            color:"blue",
            //回調事件，點擊後執行
            changeAfter:null   
        };
        //使用用戶的參數覆蓋默認參數
        $.extend(setting,options);
        
        return $.each(this, function(index, obj) {
            $("<span/>").html("+").css("cursor", "pointer").css("color",setting.color).click(function() {
                $(obj).width($(obj).width() + setting.length);
                //若是用戶指定了回調事件
                if(setting.changeAfter)
                {
                    //執行用戶帶入的方法將當前對象做爲參數帶出
                    setting.changeAfter($(obj));
                }
            }).insertAfter(obj);
        });
    }
}));
複製代碼

HTML頁面：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery插件</title>
    </head>
    <body>
        <button>按鈕1</button><br />
        <button>按鈕2</button><br />
        <input type="text" value="username" /><br />
        <input type="text" value="password" />
        <script src="js/jQuery1.11.3/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/SuperPlus/jQuery.SuperPlus-1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $("button").SuperPlus({
                length: 100,
                changeAfter:function(obj){
                    //若是長度超過300則變成100
                    if($(obj).width()>300){
                        $(obj).width(100);
                    }
                }
            });
            
            $("input").SuperPlus({
                color: "red"
            });
        </script>
    </body>
</html>
複製代碼

運行結果：

2.六、命名空間與面向對象

給插件正確的命名空間是很是重要要的，這樣能夠避免和其它插件或代碼衝突，可使用閉包，模塊等方法實現。按照jQuery的約定，只使用一個命名空間。

在插件中儘可能只使用jQuery.fn下的一個名稱，名稱越多衝突的可能性就越大，成熟的插件會作衝突處理，就像多個jQuery庫共存的道理是同樣的。

另外對於複雜的插件儘可能將代碼封裝，不要使用函數式的編程方式，能夠經過構造函數，IIFE，原型繼承等方法達到目的。

2.七、插件與關聯的CSS

若是插件中會使用到大量的CSS樣式，則不推薦使用jQuery的方式去添加樣式，應該作成一個插件單獨使用CSS文件，命名能夠參考以下方式：

jQuery.YourPluginName-1.5.css 樣式

樣式必定要注意不要修改與插件無關的元素，甚至連CSSReset都不該該有，推薦使用一個相對不易衝突的名稱全部的樣式都在該類樣式下，注意ID樣式是不容許重複的，由於要考慮一個頁面中同時使用多個插件實例的狀況。

2.八、壓縮與混淆

壓縮爲是了減少插件的體積。JavaScript的速度分爲兩種，下載速度和執行速度。要想JavaScript的下載速度快，就須要儘可能減小JavaScript文件的大小，另外，把多個JavaScript文件合併成一個也能減小服務器的響應次數而加快網頁下載。

能夠經過對javascript的變量名稱和過程名稱進行編碼，從而起到混淆JavaScript代碼的做用，保護您的勞動成果。

其實高強度壓縮就是很好的混淆，如將變量名稱都換成a,b,c等沒有意義的字符。

2.8.一、在線壓縮與混淆

網絡中有不少提供在線壓縮的工具，若是僅是少許，臨時的壓縮在線壓縮與指鹿爲馬常方便的，如：

能夠搜索「javascript在線壓縮」就會有不少網站提供在線，免費的服務。

2.8.二、工具壓縮與混淆

可使用GUI工具也可使用命令行，GUI工具操做很是簡單，這裏主要講基於node.js的工具UglifyJS的使用。 

UglifyJS是UglifyJS2的前身，是一個Javascript開發的通用的語法分析、代碼壓縮、代碼優化的一個工具包。UglifyJS是基於Nodejs環境開發，支持CommonJS模塊系統的任意的Javascript平臺。

UglifyJS2的安裝：

npm install uglify-js -g

合併壓縮：

uglifyjs a.js b.js c.js -o d.js

將a.js、b.js與c.js文件合併後壓縮到d.js中

混淆：

在原參數上增長-m能夠將變量名稱替換成a,b,c等沒有意義的變量。

壓縮的辦法有多個還可使用IDE中的插件：

命令參數詳細：

複製代碼 
–source-map [string]，生成source map文件。
–source-map-root [string], 指定生成source map的源文件位置。
–source-map-url [string], 指定source map的網站訪問地址。
–source-map-include-sources，設置源文件被包含到source map中。
–in-source-map，自定義source map，用於其餘工具生成的source map。
–screw-ie8, 用於生成徹底兼容IE6-8的代碼。
–expr, 解析一個表達式或JSON。
-p, –prefix [string], 跳過原始文件名的前綴部分，用於指定源文件、source map和輸出文件的相對路徑。
-o, –output [string], 輸出到文件。
-b, –beautify [string], 輸出帶格式化的文件。
-m, –mangle [string], 輸出變量名替換後的文件。
-r, –reserved [string], 保留變量名，排除mangle過程。
-c, –compress [string], 輸出壓縮後的文件。
-d, –define [string], 全局定義。
-e, –enclose [string], 把全部代碼合併到一個函數中，並提供一個可配置的參數列表。
–comments [string], 增長註釋參數，如@license、@preserve。
–preamble [string], 增長註釋描述。
–stats, 顯示運行狀態。
–acorn, 用Acorn作解析。
–spidermonkey, 解析SpiderMonkey格式的文件，如JSON。
–self, 把UglifyJS2作爲依賴庫一塊兒打包。
–wrap, 把全部代碼合併到一個函數中。
–export-all, 和–wrap一塊兒使用，自動輸出到全局環境。
–lint, 顯示環境的異常信息。
-v, –verbose, 打印運行日誌詳細。
-V, –version, 打印版本號。
–noerr, 忽略錯誤命令行參數。
複製代碼

2.九、發佈插件

2.9.一、將插件發佈到GitHub上
首先你須要將插件代碼放到GitHub上建立一個Service Hook，這樣作的目的是你之後更新的插件後，jQuery能夠自動去獲取新版本的信息而後展現在插件中心的頁面上。

先在github上建立一個倉庫：

將插件提交到GitHub中：

2)、製做清單文件

而後須要製做一個JSON格式的清單文件，其中包括關於插件的基本信息，具體格式及參數能夠在jQuery官網插件發佈指南頁面瞭解到，這裏提供一個示例文件，是我以前寫的一個jQuery插件SlipHover

這裏參考jQuery官網的設置指南：http://plugins.jquery.com/docs/publish/

The jQuery Plugins Registry will look in the root level of your repository for any files named *.jquery.json. You will want to create *yourplugin*.jquery.json according to the package manifest specification. Use an online JSON verifier such as JSONlint to make sure the file is valid. You are now ready to publish your plugin!

在插件項目的根目錄下添加一個名稱爲「插件名.jquery.json」的清單文件；清單文件能夠參考package manifest specification，清單文件是一個json格式的文件，編寫好以後可使用JSONlint驗證格式，確保沒有錯誤。

SuperPlus.jquery.json

複製代碼 
{
    "name": "SuperPlus",
    "title": "jQuery SuperPlus",
    "description": "jQuery plugin for HTML Element.",
    "keywords": [
        "super",
        "plus",
        "element"
    ],
    "version": "1.0.0",
    "author": {
        "name": "South IT College class NO1 of UED",
        "url": "https://github.com/zhangguo5/SuperPlus/blob/master/AUTHORS.txt"
    },
    "maintainers": [
        {
            "name": "South IT College class NO1 of UED",
            "email": "2676656856@qq.com",
            "url": "http://best.cnblogs.com"
        }
    ],
    "licenses": [
        {
            "type": "MIT",
            "url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
        }
    ],
    "bugs": "https://github.com/zhangguo5/SuperPlus/issues",
    "homepage": "https://github.com/zhangguo5/SuperPlus",
    "docs": "https://github.com/zhangguo5/SuperPlus",
    "download": "https://github.com/zhangguo5/SuperPlus/tree/master/dest",
    "dependencies": {
        "jquery": ">=1.5"
    }
}
複製代碼

編輯完成清單文件能夠在線驗證：

2.9.二、GitHub Service Hook

1)、在項目的根目錄下，點擊右上角的設置「settings」->"Integrations&services"

2)、在Add Service中輸入jQuery Plugin

接下來會提示登陸，輸入密碼，登陸成功後激活就完成。

搜索：

 3、jQuery的相關學習視頻

一、 視頻下載：

https://pan.baidu.com/s/1hsJtb0K 密碼：m7bt

二、 B站直接觀看：

http://www.bilibili.com/video/av9205766/?from=search&seid=5595908124286890857

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程