※ 本文為 angelplume. 轉寄自 ptt.cc 時間: 2011-08-01 12:51:02
標題 Re: [問題] 新手繞不出來的Javascript 問題
時間 Sat Jul 30 13:30:09 2011
※ 引述《phreat (雷)》之銘言:
: 這是程式,主要目的是希望能抓取值
: 嘗試過將k改成數字是可行的但因為會跑回圈所以放在裡面
: 怎麼試都不行 希望有大大指點迷津一下
: <SELECT id="test1" onchange="test('test1')">
: <option value="100">A</option>
: <option value="200">B</option>
: <option value="300">C</option>
: </SELECT>
: <SELECT id="test2" onchange="test('test2')">
: <option value="100">A</option>
: <option value="200">B</option>
: <option value="300">C</option>
: </SELECT>
: for (i=1; i<=2; i=i+1)
: {
: k=String(i);
: alert(k);
: cc=Number(document.getElementById("test"+k)[document.getElementById("test"+k).selectedIndex].value);
: }
http://jsbin.com/osatuf
請問這是你要的結果嗎?觸發 select element 的 change 時間可以看到抓到的數值。
我改的地方只有:
多了 test function,這是你在 select.onchange 裡面會 call 的 function。
我有幾個小建議:
- namespace 的建議:
你這段程式碼會在 global namespace 留下幾個變數 i, k, cc, test,
甚至更好的方法是
(function()
{
用 getElementById 抓 html element;
抓到的element.onchange = function(){ 做點事情 };
})()
這樣的寫法一點也不會污染 global namespace。
- styling 的建議:
cc=Number(document.getElementById("test"+k)[document.getElementById("test"+k).selectedIndex].value);
拆開比較好,我會這樣寫:
element = document.getElementById("test"+k);
selected = element.selectedIndex;
value = element[selected].value;
cc = value;
可讀性好很多,或者我自以為好很多:P
- loose coupling 的建議:
假設將來這份 js 要給其他 html 檔案用,那你現在就有兩個 html,
那你做好 html 檔案之後,還要一個一個 element 去加入 onchange="whatever()"
過了一段時間你不想要這個功能了,你把 js 丟掉,然後就要打開這兩個 html 檔案,
一個一個把 onchange attribute 拿掉。
- type conversion 的建議:
k=String(i); 是不必要的,因為之後的 "test"+k 會自動把 k 轉成 string,
然後跟 "test" 結合。
cc=Number( value )
這我沒有意見,不過有個小秘訣:
cc = value - 0 或 cc = +value 都可以做 type conversion,
可以少打幾個字不知道有沒有吸引力。XD
- performance 的建議:
document.getElementById("test"+k)[document.getElementById("test"+k).selectedIndex].value
document.getElementById("test"+k) 被執行兩次,其實只要執行一次就可以了。
如果其實你有注意到這裡的效能可以改善,那你應該留個 comment 例如:
/* 這裡效能可以更好。 */
--
Oni devas ami animalojn. Ili estas tiel bongustaj.
One should love animals. They are so tasty.
每個人都應該愛動物,他們是如此美味。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 175.180.52.143
※ 編輯: B9 來自: 175.180.52.143 (07/30 13:30)
--
看板 Ajax
作者 標題 Re: [問題] 新手繞不出來的Javascript 問題
時間 Sat Jul 30 13:30:09 2011
※ 引述《phreat (雷)》之銘言:
: 這是程式,主要目的是希望能抓取值
: 嘗試過將k改成數字是可行的但因為會跑回圈所以放在裡面
: 怎麼試都不行 希望有大大指點迷津一下
: <SELECT id="test1" onchange="test('test1')">
: <option value="100">A</option>
: <option value="200">B</option>
: <option value="300">C</option>
: </SELECT>
: <SELECT id="test2" onchange="test('test2')">
: <option value="100">A</option>
: <option value="200">B</option>
: <option value="300">C</option>
: </SELECT>
: for (i=1; i<=2; i=i+1)
: {
: k=String(i);
: alert(k);
: cc=Number(document.getElementById("test"+k)[document.getElementById("test"+k).selectedIndex].value);
: }
http://jsbin.com/osatuf
請問這是你要的結果嗎?觸發 select element 的 change 時間可以看到抓到的數值。
我改的地方只有:
多了 test function,這是你在 select.onchange 裡面會 call 的 function。
我有幾個小建議:
- namespace 的建議:
你這段程式碼會在 global namespace 留下幾個變數 i, k, cc, test,
在 global namespace 裡面留下的足跡越少越好。方法就是用 var 宣告這些變數。
例如: function test() { var i, k, cc; },這樣就只會有一個 test。
例如: function test() { var i, k, cc; },這樣就只會有一個 test。
甚至更好的方法是
(function()
{
用 getElementById 抓 html element;
抓到的element.onchange = function(){ 做點事情 };
})()
這樣的寫法一點也不會污染 global namespace。
- styling 的建議:
cc=Number(document.getElementById("test"+k)[document.getElementById("test"+k).selectedIndex].value);
拆開比較好,我會這樣寫:
element = document.getElementById("test"+k);
selected = element.selectedIndex;
value = element[selected].value;
cc = value;
可讀性好很多,或者我自以為好很多:P
- loose coupling 的建議:
你的 html 跟 js 太親密了。我指把 js 放到 html 的 attribute 裡面這件事情。
例如: onchange="whatever()"
例如: onchange="whatever()"
假設將來這份 js 要給其他 html 檔案用,那你現在就有兩個 html,
那你做好 html 檔案之後,還要一個一個 element 去加入 onchange="whatever()"
過了一段時間你不想要這個功能了,你把 js 丟掉,然後就要打開這兩個 html 檔案,
一個一個把 onchange attribute 拿掉。
- type conversion 的建議:
k=String(i); 是不必要的,因為之後的 "test"+k 會自動把 k 轉成 string,
然後跟 "test" 結合。
cc=Number( value )
這我沒有意見,不過有個小秘訣:
cc = value - 0 或 cc = +value 都可以做 type conversion,
可以少打幾個字不知道有沒有吸引力。XD
- performance 的建議:
document.getElementById("test"+k)[document.getElementById("test"+k).selectedIndex].value
document.getElementById("test"+k) 被執行兩次,其實只要執行一次就可以了。
如果其實你有注意到這裡的效能可以改善,那你應該留個 comment 例如:
/* 這裡效能可以更好。 */
--
Oni devas ami animalojn. Ili estas tiel bongustaj.
One should love animals. They are so tasty.
每個人都應該愛動物,他們是如此美味。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 175.180.52.143
※ 編輯: B9 來自: 175.180.52.143 (07/30 13:30)
推 :不愧是神人級小弟剛接觸jsc所以很多小細節不夠拘謹謝謝提醒1F 07/30 15:06
--
※ 同主題文章:
● 07-30 13:30 ■ [轉寄]Re: [問題] 新手繞不出來的Javascript 問題
07-30 18:10 ■ [轉寄]Re: [問題] 新手繞不出來的Javascript 問題
※ 看板: layzer 文章推薦值: 0 目前人氣: 0 累積人氣: 326
回列表(←)
分享