使用Javascript撰寫Client-Side程式也好些年了,卻從來沒對Javascript這個語言下過苦工,一直抱持用到哪學到哪的精神。在接觸jQuery之後,見識到不少以前沒用過的神奇寫法,一開始還真花了點時間才搞懂,在此做個簡單的分享:

陣列表示法

宣告已知元素的陣列,可以不必動用到new Array(),寫成var ary = ["1", "2", "3"];就好了,一口氣把宣告跟內容指定都搞定。

這跟C# 3.0裡的Implicit Typed Array是不是有異曲同工之妙?

抄襲? 我倒不會這麼解讀,程式語言在發展過程中,本來就該融入其他語言犀利之處、偷習他派武功的精華,從Developer的使用者角度,誰在乎意識形態搞什麼漢賊不兩立? 貫徹"Developer之所欲,常在我心",才是王道!

匿名物件

大家對LINQ中用var宣告Anonymous Type,應該感到挺新奇有趣的,而Javascript裡也可以看到類似的東西。Javascript雖然不是Strong-Typed語言,但卻也很容易實踐Object、Property、Method等物件操作,例如:

var person = new Object();
person.Name = "Jeffrey";
person.Age = 18;
person.Say = function(msg) {
    alert(this.Name + "(" + this.Age + ") said: " + msg);
};
person.Say("Hello");

而以上的程式,可以省去宣告物件及逐一指定屬性,直接簡化寫成:

var person2 = 
{     
    Name:"Jeffrey", Age:18, 
    Say:function(msg) { 
    alert(this.Name + "(" + this.Age + ") said: " + msg) 
    } 
};
person2.Say("Hello Again!");

再來一個範例,快速宣告並設定一個物件陣列!

var people = [ 
    { Name:"George", Age:18 },
    { Name:"Mary", Age:16 }
    ];
for (var i=0; i<people.length; i++)
{
    var person = people[i];
    alert(person.Name + "(" + person.Age + ")");
}

這種寫法很常被用來函數的參數傳遞上,一口氣要傳多個且彈性組合的屬性內容時很方便(頗有Dictionary/Hashtable的味道),例如:

$("#btnOK").css({ color: "yellow", backgroundColor: "green" });

匿名函數

其實剛才已經不小心示範過了,就是Say = function(msg) { ... }的寫法。

傳統上當我們要撰寫事件時,都會另外宣告一個function funName() { ... },再將函數名稱指定到特定的物件上。而在jQuery裡,常常都會直接在要傳入函數參數的地方,如Click事件、HTTP Request呼叫結果處理等,直接用function() { ... }寫Code,例如:

    <script type="text/javascript" src="AfaClient/jquery-1.2.6.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#btnOK").click(function() {
            alert($(this).attr("title"));
        });
    });
    </script>
    <input type="button" id="btnOK" value="OK" title="Button's Title"/>

在以上範例中,$(function() { ... });用來宣告網頁載入後onload事件要執行的邏輯,這裡寫的是找到btnOK並宣告它的onclick事件,程式裡還一併示範在事件中可以用this取得觸發事件的物件。


Comments

# by Ammon

{} 就是物件, [] 就是Array 也就是著名的 JSON 表示方式 而且如果我沒記錯 var o = {}; 會比 var o = new Object(); 來得快 C#的匿名delegate 就有點 javascript 匿名 function 的味道

# by tom

person.Name = "Jeffrey"; person.Age = 18; // (o_@) ?? .....

# by Mandy

你好,請問可以請你幫我一個忙嗎? cestmnm@hotmail.com

# by Jeffrey

to Mandy, 有問題可以在此留言提出,我會盡力相助,尤其小站的讀者群更是卧虎藏龍,還常有高人怪傑不小心路過。另外,提問與回答的互動過程多半能帶給其他朋友一些啟發,也算是你的貢獻哦!

# by 小雷

JavaScript真的有無限可能。

# by wangaguo

可請您解釋這一段嗎? 最近看jQuery才會用的. (function(msg) {alert(msg)})("Hello!!");

# by Jeffrey

to wangaguo, 我貼了一篇文回答你的問題: http://tinyurl.com/8zelml。

# by 嵐曦

你好 因為不知道問題要放哪裡 想說我要用到陣列就放到這裡發問... 請問,下段程式要如何更改才能將值放進陣列中 $('#id').click(function() { $("select[value != 0]").each(function() { alert( this.name + '=' + $(this).val()); }); }); 如果select有5個 要如何將5個 select 的 this.name 和 $(this).val() 存放在同一陣列裡,成為這樣 allselect = [[name1, val1], [name2, val2], ...] 或是有其他方法 想將select的值用一個變數儲存,方便丟到後端處理

# by Jeffrey

to 嵐曦, 可以用用以下的寫法: $("#id").click(function() { var a = []; $("#select[value != 0]").each(function() { a.push([this.name, $(this).val()]); }); //此時的a應該就是你要求格式的陣列 }); 另外, 如果this.name不會重複的,也許可以改成var a = { }; ... a[this.name] = $(this).val(); ... 要丟到後端處理,可以考慮轉換成JSON字串。

Post a comment