一个典型的插件的代码如下:

(function($){
    $.fn.myNewPlugin = function() {
        return this.each(function(){
            // 一堆代码...
        });
    };
}(jQuery));

那几行代码,没把你搞晕吧? 其实里面的重点就是扩展 jQuery 的 prototype 对象,看下面这行:

$.fn.myNewPlugin = function() { //...

这里只是将它放在一个即时执行的函数内部:

(function($){
    //...
}(jQuery));

这样做是为了营造一个私有的 scope,我们可以在这个私有 scope 内部安全地使用 $ 扩展 jQuery, 而不用担心 $ 会被其他 js 库的改写。

所以,这里实际的插件代码是这样的:

$.fn.myNewPlugin = function() {
    return this.each(function(){
        // 一堆代码...
    });
};

新插件中,关键字 this 指向的是调用这个插件的 jQuery 对象。

var somejQueryObject = $('#something');

$.fn.myNewPlugin = function() {
    alert(this === somejQueryObject);
};

somejQueryObject.myNewPlugin(); // alerts 'true'

典型的 jQuery 对象是包含任意多个的 DOM 对象的, 这也是为什么 jQuery 对象被看作是 DOM 对象集的原因。

因此,针对对象集做操作需要遍历它, 通过 jQuery 的 each() 方法我们很容易地实现了。

$.fn.myNewPlugin = function() {
    return this.each(function(){
    
    });
};

与 jQuery 其它方法一样,each() 方法也是返回一个 jQuery 对象, 这成就了我们所熟知并深爱的链式写法($(...).css().attr()...)。 我们不应该破坏这种惯例,于是乎,我们也应该返回一个 this 对象。 在循环内部,你可以对每一个元素做你要做的事。就上面所讨论的, 下面是一个小插件的例子。

(function($){
    $.fn.showLinkLocation = function() {
        return this.filter('a').each(function(){
            $(this).append(
                ' (' + $(this).attr('href') + ')'
            );
        });
    };
}(jQuery));
    
// 使用样例:
$('a').showLinkLocation();

这个小巧的插件可以将集合中所有的链接的 href 属性值包含在括号 中并将它作为该元素的内容显示出来。

<!-- 调用插件之前: -->
<a href="page.html">Foo</a>
    
<!-- 之后: -->
<a href="page.html">Foo (page.html)</a>

虽然简单,但这个插件还是可以优化一下:

(function($){
    $.fn.showLinkLocation = function() {
        return this.filter('a').append(function(){
              return ' (' + this.href + ')';
        });
    };
}(jQuery));

我们利用了,append 方法是可以接受一个回调函数作为参数, 并将回调函数的返回值作为要添加的内容的这一点。同时,也可以注意到, 我们不是通过 attr 方法去获取 href 的属性值, 而是直接使用了内置的 DOM API,访问元素的 href 属性来获取。

下面是另一个例子。它不需要我们用 each() 方法去循环遍历, 只是简单地直接委派给另一个 jQuery 方法:

(function($){
    $.fn.fadeInAndAddClass = function(duration, className) {
        return this.fadeIn(duration, function(){
            $(this).addClass(className);
        });
    };
}(jQuery));
    
// 使用方法:
$('a').fadeInAndAddClass(400, 'finishedFading');