jquery web插件实现(二)

本文介绍了jQuery实现Web插件的实践,通过分析一个小型的Demo,展示了不同的编写方法。作者指出JS部分仍有优化空间,并鼓励读者提出改进意见。同时,文章提到插件的灵感来源于网络上某个jQuery插件源码,欢迎大家交流讨论。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jquery web插件实现

https://blog.youkuaiyun.com/sunnylinner/article/details/79041333

没有内容上的联系,但是实现的都是同一个小demo,其中的写法有比较大的不同

这是html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/assets/jquery/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="test7.js"></script>
    <style>

    </style>
</head>
<body>

    <div id="my-widget1"></div>

</body>

<script>
    $(function () {
        $("#my-widget1").colorize({
            red: 60, blue: 60
        });
    })
</script>

</html>

这是js页面,js的话应该还有些可以改进的地方希望有大佬求指出_(:з」∠)_)。需要说明的是,下面的写法思路来自网上某jquery插件的源码。

(function ($, window, document, undefined) {
    var pluginName = "colorizeBox", defaults = {
        red: 255,
        green: 0,
        blue: 0,
        disabled: false
    };

    function ColorizeBox(element, options) {
        this.element = $(element);
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    function refresh(colorBox) {
        colorBox.elements.customColorize.css("background-color", "rgb(" +
            colorBox.settings.red + "," +
            colorBox.settings.green + "," +
            colorBox.settings.blue + ")"
        );
    }

    function changeVerify(colorBox) {
        return colorBox.settings.disabled;
    }

    function bindEvents(colorBox) {
        colorBox.elements.customColorizeChanger.on("click", function () {
            colorBox.colorChange();
        })
    }

    ColorizeBox.prototype = {
        init: function () {
            this.container = $("" + '<div><div class="custom-colorize">改变颜色<button class="custom-colorize-changer">改变</button></div></div>').insertBefore(this.element);
            this.elements = {
                customColorize: $(".custom-colorize", this.container),
                customColorizeChanger: $(".custom-colorize-changer", this.container)
            };
            this.elements.customColorize.css({"font-size":"20px","position":"relative","width":"75px","height":"75px"});
            this.elements.customColorizeChanger.css({"font-size":"10px","position":"absolute","right":"0","bottom":"0"});
            this.element.hide();
            bindEvents(this);
            refresh(this);
            return this.element;
        }, colorChange: function () {
            if (changeVerify(this) === false) {
                var colors = {
                    red: Math.floor(Math.random() * 256),
                    green: Math.floor(Math.random() * 256),
                    blue: Math.floor(Math.random() * 256)
                };
                this.settings = $.extend({}, this.settings, colors);
                refresh(this);
            }
        }, changeTrigger: function () {
            this.settings.disabled = (this.settings.disabled === false);
        }
    };

    $.fn[pluginName] = function (options) {
        var args = arguments;
        if (options === undefined || typeof options === "object") {
            return this.each(function () {
                if (!$(this).is("div")) {
                    $(this).find("div").each(function (index, item) {
                        $(item).colorizeBox(options);
                    })
                } else {
                    if (!$.data(this, "plugin_" + pluginName)) {
                        $.data(this, "plugin_" + pluginName, new ColorizeBox(this, options));
                    }
                }
            })
        } else {
            if (typeof options === "string" && options[0] !== "_" && options !== "init") {
                var returns;
                this.each(function () {
                    var instance = $.data(this, "plugin_" + pluginName);
                    if (instance instanceof  ColorizeBox && typeof instance[options] === "function") {
                        returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1))
                    }
                });
                return returns !== undefined ? returns : this;
            }
        }
    }
})(jQuery, window, document);
(function (root, factory) {
   if (typeof exports === "object") {
       module.exports = factory(root , require("jquery"))
   } else {
       if (typeof define === "function" && define.amd) {
           define(["jquery"], function (jQuery) {
               return factory(root, jQuery)
           })
       } else {
           factory(root, root.jQuery)
       }
   }
}(this, function(window, $, undefined) {
    $.fn.colorize = function (options) {
        var box = this.colorizeBox(options);
        return box;
    }
}));

如果有什么问题,欢迎骚扰 ( ̄▽ ̄)/,时间过去太久就可能忘记了φ(>ω<*) 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值