區別 (function($){...})(jQuery)、$(function(){ })和$.fn

一、(function($){…})(jQuery)
首先function(arg){...}定義了一個匿名函數,參數爲arg,而調用時需要在函數後面寫上括號和實參,由於操作符的優先級,函數本身也需要括號,也就成了:
(function(arg){...})(param)
這就相當於定義了一個參數爲arg的匿名函數,並將param作爲參數來調用這個匿名函數
而(function($){...})(jQuery)則是一樣的,之所以只在形參使用$,是爲了不與其他庫衝突,所以實參用jQuery,其實就等於其實可以這麼理解,不過要注意的是fn是不存在的,函數直接定義,然後就運行了,然後就壓縮成如下:

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

二、$(function(){})
是$(document).ready(function(){...})的簡寫形式,意思就是頁面載入後執行其中的代碼,也可以被寫成:

jQuery(function(){...});
jQuery(document).ready(function(){...})

兩者相比:
jQuery(function(){...});用於存放操作DOM對象的代碼,執行其中代碼時DOM對象已經存在。不可用於存放開發插件的代碼,因爲jQuery對象沒有得到傳遞,外部通過jQuery.method也調用不了其中的方法(函數)。
(function(){...}(jQuery);用於存放開發插件的代碼,執行其中代碼時DOM不一定存在,所以直接自動執行DOM操作的代碼,請小心使用。
簡單理解是(function($){...})(jQuery)用來定義一些需要預先定義好的函數
$(function(){...})則是用來在DOM加載完成之後運行/執行那些預先定義好的函數。

開發jQuery插件時,一般先看jQuery(function(){...}),意義爲在DOM加載完畢後執行了ready()方法,再看(function(){...})(jQuery).

三、$.fn
$.fn是指jQuery的命名空間,加上fn的方法及屬性,會對每一個jquery實例有效。
如定義了$.fn.initPageMe(),即對jQuery擴展了一個abc方法,那麼後面你的每一個jQuery實例都可以引用這個方法了。

$.fn.initPageMe=function(opts){...};   //定義擴展方法
$(function(){
    $(".pageMe").initPageMe();             //調用擴展方法
})

四、$與$.fn
$是jQuery的一種表現形式。
jQuery的擴展方式有:

1.$.func1=function(){}
2.$.extend({func1:function(){}})
3.$.fn.func1=function(){}
4.$.fn.extent({func1:function(){}})

$拓展的方法是靜態方法,可以使用$直接調用,其拓展的方式有兩種,一般使用$.extend({});;而$.fn拓展的方法是實例方法,必須由“對象”$("")來調用,其拓展的方式同樣有兩種,一般使用$.fn.extend({ })。

其中,fn與prototype等同使用;jQuery.fn = jQuery.prototype

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章