jq插件寫法

現在作web開發，jQuery 幾乎是必不可少的，同時jquery插件也是不斷的被你們所熟知，以及運用。最近在搞這個jquery插件，發現它的牛逼之處，因此講一講jQuery插件的寫法以及使用 

(function($){
    $.fn.extend({
        color:function(options){
            var defaults = {color:'blue', size: "30px"};
            options = $.extend({},defaults, options);
            return $(this).each(function(){
                $(this).css({'color':options.color});
                $(this).css({'font-size':options.size});
            });
        }
    });

})(window.jQuery);//此處也可寫成(jQuery);

這裏你們也許會抱怨，這根本看不懂，別急，看下去會讓你明白

 

首先能夠告訴你們，這個插件實現的功能是對一個標籤的字體大小以及顏色設置。

下圖是顯示在網頁上的代碼：

如上的代碼獲得的效果以下圖：

如此，你們不要疑惑，就將color()這個函數當作系統給你提供的函數便可。

在這裏首先要和你們講解自執行的匿名函數/閉包的運用

1.解釋什麼事閉包，下面這種形式的就是自執行的匿名函數/閉包

 

(function($){
    //Code
})();

 

 

2.坑爹的報錯代碼

 

//這個代碼放在javascript代碼中不會報錯
(function($){
    //Code
})();
//而下面的代碼會報錯
function($){
    //Code
}();

3.解釋表達式和函數聲明

 

表達式：

 

(function($){
    //Code
})

 

 

函數聲明：

 

function($){
    //Code
}

如此你們能夠大概猜測到對象的使用方法，首先是要建立一個對象:new C()

 

其中C就是至關於(function($){//Code})，()即是後面的()了。

以上是一種理解方式， 實際狀況以下：

js在"預編譯"階段, 會解釋函數聲明, 但卻會忽略表達式。

 

當JavaScript執行到function() {//Code}()d時因爲function() {//code}在"預編譯"階段已經被解釋過,javascript會跳過function(){//code}試圖去執行()故會報錯;
當javascript執行到(function {// Code})()時因爲(function {// code})是表達式, javascript會去對它求解獲得返回值, 因爲返回值是一 個函數, 故而遇到()時, 便會被執行。

另外,函數轉換爲表達式的方法並不必定要靠分組操做符()咱們還能夠用!操做符等操做符，只要是表達一個表達式的便可。

 

如此你們大概知道插件得書寫爲何要加個().

而後就是寫插件得步驟了：基本格式以下

 

(function($){
    //插件書寫部分
})(jQuery);

接下來有兩種插件書寫的形式

 

一種是一個函數：$.fn.函數名 = function([options]){}

另一種天然是能夠多個函數：$.fn.extend({函數名:function(){}});

第一種真能一次搞一個函數，而第二個能夠一次聲明多個函數

接下來說解$.extend()的用法

有兩種

一種$.extend(defaults, options);

其中defaults爲默認設置，options爲傳入的參數

這個函數的做用是用後面的參數與第一個參數進行合併而後返回它的值

代碼實現以下：

用chrome顯示的效果以下：

 

看到如上的結果，你們可能已經知道了，defaults被改變了，居然變成了options的值，同時你們能夠注意到$.extend(defaults, options)返回值是被覆蓋的值

這就形成了通常的插件不會用$.extend(defaults, options)緣由就是他改變了默認的值

接下來就是另一種方法

$.extend({},defaults, options);

效果以下圖：

你們能夠注意到用這個函數的話不會致使defaults被替代，因此通常的插件書寫是用$.extend({}, defaults, options);

至於插件得調用，很簡單

$("").函數名

便可。

接下是講解一下書寫插件時的一些細節部分

看以下代碼

這裏的return有什麼做用

對於通常的插件代碼，若是沒有加一個return 回到一個問題：那就是隻能用一次

$(".afters").color().css({})這就會報錯，由於沒有返回自己這個對象，因此使用完color()是沒有返回值得話，那麼css調用時是undefined，因此會報錯，所以當咱們寫完插件代碼時，最後要返回jQuery對象自己，不然就只能調用一次就不能調用了。

 

若是講解有誤，請你們進行糾正。