jQuery插件 / 基础知识

Basic Plugin Authoring

The jQuery object gets these methods from the $.fn object.

If we want to add a custom function, we also need to add to $.fn. => then, your func will be avaliable just like any other jQuery object method.

$.fn.greenify = function() {
    this.css( "color", "green" );
};
 
$( "a" ).greenify(); // Makes all the links green.

注：盖上我fn的章就是我的人了。接下来我拥有的所有门人（变量，函数等）你都有权使用，相应的，我的其他门人也有权使用你。

Chaining: link 5 or 6 actions onto one selector

One of jQuery's features is chaining.
This is accomplished by having all jQuery object methods return the original jQuery object again
there are a few exceptions: .width() called without parameters returns the width of the selected element, and is not chainable

注：除了某些返回特定数据的函数，其他大多数函数的返回值都是 "我本人"，所以jQuery中可以实现多个函数的串联使用 > 使用他们的都是 "我"

Protecting the $ Alias and Adding Scope

$ is an alias to the jQuery function：为了能继续使用该符号，我们需要把自定义函数封装起来，并把jQuery作为参数传入到函数的作用于中，例如：

(function ( $ ) {
    $.fn.greenify = function() {
        this.css( "color", "green" );
        return this;
    };
 }( jQuery ));

这样的封装也使函数能拥有私有变量
注："我"有一个外号叫 $，为了可以无冲突的使用该外号，我需要你把你的自定义的函数封装起来

Minimizing Plugin Footprint

在一个封装环境(function( $ ) {...}( jQuery ));中，建议只放一个函数，举一个反例：

(function( $ ) {
    $.fn.openPopup = function() {
        // Open popup code.
    };
    $.fn.closePopup = function() {
        // Close popup code.
    };
}( jQuery ));

注：每个封装的包中只应该有一个自定义函数

Using the `each()` Method

Your typical jQuery object will contain references to any number of DOM elements, and that's why jQuery objects are often referred to as collections.

$.fn.myNewPlugin = function() {
    return this.each(function() {
        // Do something to each element here.
    });
};

Notice that we return the results of .each() instead of returning this. Since .each() is already chainable, it returns this, which we then return.
注："我"的对象常是包含了一组DOM元素的数组。所以each()方法十分实用

Accepting Options

The easiest way to do this, especially if there are lots of options, is with an object literal.

/* function */
(function( $ ) {
    $.fn.greenify = function( options ) {
        var settings = $.extend({
            /* default options */
            color: "#556b2f",
            backgroundColor: "white"
        }, options);

        /*  Greenify the collection based on the settings variable. */
        return this.css(
                color: settings.color;
                backgroundColor: settings.backgroundColor;
            );
    };
}( jQuery ))

/* usage 1 */
$("div").greenify();

/* usage 2 */
$("div").greenify({
    color: "orange"
});

The default value for color of #556b2f gets overridden by $.extend() to be orange.
注：传一组参数给自定义函数

Final Practise

/* function: This handy plugin goes through all anchors in the collection and appends the href attribute in parentheses. */
(function( $ ){
    $.fn.showlinkLocation = function(){
        this.filter("a").each(
                function() {
                    var link = $( this );   // document.find(this)
                    link.append("(" + link.attr("href") + ")");
                }
            );
        return this;
    };
}( jQuery ));

/* usage */
$("a").showlinkLocation();

____________________________________________________________________________________

<!-- Before plugin is called: -->
<a href="page.html">Foo</a>
 
<!-- After plugin is called: -->
<a href="page.html">Foo (page.html)</a>