如何進行jquery擴展？如何編寫jquery插件？

有位牛人曾說，如果你要成爲大神，對於jquery，就不能只停留在使用階段。隨後，果斷去百度了一把，如何編寫jquery插件

有兩種方式：

• 使用jQuery原型，在jQuery對象上綁定方法
  • 直接在jQuery對象上寫方法，編寫類庫時用的原始方式
  • 使用jQuery的擴展方法（extend）
  • 自定義一個屬性，在屬性中綁定方法
• 實例化的方式，在dom元素上綁定的方法

---

1、語法結構

• 使用jQuery原型，在jQuery對象上綁定方法
  • 直接在jQuery對象上寫方法，編寫類庫時用的原始方式 

這和我們平時編寫面向對象的方式是一致的，前提是要引入jquery.js

    // 直接在類的基礎上寫 
    jQuery.方法名 = function (參數) {// 語法
        // 執行語句
    }
    jQuery.alert1 = function (value) { // 測試方法  根據參數彈出框
        alert(value);
    }
    $.alert1("測試alert1"); // 調用  彈出消息框測試alert1

• 使用jQuery的擴展方法（extend）

jq提供了一個繼承方法，如果是單個參數，則是代表把參數合併到jQuery這個對象上，也就是下面這個方法，是把函數當做一個對象體，放到jQuery對象上。extend解釋點擊我

// 通過jquery的extend方法寫
    // 語法
    jQuery.extend({ 
        方法名1: function (參數) {
            //  方法名1 執行語句
        }, 
        方法名2: function (參數) {
            //  方法名2 執行語句
        },
    });
    
    // 測試方法 
    jQuery.extend({
        alert2: function (value) {
            alert(value);
        }
    });
    // 調用
    $.alert2("測試alert1"); // 彈出消息框 測試alert1

• 自定義一個屬性，在屬性中綁定方法

相當於定義一個jQuery屬性，通過該屬性再訪問屬性裏面的內容

// 自定義命名空間（屬性）
    // 語法
    jQuery.屬性名 = { 
        方法名1: function (參數) {
            //  方法名1 執行語句
        },
        方法名2: function (參數) {
            //  方法名2 執行語句
        },
    }
    // 測試方法
    jQuery.mySpace = {
        alert3: function (value) {
            alert(value);
        }
    };
    // 調用
    $.mySpace.alert3("測試自定義命名空間（屬性）"); // 彈出測試自定義命名空間（屬性）

• 實例化的方式，在dom元素上綁定的方法

// dom上綁定方法
    // 語法
    jQuery.fn.方法名 = function(參數){
        // 執行語句
    }
    jQuery.fn.bgRed = function () {
        this.css("background-color", "red");
    }
    jQuery("#demo").bgRed(); // id=demo元素背景變紅

效果如下：

2、工作中的寫法

     //  爲什麼要用(function(jq))(jQuery);
    // 這是爲了防止定義的變量或者方法名重複，修改到jQuery源碼
    (function ($) {
        // 對象方法
        $.jqMethod = function (value) {
            // 自定義參數，json格式，用於在方法中使用
            console.log(value);
        }

        // dom 元素方法   這個地方如果要添加多個dom方法 可以藉助extend ，如下
        $.extend($.fn, {
            domMethod2: function (value) { // 方法1
                console.log(value);
            },
            domMethod3:function (option) { // 方法2
                // 執行語句
            }
    });
    })(jQuery);

    //調用
    $.jqMethod("jqMethod測試"); // 輸出jqMethod測試
    $("#demo").domMethod2("domMethod2測試"); // 輸出domMethod2測試

3、最後來個面向對象版的

// 添加一個showName 打印名稱的方法
    // 添加一個showAll  打印所有屬性的方法
    (function ($) {
        /* 創建一個 MyPlugin 對象 */
        function MyPlugin(option) {
            // 設置默認值
            this.defaults = {
                "name": "張三",
                "sex": "男",
                "age": "18"
            };
            this._init(option);
        }

        //
        MyPlugin.prototype = {
            // 初始化方法  判斷傳入是對象還是其他  對象則合併默認值
            _init: function (option) {
                if (typeof (option) === "object") {
                    this.option = $.extend({}, this.defaults, option);
                } else {
                    this.option = option || "";
                }
            },

            // 顯示名字的方法
            showNamep: function () {
                if (typeof this.option == "object") {
                    console.log("姓名：" + this.option.name);
                } else {
                    console.log("姓名：" + this.option);
                }
                return $; // 用作jQuery鏈式連接
            },

            // 顯示 姓名  性別  年齡
            showAllp: function () {
                console.log("姓名：" + this.option.name + " 性別：" + this.option.sex + " 年齡：" + this.option.age);
                return $;// 用作jQuery鏈式連接
            }
        };


        // 註冊一個dom函數
        $.fn.showName = function (option) {
            var mp = new MyPlugin(option);
            mp.showNamep();
        };

        // 註冊一個jquery對象函數
        $.showAll = function (option) {
            var mp = new MyPlugin(option);
            mp.showAllp();
        };
    })(jQuery);

    $.showAll({"name": "李四", "sex": "女"});  // 輸出   姓名：李四 性別：女 年齡：18
    $("li:last").showName({"name": "李四"}); // 輸出 姓名：李四
    $("li:last").showName("測試");  // 輸出  測試

菜鳥獻醜，歡迎指正和交流