自定义jQuery插件（一）

自定义jQuery插件（一）

虽然现在有大量的插件可供我们选择使用，但实际开发过程中，使用别人的插件难免会带来问题，比如

• 插件功能强大，代码行数也随着激增，但是我们只使用其中一小部分。
• 使用别人的插件，很难看懂别人的代码，特别是压缩成min.js，为后期维护，需求变更等带来很严重问题。
• 同样想在现有插件上做进一步开发也没那么容易。
• 装逼

所以学习jQuery插件开发很有必要。

自定义插件的类型

自定义插件的类型主要有两种（我猜的）

1. 类级别插件

类级别插件比较简单，通过$.extend()直接给jQuery添加静态方法，通过$.extend()来扩展，调用方法形如

$.ajax(),$.trim(),$.each()等。

    <script type="text/javascript">
        $.extend({
            pluginName: function(str) {
                str = (str ? str : ‘helloWorld‘);
                alert(str);
            }
        })
        $.pluginName();
        $.pluginName(‘helkyle‘);
    </script>

不出意外地话，窗口会弹出两个alert。类级别插件通常适合用来封装一下方法。更常见的jQuery插件是对象级别的插件。

2.对象级别插件

对象级别插件调用方法为首先通过jquery选择器获取对象并为对象添加方法，然后把方法封装成一个插件，这种插件使用很广泛，使用简单。形如：

    $("selector").pluginName({
                option1: "option1",
                option2: "option2",
                ...
    });

插件大概长这样

    $.fn.pluginName = function(options) {
        you code...
    }

我们的重点放在对象级别的插件开发，后面会补上一个完整的插件案例（如果可以的话）

插件开发要点

• 命名规则通常为jQuery.pluginName.js，压缩过后的文件为jQuery.pluginName.min.js。
• 为了尽量避免其它代码冲突，通常把jQuery当成函数参数传递。

    (function($) {
            your code...
        })(jQuery);

• 通常会在插件开始前增加一个分号’;’，这样做的目的是避免其它文件最后的语句忘记添加’;’的时候报错。

    ;(function($) {
            your code...
        })(jQuery);

• 为了保证链式调用，我们需要插件本身放回一个jQuery对象。

    ;(function($) {
        $.fn.pluginName = function(options) {
            return this...;
        }
    })(jQuery);

• 又为了避免使用者调用的时候是使用类名.className（可能传过来一个集合），我们需要做多一步。

    ;(function($) {
        $.fn.pluginName = function(options) {
            return this.each(function() {
                your code...
            });
        }
    })(jQuery);

• 为了避免名称空间污染，通常表现为，你定义了一个全局变量，而别人在开发的时候也定义了一个相同名字的变量，一不小心就出大问题，所以插件改成带有匿名闭包的。

    ;(function($) {
        var Plugin = function(options) {
        }
        Plugin.prototype = {
            fun1: function() {
            },
            fun2: function() {
            }
            your code ...
        }
        $.fn.pluginName = function(options) {
            return this.each(function() {
                return new Plugin(options);
            });
        }
    })(jQuery);

• 通常选择为插件配置默认参数，代码执行完，会把this.defaults 和 options合并，合并规则为options的参数会替换掉defaults中的值，如果只传部分值，则只替换部分，其余的使用defaults的值，最后合并完的结果并到匿名变量’{}‘，传给this.options，这样可以保证defaults的值不会被改动。

    ;(function($) {
        var Plugin = function(options) {
            this.defaults = {
            ‘color‘: ‘red‘,
            ‘fontSize‘: ‘12px‘,
            ‘textDecoration‘: ‘none‘
            },
           this.options = $.extend({}, this.defaults, options)
        }
        Plugin.prototype = {
            fun1: function() {
            },
            fun2: function() {
            }
            your code ...
        }
        $.fn.pluginName = function(options) {
            return this.each(function() {
                return new Plugin(options);
            });
        }
    })(jQuery);

暂时先写这么多，因为怕自己会忘记所以写得比较啰嗦~~~