如何进行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("测试");  // 输出  测试

菜鸟献丑，欢迎指正和交流