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

創作者介紹

wEb 亂講

easonyo 發表在 痞客邦 PIXNET 留言(0) 人氣()