JavaScript與jQuery的函數(函式)使用方式

funciton 又稱「函式」，將固定的程式集合起來並設定函式名稱與參數，等到需要時呼叫使用，另外也可以重復使用。

[nextpage title=”01-函式”]

01-1-函式

function 函式名稱(參數1, 參數2, ...){
	處理的內容;
	return 回傳值;
}

function 函式名稱(參數1, 參數2, ...){

處理的內容;

return 回傳值;

}

開頭使用 function 關鍵字以宣告為函式
接著將函式名稱命名，表達函式主要的處理內容
函式名稱命名之後 () 中設定函式中的參數，如需多參數可使用 , 區隔
參數可能有多個，也有可能沒有。
於 {} 內，參數與變數相同都可使用。
{} 撰寫實際處理的內容，若處理的結果要回傳，可而用 return 語法將值傳回，若沒有可以省略，下例就是省略 return 。

var added1 = add(1, 2);
var added2 = add(6, 7);
var added3 = added1+added2;

function add(num1, num2){
	 return num1 + num2;
}; // 二個參數 (num1, num2) 加總，再將函式結果傳回

console.log(added1); // 運算傳回值後 3
console.log(added2); // 運算傳回值後 13
console.log(added3); // 回傳總合 16

var added1 = add(1, 2);

var added2 = add(6, 7);

var added3 = added1+added2;

function add(num1, num2){

return num1 + num2;

}; // 二個參數 (num1, num2) 加總，再將函式結果傳回

console.log(added1); // 運算傳回值後 3

console.log(added2); // 運算傳回值後 13

console.log(added3); // 回傳總合 16

See the Pen 函式結果的返回值或是回傳值 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

01-2-函式的呼叫

函式名稱(參數1, 參數2, ...);

1	函式名稱(參數1, 參數2, ...);

function myFunction(){
	alert("hi，你好，我是Jimmy");	
};
myFunction(); // 呼叫myFunction函式，註myFunction內的alert執行

function myFunction(){

alert("hi，你好，我是Jimmy");

};

myFunction(); // 呼叫myFunction函式，註myFunction內的alert執行

01-3-重復使用函式

函式內的程式碼即是讓其他程式碼能夠呼叫，達到重覆使用、不限次數。
節省不同程式中重覆的內容。
函式內容修改時可若別的程式有套用到函式，可以一次修改節省時間，不用一處處修改。

See the Pen jquery共用函式 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

[nextpage title=”02-匿名函式”]

基本上是()(para)匿名方法(anonymous function)，傳承jQuery的函式庫，jQuery plugins都是用這樣的架構。

02-1-匿名函式

省略函式名稱的函式叫匿名函式，他不能在程式其他的地方呼叫，而是會立即執行。

function (參數1, 參數2, ...) {
  處理內容 (參數1, 參數2, 於函數中視為變數使用);
  return 回傳值;
}

function (參數1, 參數2, ...) {

處理內容 (參數1, 參數2, 於函數中視為變數使用);

return 回傳值;

}

02-2-用變數儲存匿名函式

如果獎匿名函式設定給變數的話，則可以透過變數名稱呼叫函式，而「變數名」就是「函式名」。

var 變數名稱 = function(參數1, 參數2, ...){
	報行的程式碼 (參數1, 參數2, ... 於函式內視為變數使用)
	return 值;
}

var 變數名稱 = function(參數1, 參數2, ...){

報行的程式碼 (參數1, 參數2, ... 於函式內視為變數使用)

return 值;

}

var add = function (num1, num2){
	return num1 + num2;
}
var added1 = add(1,2) 
// console.log 輸出變數 added1 儲存 "3"

var add = function (num1, num2){

return num1 + num2;

}

var added1 = add(1,2)

// console.log 輸出變數 added1 儲存 "3"

設定變數名稱給匿名函式，則匿名函式就如一般函式一樣，變成可以在其他地方讓程式呼叫使用。
但一般函式與有名字的匿名函式的差別上有「函式可執時間點」的差異。主要是匿名函式使用變數後的時間點，而也一定要使用該變數名後才能使用。

javascript與jqeury的變數匿名函式

See the Pen javascript與jqeury的變數匿名函式 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

02-3-具名函數或具名表示式

具名 + 匿名函數也是會被提升到最頂端，只是被提升的是變數宣告 (沒有函數的定義)

//具名函數
var addfun = function add(a,b) {
   return a + b;
}

//具名函數

var addfun = function add(a,b) {

return a + b;

}

02-4-立即執行的匿名函式

較高階的使用者在實務上經用，語法撰寫立即執行的函式。立即函式的優點是可以幫助你把一堆運算包起來，又不用擔心會留下全域變數，變數生命週期只存在於函數內

(function (參數){
  處理內容;
  return 回傳值;
})(參數的值);

//也可以寫成這樣
(function(){
	處理內容;
  	return 回傳值;
}());

(function (參數){

處理內容;

return 回傳值;

})(參數的值);

//也可以寫成這樣

(function(){

處理內容;

return 回傳值;

}());

02-4-1-立即函式破鎖滑鼠右鍵
立即函式還有一種用法，你可以把它存在瀏覽器的書籤列裡面，點下去就會立即執行。把以下這段存成瀏覽器的書籤，以後遇到有那種鎖滑鼠右鍵的網頁就點一下書籤，然後網頁的鎖滑鼠右鍵就被解開了。

javascript:(function() { function R(a){ona = "on"+a; if(window.addEventListener) window.addEventListener(a, function (e) { for(var n=e.originalTarget; n; n=n.parentNode) n[ona]=null; }, true); window[ona]=null; document[ona]=null; if(document.body) document.body[ona]=null; } R("contextmenu"); R("click"); R("mousedown"); R("mouseup"); R("selectstart");})()

javascript:(function() { function R(a){ona = "on"+a; if(window.addEventListener) window.addEventListener(a, function (e) { for(var n=e.originalTarget; n; n=n.parentNode) n[ona]=null; }, true); window[ona]=null; document[ona]=null; if(document.body) document.body[ona]=null; } R("contextmenu"); R("click"); R("mousedown"); R("mouseup"); R("selectstart");})()

fucntion 後接著 () 然後是匿名函式的處理內容，遇到最後的 () 表示執行處理的內容。
函式中宣告的變數與函式，因其使用範圍限於所屬的函式中 (稱為區域變數)，所以不會對其他的程式影響，因此程式中如有併用數個 Script 就要用此方法避免可能的混亂。

02-4-2-匿名函式範例

(function($) {
	// Here "$" is a jQuery reference
})(jQuery)

(function($) {

// Here "$" is a jQuery reference

})(jQuery)

(function($) {  // 用變數 "$" 接收從下方 (jQuery); 傳入作為參務的 jQuery 物件
  var message = "ready方法是用以控制當 DOM 準備好時所觸發的事件";
  $(document).ready(function(){
    alert(message);
  });
})(jQuery); //設定 jQuery 物件為參數

(function($) { // 用變數 "$" 接收從下方 (jQuery); 傳入作為參務的 jQuery 物件

var message = "ready方法是用以控制當 DOM 準備好時所觸發的事件";

$(document).ready(function(){

alert(message);

});

})(jQuery); //設定 jQuery 物件為參數

匿名函式中所宣告的變數 “message” 只在此匿名函式中有效，函式外不可參考，如果在程式外的其他地方使用到變數 “message” 也不會有影響

02-4-3-立即執行匿名函式範例-2

(function (d, $) {
	var message = "ready方法是用以控制當dom準備好時所觸發的事件";
	$(document).ready(function(){
		alert(message);
	});
})(document, jQuery);

// 可省略document傳回值部份，jQuery直接控制的目標直接是document
(function ($) {
	var message = "ready方法是用以控制當dom準備好時所觸發的事件";
	$(document).ready(function(){
		alert(message);
	});
})(jQuery);

(function (d, $) {

var message = "ready方法是用以控制當dom準備好時所觸發的事件";

$(document).ready(function(){

alert(message);

});

})(document, jQuery);

// 可省略document傳回值部份，jQuery直接控制的目標直接是document

(function ($) {

var message = "ready方法是用以控制當dom準備好時所觸發的事件";

$(document).ready(function(){

alert(message);

});

})(jQuery);

See the Pen 立即執行的匿名函式 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

02-4-4-執行匿名函式綁定事件

(function(){
	$('#myBtn').click(function(){
		//點按鈕後要執行的事情
		myfun();
	});

	var myfun = function(){ 
		alert("匿名函式綁定事件的寫法")
	};
})();

(function(){

$('#myBtn').click(function(){

//點按鈕後要執行的事情

myfun();

});

var myfun = function(){

alert("匿名函式綁定事件的寫法")

};

})();

See the Pen jqeury-匿名函式綁定事件的寫法 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

02-4-其他

(function() {
	//codes
})();

(function() {

//codes

})();

上面這種格式就是所謂的 self invoking anonymous function (自我執行匿名函數)，在程式邏輯上是”製造一個匿名的函數並且立刻執行”，其目的主要在於產生一個私有的 scope (泛圍)，使在其內宣告的變數不會與外界混淆。

(function ($){
	//codes
})(jQuery)

(function ($){

//codes

})(jQuery)

跟傳window進去的意義是一樣的，會這樣使用的人應該是認為他在這個 scope (泛圍) 裡面使用到的廣域變數只有jQuery一個，所以只丟jQuery進去，省去了在 scope (泛圍) 裡面再次宣告的功夫。

資料來源：
常見jQuery的三種不同架構 $(function(), (function($), $.fn.myFunctionName
Kenneth’s Blog – 立即函式（匿名函式）
小雕雕的家-Javascript 開發學習心得-函數的多種寫法與應用限制

標籤雲

文章段落

JavaScript與jQuery的函數(函式)使用方式

01-1-函式

01-2-函式的呼叫

01-3-重復使用函式

02-1-匿名函式

02-2-用變數儲存匿名函式

02-3-具名函數或具名表示式

02-4-立即執行的匿名函式

02-4-其他

標籤雲

#ezw_tco-2 .ez-toc-title{ font-size: 120%; ; ; } #ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active{ background-color: #ededed; } 文章段落

01-1-函式

01-2-函式的呼叫

01-3-重復使用函式

02-1-匿名函式

02-2-用變數儲存匿名函式

02-3-具名函數或具名表示式

02-4-立即執行的匿名函式

02-4-其他

文章段落