jquery 外掛程式編寫

如果你看到這篇文章，我確信你毫無疑問會認為jQuery是一個使用簡便的庫。jQuery可能使用起來很簡單，但是它仍然有一些奇怪的地方，對它準系統和概念不熟悉的人可能會難以掌握。但是不用擔心，我下面已經把代碼劃分成小部分，做了一個簡單的指導。那些文法看起來可能過於複雜，但是如果進入到它的思想和模式中，它是非常簡單易懂的。
下面，我們有了一個外掛程式的基本層次：
 
// Shawn Khameneh
// ExtraordinaryThoughts.com
 
(function($) {
    var privateFunction = function() {
        // 代碼在這裡運行
    }
 
    var methods = {
        init: function(options) {
            return this.each(function() {
                var $this = $(this);
                var settings = $this.data('pluginName');
 
                if(typeof(settings) == 'undefined') {
 
                    var defaults = {
                        propertyName: 'value',
                        onSomeEvent: function() {}
                    }
 
                    settings = $.extend({}, defaults, options);
 
                    $this.data('pluginName', settings);
                } else {
                    settings = $.extend({}, settings, options);
                }
 
                // 代碼在這裡運行
 
            });
        },
        destroy: function(options) {
            return $(this).each(function() {
                var $this = $(this);
 
                $this.removeData('pluginName');
            });
        },
        val: function(options) {
            var someValue = this.eq(0).html();
 
            return someValue;
        }
    };
 
    $.fn.pluginName = function() {
        var method = arguments[0];
 
        if(methods[method]) {
            method = methods[method];
            arguments = Array.prototype.slice.call(arguments, 1);
        } else if( typeof(method) == 'object' || !method ) {
            method = methods.init;
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
            return this;
        }
 
        return method.apply(this, arguments);
 
    }
 
})(jQuery);
你可能會注意到，我所提到代碼的結構和其他外掛程式代碼有很大的不同。根據你的使用和需求的不同，外掛程式的開發方式也可能會呈現多樣化。我的目的是澄清代碼中的一些概念，足夠讓你找到適合自己的方法去理解和開發一個jQuery外掛程式。

 
現在，來解剖我們的代碼吧。
 
容器：一個即時執行函數
根本上來說，每個外掛程式的代碼是被包含在一個即時執行的函數當中，如下：
 
(function(arg1, arg2) {
   // 代碼
})(arg1, arg2);
即時執行函數，顧名思義，是一個函數。讓它與眾不同的是，它被包含在一對小括弧裡面，這讓所有的代碼都在匿名函數的局部範圍中運行。這並不是說DOM（全域變數）在函數內是被屏蔽的，而是外部無法訪問到函數內部的公開變數和對象命名空間。這是一個很好的開始，這樣你聲明你的變數和對象的時候，就不用擔心著變數名和已經存在的代碼有衝突。
 
現在，因為函數內部所有的所有公開變數是無法訪問的，這樣要把jQuery本身作為一個內部的公開變數來使用就會成為問題。就像普通的函數一樣，即時函數也根據引用傳入對象參數。我們可以將jQuery對象傳入函數，如下：
 
(function($) {
 
   // 局部範圍中使用$來引用jQuery
})(jQuery);
我們傳入了一個把公開變數“jQuery”傳入了一個即時執行的函數裡面，在函數局部（容器）中我們可以通過“$”來引用它。也就是說，我們把容器當做一個函數來調用，而這個函數的參數就是jQuery。因為我們引用的“jQuery”作為公開變數傳入，而不是它的簡寫“$”，這樣我們就可以相容Prototype庫。如果你不用Prototype或者其它用“$”做簡寫的庫的話，你不這樣做也不會造成什麼影響，但是知道這種用法仍是一件好事。
 
外掛程式：一個函數
一個jQuery外掛程式本質上是我們塞進jQuery命名空間中一個龐大的函數，當然，我們可以很輕易地用“jQuery.pluginName=function”，來達到我們的目的，但是如果我們這樣做的話我們的外掛程式的代碼是處於沒有被保護的暴露狀態的。“jQuery.fn”是“jQuery.prototype”的簡寫，意味當我們通過jQuery命名空間去擷取我們的外掛程式的時候，它僅可寫（不可修改）。它事實上可以為你幹點什麼事呢。它讓你恰當地組織自己的代碼，和理解如何保護你的代碼不受運行時候不需要的修改。最好的說法就是，這是一個很好的實踐。
 
通過一個外掛程式，我們獲得一個基本的jQuery函數：
 
(function($) {
 
    $.fn.pluginName = function(options) {
 
        // 代碼在此處運行
 
        return this;
    }
 
})(jQuery);
上面的代碼中的函數可以像其他的jQuery函數那樣通過“$(‘#element’).pluginName()”來調用。注意，我是如何把“return this”語句加進去的；這小片的代碼通過返回一個原來元素的集合（包含在this當中）的引用來產生鏈式調用的效果，而這些元素是被一個jQuery對象所包裹的。你也應該注意，“this”在這個特定的範圍中是一個jQuery對象，相當於“$(‘#element’)”。