jQuery課後輔導: 你可能沒用過的Javascript小技巧

使用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取得觸發事件的物件。

歡迎推文分享:
Published 13 November 2008 06:20 AM 由 Jeffrey
Filed under: ,
Views: 30,725



意見

# Ammon said on 13 November, 2008 09:07 AM

{} 就是物件, [] 就是Array

也就是著名的 JSON 表示方式

而且如果我沒記錯

var o = {}; 會比 var o = new Object(); 來得快

C#的匿名delegate 就有點 javascript 匿名 function 的味道

# tom said on 13 November, 2008 09:42 AM

person.Name = "Jeffrey";

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

# Mandy said on 16 November, 2008 02:06 PM

你好,請問可以請你幫我一個忙嗎?

cestmnm@hotmail.com

# Jeffrey said on 16 November, 2008 07:48 PM

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

# 小雷 said on 28 November, 2008 04:34 AM

JavaScript真的有無限可能。

# wangaguo said on 16 January, 2009 04:34 AM

可請您解釋這一段嗎? 最近看jQuery才會用的.

(function(msg) {alert(msg)})("Hello!!");

# Jeffrey said on 16 January, 2009 10:45 PM

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

# 嵐曦 said on 14 September, 2009 08:21 AM

你好

因為不知道問題要放哪裡

想說我要用到陣列就放到這裡發問...

請問,下段程式要如何更改才能將值放進陣列中

$('#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的值用一個變數儲存,方便丟到後端處理

# Jeffrey said on 14 September, 2009 09:43 AM

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字串。

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<November 2008>
SunMonTueWedThuFriSat
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication