Javascript

5 月 4 2014

Javascript 的變數範圍

最近在微調部門某個 PHP 專案程式，該專案使用 ExtJS 作前端介面 framework …
整理這個專案內的 Javascript 程式讓我覺得… 應該有不少人忽略，或是不在意 Javascript 的變數定義方式。

先來看這串程式碼：

執行結果：

這張圖有趣就在第 40, 41 行程式碼執行的結果差異，以及 42, 43 行程式碼執行的結果差異。
在 Javascript 不透過 var 進行定義之變數，皆為全域變數；但透過 var 定義之變數就有變數範圍。
這兩種變數定義方式影響瀏覽器開啟網頁後的記憶體耗用量，以及 Javascript engine 進行 GC 的效率與結果，不得不慎呀…

By • 0 • Tags: , , ,

12 月 25 2012

[Ext JS] Ext.form.field.Text 的 emptyText

為了給使用者更多的提示，讓使用者順利完成表單，我們會在 web 表單的 text 欄位使用如下的語法：

<input type="text" value="Search keyword(s)" name="s" id="s"
       onfocus="if (this.value == 'Search keyword(s)') {this.value = '';}"
       onblur="if (this.value == '') {this.value = 'Search keyword(s)';}" />

在 Ext JS ，則是透過 Ext.form.field.Text 的 emptyText 來實作此一效果：

Ext.create('Ext.form.field.Text', {
	id: 's' ,
	name: 's' ,
	emptyText: 'Search keyword(s)'
});

Ext JS 已經開始使用 HTML5 的語法，所以在部份瀏覽器上， Ext JS 改用 input 的 placeholder 屬性來實作；根據說明，該屬性應有相同效果，與 onfocus、onblur 作連動。
但在 Ext JS 4.1.0，已經設定 emptyText 的 Ext.form.field.Text 元件卻不會在滑鼠點選後清空文字。

目前的解法是讓 Ext JS 捨棄 placeholder 的實作；方法如下：

Ext.onReady( function() {
	Ext.supports.Placeholder = false;
	....
});

By • , 0 • Tags: , , , , , , ,

1 月 7 2010

[Javascript] 從 array 裡隨機挑出不重複的值

Javascript 提供了 For … In … ，我用的還蠻高興的（雖然我很少撰寫 Javascript）。
今天遇到某種特殊需求，我才發現這個迴圈語法並非萬能。

從 array 裡隨機挑出不重複的值有兩種情況，一種很單純，For … In … 迴圈可以處理的很好：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x;

while(fruits.length > 0) {
    var r = Math.floor( Math.random() * fruits.length );
    var n = fruits[r];
    document.write("Choosen[" + r + "]: " + n + "<br />");
    document.write("Array: " + fruits + "<br />");

    for(x in fruits) {
        if (fruits[x] == n) {
            fruits.splice(x, 1);
        }
    }
}

若是 array 裡面已經存在重複的值，而且 array 的資料的來源不方便控制（例如是 HTML 裡面的 li 物件），For … In … 這種方便的迴圈語法就必須放棄，改用傳統的 for 迴圈：

var fruits = [
    "Banana", "Banana", "Orange", "Orange",
    "Banana", "Apple", "Apple", "Orange", "Mango"
];
var i=0;

while(fruits.length > 0) {
    var r = Math.floor( Math.random() * fruits.length );
    var n = fruits[r];
    document.write("Choosen[" + r + "]: " + n + "<br />");
    document.write("Array: " + fruits + "<br />");

    for(i=0; i<fruits.length; i++) {
        if (fruits[i] == n) {
            fruits.splice(i, 1);
            i--;
        }
    }
}

By • , 4 • Tags: , , ,