在前端飞速发展的时代，虽然jquery已经要步入暮年，但是不得不承认它曾经创造的辉煌，回到那个一个人写java写jsp页面的时候，jquery简直是神器一样的存在，灵活的api可以操作你想操作的任何dom元素，所拥有的插件也可以说是不计其数，网上随便一搜一大把jquery插件，有的人忍不住想问，到底插件是怎么写的呢，话不多说，下面来缅怀一下那些年我们曾写过的插件。

 

一、jquery插件开发的方式，这里主要写出博主最喜欢也是最常用的两种书写方式

1、通过$.extend()方法来扩展jQuery

      这种方式是用$.extend()来向jQuery添加了一个say的方法，通过$.say()就可以调用

// 向jquery添加一个say的方法
 $.extend({
     say: function(name) {
         console.log("你好啊，我叫：" + name)
     }
 })
 // 运行起来
 $(function() {
     $.say("小明")
 })

2、通过$.fn 向jQuery添加新的方法

下面这种是绑定到元素上，来对元素进行操作，并在插件内部返回了this，这样就可以实现链式调用啦，就像$(".text").changeColor().fadeOut().fadeIn();

(function() {
    $.fn.changeColor = function(options) {
        // 配置的默认插件参数
        var DEFAULTS = {
            'color': 'red',
        };
        // 使用$.extend({},arg1,arg2,...)可以合并对象到第一个{}里
        var settings = $.extend({}, DEFAULTS, options);
        // 循环每个元素，分别设置颜色
        return this.each(function() {
            $(this).css({
                color: settings.color
            })
        })
    }
})();
// 运行起来
$(function() {
    // 使用
    $(".demo").changeColor({
        color: "blue"
    });
})

 

二、以上的书写方式是最常用的简单的方式，写了两种方式，相信对插件的写法有了一个直观的认识，下面是使用bootstrap的插件思想写出来的一个完整一点的例子：

<!DOCTYPE html>
<html>

<head>
    <meta chart="utf-8" />
    <title>jquery插件例子</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        +(function ($) {
            // 使用严格模式
            'use strict';

            // 插件的默认参数配置
            const PLUGIN_DEFAULTS = {
                color: "red"
            };
            // 插件对象
            var ChangeColor = function (element, options) {
                this.$element = $(element);
                this.settings = $.extend({}, PLUGIN_DEFAULTS, options);
            };
            /*
             * 改变颜色
             */
            ChangeColor.prototype.change = function () {
                /* 这里因为在插件调用Plugin方法的时候已经new过ChangeColor这个对象，并传入了构造参数，所以在这里取的时候已经有了
                 * this.$element和this.settings的值
                 */
                this.$element.css("color", this.settings.color)
            };
            /*
             * 定义插件
             */
            function Plugin(options) {
                return this.each(function () {
                    // 当前循环中元素对象
                    var $this = $(this);
                    // 获得并合并传递的参数
                    var settings = $.extend({}, PLUGIN_DEFAULTS, $this.data(), typeof options == 'object' && options)

                    // 存储当前插件对象，因为当前是在循环里，所以ChangeColor对象只需要创建一次就够了，这里用jquery的data()方法来存储
                    var data = $this.data("changeColor");
                    if (!data) $this.data("changeColor", (data = new ChangeColor($this, settings)));

                    // 如果传递的string，则可以判断为是要调用对象的某个方法，用data[options]();即可实现调用
                    if (typeof options == "string") {
                        data[options]();
                    } else {
                        // 如果options是参数对象，则会直接调用change方法
                        data.change();
                    }
                });
            }

            // 保存旧的插件属性
            var old = $.fn.changeColor;

            // 定义插件，并重新设置插件构造
            $.fn.changeColor = Plugin;
            // 暴露类名，可以通过这个未插件做自定义扩展
            $.fn.changeColor.Constructor = ChangeColor;

            // 防止冲突处理
            $.fn.changeColor.noConflict = function () {
                $.fn.changeColor = old;
                return this;
            }
        })(jQuery);

        /*
         * 让插件例子运行起来吧
         */
        $(document).ready(function () {
            // 可以传递调用的插件方法名字
            $(".demo").changeColor("change");

            // 可以传递改变插件的参数
            $(".demo1").changeColor({
                color: "blue"
            })

        });
    </script>

</head>

<body>
    <div class="demo">通过主动调用change()方法改变颜色</div>
    <div class="demo1">传递参数改变颜色</div>
</body>

</html>