$.fn.extend()和$.extend()的区别以及JQ插件开发

来源：互联网发布：全平台主播数据榜单编辑：程序博客网时间：2024/06/05 09:40

1. $.fn.extend()和$.extend()的区别

描述：我们可以把jQuery看成一个对象来理解，其实 $.extend()就是让我们可以为JQuery类本身添加静态方法，而$.fn.extend() 其中$.fn= jQuery.fn = jQuery.prototype (prototype 属性使我们有能力向对象添加属性和方法) 其实是让我们可以为 JQuery的类实例添加方法，比如：var obj=$("#btn") 表示一个jQuery获取的实际对象实例，这个时候obj就可以调用$.fn.extend()实现的方法。

ps：用Java类的思想来理解就是，$.fn.extend()实现的非静态方法，必须要有对象实例才能调用；而$.extend()实现的是静态方法，在类初始化的时候就以及调用了。

so: $.fn.extend()实用于定义插件，$.extend()实用于扩展全局通用的JQuery函数，应用于全局。

2. 插件开发的实例

2.1)插件代码：

/**
 * Created by Andy Lau on 2017/8/7.
 */
(function($) {
    $.fn.btnStyle = function (options) {
        var defOption = {
            "backgroundColor": "#000",
            "fontSize": 14,
            "color": "#fff",
            "border": "none",
            "borderRadius": "5px",
            "width": "120px",
            "height": "48px",
            "textAlign": "center",
            "lineHeight": "48px"
        };
        //如果用户输入参数为空，我们添加默认值
        $.each(defOption, function (k, v) {
            if (options[k] == null) {
                options[k] = v;
            }
        });
        //设置按钮颜色
        this.css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px").css("color", options.color).css("border", options.border).css("border-radius", options.borderRadius).css("width", options.width).css("height", options.height).css("text-align", options.textAlign).css("line-height", options.lineHeight);
        return this;
    };
})(jQuery);

2.2)插件的使用

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <script type="application/javascript" src="jquery-3.2.1.js"></script>
    <script type="application/javascript" src="plugin.js"></script>
</head>
<body>
    <div style="width: 100%;margin: 60px auto 0;padding-left: 60px">
        <div class="custom-btn">按钮</div>
    </div>
</body>
</html>
<script>
    $(".custom-btn").btnStyle(
        {
            "backgroundColor":"#6f00d2",
            "color":"yellow"
    });
</script>

2.3)实现效果

3.插件开发一步一步完美

3.1 满足链式调用

什么是链式调用呢，比如我们前面实例实例中的代码

this.css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px")

因为有时候我们在定义插件以后，开发者可能需要添加其他的jq方法，如何能实现开发者链式添加就很方便了，比如代码如下：

<script>
    $(".custom-btn").btnStyle(
        {
            "backgroundColor":"#6f00d2",
            "color":"yellow"
    }).addClass("className");
</script>

我们还想添加一个class类或者其他操作，开发者就可以x像上面那样使用

3.2 防止$符号污染

$符号污染的关键点在于作用域的问题，其实一开始那个插件我们可以这么些：

    $.fn.btnStyle = function (options) {
        var defOption = {
            "backgroundColor": "#000",
            "fontSize": 14,
            "color": "#fff",
            "border": "none",
            "borderRadius": "5px",
            "width": "120px",
            "height": "48px",
            "textAlign": "center",
            "lineHeight": "48px"
        };
        //如果用户输入参数为空，我们添加默认值
        $.each(defOption, function (k, v) {
            if (options[k] == null) {
                options[k] = v;
            }
        });
        //设置按钮颜色
        this.css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px").css("color", options.color).css("border", options.border).css("border-radius", options.borderRadius).css("width", options.width).css("height", options.height).css("text-align", options.textAlign).css("line-height", options.lineHeight);
        return this;
    };

上面这样写插件的问题在于$符号没有局限于本插件中，可能你的工程下还引用了其他的jq插件，这个时候就有可能影响该插件中的$符号的使用，如果不是很理解"作用域"，可以单独去学习了解一下。

3.3 $.fn.extend()定义插件的使用

前面我们使用的是 $.fn.方法名=function(params) 来定义插件,他的局限在于只能定义一个方法，但是我们一开始是说用$.fn.extend()来定义插件方法的，下面就是用这种形式来定义的，你可以看见他的优势在于你可以在内部定义多个方法（注意：方法用"，"分割）。

(function ($) {
    $.fn.extend({
        //方法一
        btnStyle:function (options) {
            var defOption = {
                "backgroundColor": "#000",
                "fontSize": 14,
                "color": "#fff",
                "border": "none",
                "borderRadius": "5px",
                "width": "120px",
                "height": "48px",
                "textAlign": "center",
                "lineHeight": "48px"
            };
            //如果用户输入参数为空，我们添加默认值
            $.each(defOption, function (k, v) {
                if (options[k] == null) {
                    options[k] = v;
                }
            });
            //设置按钮颜色
            this.css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px").css("color", options.color).css("border", options.border).css("border-radius", options.borderRadius).css("width", options.width).css("height", options.height).css("text-align", options.textAlign).css("line-height", options.lineHeight);
            return this;
        },
        //方法二
        newMethod:function () {
        }
    })
})(jQuery);

其实你还可以用对象的概念来设计你的插件比如像下面这样：

(function ($) {
    $.fn.extend({
        initBtn:function(opt) {
            //判断传入参数类型是否为object类型
            if (typeof opt != "object") {
                alert('参数错误!');
                return;
            }
            //判断是否和button设置了id
            var id = $(this).attr("id");
            if(id==null||id==""){
                alert("要设定一个id!");
            }
            //将默认参数和传入参数合并，没有设定的参数以默认值为标准
            $.each(btnTool.getDefaultData(id), function (key, value) {
                if (opt[key] == null) {
                    opt[key] = value;
                }
            });
            //设置button的样式
            btnTool.btnStyle(opt)
        }
    });
})(jQuery);
/*
* 定义一个btnTool的类
* 其中定义getDefaultData(id)和btnStyle(options)两个方法
* */
var btnTool={
    "getDefaultData":function (id) {
        var defOption = {
            "obj":id,
            "backgroundColor": "#000",
            "fontSize": 14,
            "color": "#fff",
            "border": "none",
            "borderRadius": "5px",
            "width": "120px",
            "height": "48px",
            "textAlign": "center",
            "lineHeight": "48px"
        };
        return defOption;
    },
    "btnStyle":function (options) {
        //设置按钮颜色
        $("#"+options.obj).css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px").css("color", options.color).css("border", options.border).css("border-radius", options.borderRadius).css("width", options.width).css("height", options.height).css("text-align", options.textAlign).css("line-height", options.lineHeight);
        return this;
    }
};

调用方式类似，代码如下：

<script>
    $("#customBtn").initBtn(
        {
            "backgroundColor":"#6f00d2",
            "color":"yellow"
        });
</script>

阅读全文

0 0