3 月 4 2014
這陣子在進行一個 mobile web 開發專案；我們對 Ext JS 還算熟悉，故選擇採用同公司的產品：Sencha Touch。
我們沒使用過，決定先進行 prototyping，看能挖出多少可用、好用的元件。
目前第一版趨近完成，我先寫篇心得分享，順道幫自己留個筆記；請路過看到的前輩、高手們不吝給予指教啦～ 
目前是 2014 年 3 月初，已釋出的 Sencha Touch 最新 GPL 版本是 2.3.1，但堪用的是 2.1.1。
Sencha Touch 僅支援 WebKit based 網頁瀏覽器，大致上就是這些。
20
2012 月 25 2012
為了給使用者更多的提示，讓使用者順利完成表單，我們會在 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;
....
});
20201 月 7 2010
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--;
}
}
} 20209 月 9 2009
昨晚，有個學長透過 MSN 問我有無簡單好用的 PHP 圖形驗證碼，又讓我想到 reCAPTCHA。
上一次使用時，reCAPTCHA 僅提供顏色變更；如今，reCAPTCHA 已經開始支援多國語言了。
剛才稍微玩了一下，寫了這個簡單的網頁。
reCAPTCHA 的多國語言化相關資訊可以參考 這裡，而我使用的中文化程式碼片段為：
<script type="text/javascript">
var RecaptchaOptions = {
custom_translations : {
visual_challenge : "取得圖形驗證碼",
audio_challenge : "取得音效驗證碼",
refresh_btn : "重新整理圖形",
instructions_visual : "輸入兩個英文單字:",
instructions_audio : "輸入您聽到的聲音:",
help_btn : "獲得協助",
play_again : "重新播放音效",
cant_hear_this : "將音效下載為 MP3",
incorrect_try_again : "錯誤！ 請再試一次"
}
};
</script> 202011 月 10 2007
5 月 4 2014
Javascript 的變數範圍
最近在微調部門某個 PHP 專案程式，該專案使用 ExtJS 作前端介面 framework …
整理這個專案內的 Javascript 程式讓我覺得… 應該有不少人忽略，或是不在意 Javascript 的變數定義方式。
先來看這串程式碼：
執行結果：
這張圖有趣就在第 40, 41 行程式碼執行的結果差異，以及 42, 43 行程式碼執行的結果差異。
在 Javascript 不透過 var 進行定義之變數，皆為全域變數；但透過 var 定義之變數就有變數範圍。
這兩種變數定義方式影響瀏覽器開啟網頁後的記憶體耗用量，以及 Javascript engine 進行 GC 的效率與結果，不得不慎呀…
By Joe Horn • Javascript • • Tags: Garbage collection, GC, Javascript, variable scope