jquery webプラグイン実装

まずこれは小さなdemoで、いくつかの機能を実現することを試みました.
これはhtmlページです.

    
    
    
    




    
    
    
    
    
    
    
    
       disable   
        



    $(function () {
        $("#my-widget1").colorize({
            red: 60, blue: 60
        });
        $("#my-widget2").colorize();
        $("#my-widget3").colorize({
            green: 128
        });
        $("#my-widget3").colorize({
            red: 60, blue: 60
        });
        $("#disable").click(function () {
            $(".custom-colorize").each(function () {
                if ($(this).colorize("option", "disabled")) {
                    $(this).colorize("enable");
                } else {
                    $(this).colorize("disable");
                }
            });
        });
        $("#black").click(function () {
            $(".custom-colorize").each(function () {
                $(this).colorize({
                    red: 0,
                    green: 0,
                    blue: 0
                });
            });
        });
    })

これはjsページです(前述のtest 5.jsですが、なぜ5なのでしょうか.これは私が試した5番目のバージョンですから).jsの場合、コード冗長性やプラグインの属性定義フォーマットなど、改善点がたくさんあります.

(function (factory) {
    if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
        // AMD CMD
        define([ "jquery" ],factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function( root, jQuery ) {
            if ( jQuery === undefined ) {
                if ( typeof window !== 'undefined' ) {
                    jQuery = require('jquery');
                } else {
                    jQuery = require('jquery')(root);
                }
            }
            factory(jQuery);
            return jQuery;
        };
    } else {
        //Browser globals
        factory(jQuery);
    }
}(function ($) {

    var Plugin = function (element, options) {
        this.element = element;
        this.options = options;
    };

    Plugin.prototype = {
        console: function () {
            console.log(this.element);
            console.log(this.options);
        },
        getElement: function () {
            return this.element
        },
        setElement: function (element) {
            this.element = element;
        },
        getOptions: function () {
            return this.options
        },
        setOptions: function (options) {
            this.options = options;
        },
        disabled: function () {
            this.options.disable = true;
        }
    };

    var colorize = {
        enable: function () {
            var ui = $._data($(this)[0], "colorize");
            if (!ui) {
                $.error('error');
            } else {
                var options = ui.getOptions();
                options["disabled"] = false;
                $._data($(this)[0], "colorize").setOptions(options);
            }
        },
        disable: function () {
            var ui = $._data($(this)[0], "colorize");
            if (!ui) {
                $.error('error');
            } else {
                var options = ui.getOptions();
                options["disabled"] = true;
                $._data($(this)[0], "colorize").setOptions(options);
            }
        },
        option: function (param) {
            var ui = $._data($(this)[0], "colorize");
            if (!ui) {
                $.error('error');
            } else {
                return ui.getOptions()[param];
            }
        },
        init: function (param) {
            return this.each(function () {

                var $this = $(this);
                var _api = {};
                var defaults = {
                    red: 255,
                    green: 0,
                    blue: 0,
                    disabled: false
                };

                //              ，            
                var options;
                var ui = $._data(this, "colorize");
                if (!ui) {
                    options = $.extend({}, defaults, param);
                    ui = new Plugin(this, options);
                    $._data(this, "colorize", ui);
                } else {
                    options = $.extend({}, ui.getOptions(), param);
                    ui.setOptions(options);
                }

                var changer = $("", {
                    text: "  ",
                    "class": "custom-colorize-changer"
                });

                var refresh = function (target) {
                    target.css("background-color", "rgb(" +
                        options.red + "," +
                        options.green + "," +
                        options.blue + ")"
                    );
                };

                var random = function () {
                    if (options.disabled === true)
                        return;
                    var colors = {
                        red: Math.floor(Math.random() * 256),
                        green: Math.floor(Math.random() * 256),
                        blue: Math.floor(Math.random() * 256)
                    };
                    options = $.extend({}, options, colors);
                    $._data($this[0], "colorize").setOptions(options);
                    refresh($this);
                };

                _api.create = function () {
                    $this.addClass("custom-colorize");
                    // changer.appendTo($this).button();
                    changer.appendTo($this);
                    changer.on("click", random);
                    refresh($this);
                };

                _api.create();
            });
        }
    };


    $.fn.colorize = function(param) {
        if (colorize[param]) {
            return colorize[param].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof param === 'object' || !param) {
            return colorize.init.apply(this, arguments);
        } else {
            $.error('Method' + method + 'does not exist on jQuery.pluginName');
        }
    };
}));

もし何か問題があったら、嫌がらせを歓迎します(￣▽￣)／時間が経つと忘れてしまうかもしれませんφ(>ω