自定义$插件注意事项

/*
注：1,命名：jquery.{diy}.js         
2, “jQuery.fn”是“jQuery.prototype”的简写  
3,自执行匿名函数(function(){代码})();防止污染全局命名空间，同时不会和别的代码冲突；
4,我们在代码开头加一个分号,防止别人使用时，别人的代码方法后没有分号而导致出错；
5最后我们得到一个非常安全结构良好的代码：加入window等是防止这些全局变量被别人污染；
    ; (function ($, window, document, undefined) {
        //我们的代码。。
        //blah blah blah...
    })(jQuery, window, document);
6,当变量是jQuery类型时，建议以$开头,如：var $element=$('a');
7,题外话：一般HTML代码里面使用双引号，而在JavaScript中多用单引号
8,$.fn[pluginName]和$.fn.pluginName写法不同，意义相同
*/
//1、封装对象方法的插件，例如wdtree
//闭包限定命名空间
; (function ($) {
    $.fn.treeview = function (settings) {
        debugger
        var dfop = {
            color: '#ff9966'
        };
        var opts = $.extend({}, dfop, settings.options);//覆盖默认配置,注：新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。
        return this.each(function () {      //加return可以使自定义的方法支持$链式调用
            var $this = $(this);
            $this.css({
                color: opts.color
            });
        });
    }
})(jQuery);
//2、封装全局函数的插件,eg：jquery.validate.js


//闭包限定命名空间
; (function ($) {
    $.extend($.fn, {
        valid: function (a) {


        }
    });
})(jQuery);


//-----------------------------------------sliphover-----------------------------------------
; (function ($, window, document, undefined) {
    //定义Beautifier的构造函数
    var Beautifier = function (ele, opt) {
        this.$element = ele,
        this.defaults = {
            'color': 'red',
            'fontSize': '12px',
            'textDecoration': 'none'
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定义Beautifier的方法
    Beautifier.prototype = {
        beautify: function () {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        }
    }
    //在插件中使用Beautifier对象
    $.fn.myPlugin = function (options) {
        //创建Beautifier的实体
        var beautifier = new Beautifier(this, options);
        //调用其方法
        return beautifier.beautify();
    }
    //多个变量只需要一个var关键字就行了
    var c = 3,
        b = 5;
})(jQuery, window, document);

           

调用：

<script>
    $(function () {
        $('a').myPlugin({
            'color': '#2C9929',
            'fontSize': '20px',
            'textDecoration': 'underline'
        });
    })
</script>