跳到主要內容

發表文章

目前顯示的是 六月, 2015的文章

JavaScript 可變參數函式撰寫與其參數傳遞

用一個簡單的例子示範JavaScript的可變參數函數
function demo () { console.log(arguments); }
demo (1, 2 , 3 , 4);

// output
[1, 2, 3, 4]

可以從這邊得知 JavaScript 實際上是用類似陣列的方式處理傳入的參數
傳進去的所有參數會用 arguments 這個函式自身的變數儲存
即使函式撰寫時不註明會使用到的參數也不會影響

C++或Java的 Programmer 應該都很習慣 function overloading(method overloading)的使用
只要參數不同,就會是不同版本的函式
但是對 JavaScript 就不是如此
它會將同名的函式視作相同的物件,只是使用者傳入長度不一樣的陣列
function overloading的寫法在JavaScript會變成覆寫函式,算是初學者要注意的地方

JavaScript的arguments物件只要用陣列的一般處理方式就能接觸到所有參數
function demo2 () {
    for(var i = 0, max = arguments.length; i < max; i++){
   console.log(arguments[i]);
}
}

使用可變參數函式還可能碰到一個需求
怎麼樣將一個可變參數的函式傳遞到另一個可變參數函式呢?
function demo3 () {
    demo2.apply(this, arguments);
}
demo3(1, "test")

// output
1
test


這個是我覺得比較簡潔的方式
用JavaScript function 的 apply 機制讓它過程中套用到另一個函式

範例 - JavaScript 實作 Excel 頁籤移動元件

最近想調整之前做的在有限空間內的選單內容切換元件
參考的項目來源則是Excel的下方頁籤選擇器
Excel這類廣泛使用的軟體,設計都還滿值得參考的
一方面是Microsoft將它做得滿直覺的
另一方面則是一般大眾也被訓練到能接受它的操作流程

實作的成果如下:


點擊下一項時,選單容器會自動往右邊捲動一個不定長度的子元件的距離
長按著下一項按鈕不放,則會持續往右捲動到底