jquery web插件实现

首先这是一个小demo，尝试性的去实现了几个功能。

这是html页面

    
    
    
    




    
改变颜色
    
改变颜色
    
改变颜色
    
改变颜色
    切换 disable 选项
    改变黑色

这是js页面（就是上文中引用的test5.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');
        }
    };
}));

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