轉載 jQuery和js自定義函數和文件的方法（全網最全）

jQuery和js自定義函數和文件的方法（全網最全）

 

 

 版權聲明：本文爲像霧像雨又像風_http://blog.csdn.net/topdandan的原創文章，未經容許不得轉載。 https://blog.csdn.net/Topdandan/article/details/81484731

咱們在編寫jQuery或者js的時候經常要自定義函數，而且寫入一個js文件中，方便引入html中調用。那麼就涉及到如何在js文件中書寫jQuery和js自定義函數的問題了。

在介紹自定義函數以前必須先來了解下js的自執行函數。

1、js自執行函數介紹

咱們一般將JS代碼寫在一個單獨的JS文件中，而後在頁面中引入該文件。可是，有時候引入後會碰到變量名或函數名與其它JS代碼衝突的問題。那麼如何解決這個問題呢？做用域隔離。在JS中，做用域是經過函數來劃分的，將JS代碼封裝到函數中進行調用能夠避免變量名/函數名衝突的問題，可是這也並非萬無一失，由於封裝函數自己有可能和其它函數重名，解決方案：自執行函數。

自執行函數是用一對圓括號將匿名函數包起來，加括號（傳參）會當即執行。由於函數無名字，實現了做用域的絕對隔離和函數名的衝突問題。建立這個自執行函數，就至關於開闢了一個新的命名空間，使裏面的內容與其餘空間隔離，這樣就減小了js文件中的全局變量與其餘全局變量名稱相同的風險。

自執行函數的幾種表現方式：

方式1:function外面加括號 (推薦，比較常見)：

1.  
   //不帶參數的自執行(匿名)函數
2.  
   ( function() {
3.  
   alert(x + y);
4.  
   })();
5.  
    
6.  
   //帶參數的自執行(匿名)函數
7.  
   ( function(x, y) {
8.  
   alert(x + y);
9.  
   })( 2, 3);

上面建立了一個匿名函數(在第一個括號內)，第二個括號用於調用該匿名函數，並傳入參數。兩個括號都是表達式，是表達式就有返回值，因此能夠在後面加一對括號讓它們執行.當js的解析器執行到前一個括號後就返回一個函數對象而後連着後面一個括號就構成了一個完整的函數名+(參數)+；的函數執行語句。

方式2:最前最後加括號 (這是jslint推薦的寫法，好處是，能提醒閱讀代碼的人，這段代碼是一個總體）

1.  
   ( function() {
2.  
   alert( 1);
3.  
   }());

方式3:function前面加運算符，常見的是!與void 。這樣作的目的就是將函數轉換成表達式。

1.  
   ! function() {
2.  
   alert( 1);
3.  
   }();
4.  
    
5.  
   void function() {
6.  
   alert( 2);
7.  
   }();

2、js文件的自定義函數

上面介紹了自執行函數，因此咱們能夠用它來減小全局變量的使用，提升安全性。因此在js文件中，咱們經常用自執行函數來包裹住咱們的自定義函數。格式以下：

1.  
   //自執行匿名函數
2.  
   ( function($){
3.  
   //自定義函數的代碼
4.  
   })(jQuery);

那麼自定義函數如何來定義呢，請看下面的方法

方法一：經過在jQuery全局變量中增長函數

1.  
   //建立：經過在jQuery全局變量中增長函數
2.  
   ( function($){
3.  
   //在jQuery這個全局變量對象中增長一個叫myFunction1的函數,函數參數根據須要自定
4.  
   $.myFunction1= function(x,y){
5.  
   //函數體
6.  
   };
7.  
   $.fn.myFunction2= function(x,y){
8.  
   //函數體
9.  
   };
10.  
    })(jQuery);
11.  
    //執行
12.  
    $( function(){
13.  
    $.myFunction1( 1,2);
14.  
    });

方法二：經過在jQuery全局變量中擴展程序

1.  
   //建立兩個函數
2.  
   ( function($){
3.  
   //建立方法3
4.  
   jQuery.extend({
5.  
   "myFunction3":function(){
6.  
   alert( "個人自定義jquery方法3");
7.  
   };
8.  
   });
9.  
   //建立方法4
10.  
    jQuery.fn.extend({
11.  
    "myFunction4":function(){
12.  
    alert( "個人自定義jquery方法4");
13.  
    }
14.  
    });
15.  
    })(jQuery);
16.  
    //執行
17.  
    $( function(){
18.  
    //執行方法3
19.  
    $.myFunction3();
20.  
    //執行方法4
21.  
    //注意，在執行方法4的時候,必需要對象來調用，好比經過標籤選擇器$("button").myMethod(args);
22.  
    $( "對象").myFunction4();
23.  
    });

注意：經過.fn定義的擴展方法，須要經過jQuery選擇器調用，好比經過標籤選擇器$("button").myMethod(args)。

方法三：建立全局變量，在全局變量裏面自定義函數

1.  
   //在js文件中建立一個全局變量STUDENT，在對象裏面自定義一個得到姓名和年齡的方法
2.  
   var STUDENT={ //或者window.STUDENT,表示是該窗口的全局變量
3.  
   name: "大哥",
4.  
   age:"38",
5.  
   //自定義函數
6.  
   getNameAndAge: function(){
7.  
   return "name:"+name,"age:"+age;
8.  
   }
9.  
   }
10.  
    //執行，獲取STUDENT對象中的信息
11.  
    $( function(){
12.  
    //獲取學生的信息
13.  
    var info=STUDENT.getNameAndAge();
14.  
    });