Re: [問題] 新手繞不出來的Javascript 問題

看板Ajax作者senser (彷彿曾經一起死過)時間14年前 (2011/07/30 18:10)推噓2(2推 0噓 1→)

留言3則, 2人參與討論串3/3 (看更多)

B9大的文章寫的對剛接觸js的人有很大的參考價值如果你根據他的寫法去改程式的品質會好很多對於naming space我補充一下在global裡declare function最好也盡量避免一般我在進行一個project時除了一些framework或工具的object外(jquery,underscore...etc) 我只會在global裡留下唯一一個變數這個變數基本上會和網站的名字一樣如我建一個站 mycoolsite.com 在global裡我只有var MyCoolSite ={}; 其他全部的code 都會寫在這個object的naming space下我會給他一個method叫做init 在DOM完成時我會執行MyCoolSite.init(); 裡頭放網站開始run時要作的事或是widget的initialization等等 var MyCoolSite = { init : function(){ //dosomething }, otherMethod :function(){ //dosomething }, otherMethod2 : function(){ //dosomething } ......... }; 而這個object就等於是共通的naming space 其他的client-side code也會寫在他下面如我今天要寫一個facebook post功能我會新增一個object (對寫慣其他語言的不妨把他當class 雖然有本質上的不同) MyCoolSite.FacebookShare = { init : function() { //dosomething } share : function() { //dosomething }, poke : function(){ //dosomething } ...... }; 然後在MyCoolSite.FacebookShare.init()加在 MyCoolSite的init執行內容裡 var MyCoolSite = { init:function(){ MyCoolSite.FacebookShare.init(); } }; 如此一來你可以避掉全部的global variable 得到一個很clean的架構以上的例子只用了singleton pattern 但是當你寫複雜物件用到其他的pattern時甚至實作繼承時這種架構方式還是一樣的總之要注意 Global Variables are Evil 對function的用法這篇文章非常適合新手 http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx ※ 引述《B9 (葉酸酸)》之銘言： : ※ 引述《phreat (雷)》之銘言： : : 這是程式,主要目的是希望能抓取值 : : 嘗試過將k改成數字是可行的但因為會跑回圈所以放在裡面 : : 怎麼試都不行希望有大大指點迷津一下 : : <SELECT id="test1" onchange="test('test1')"> : : <option value="100">Ａ</option> : : <option value="200">Ｂ</option> : : <option value="300">Ｃ</option> : : </SELECT> : : <SELECT id="test2" onchange="test('test2')"> : : <option value="100">Ａ</option> : : <option value="200">Ｂ</option> : : <option value="300">Ｃ</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() : { : 用 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()" : 假設將來這份 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 例如： : /* 這裡效能可以更好。 */ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 71.104.223.87 ※ 編輯: senser 來自: 71.104.223.87 (07/30 18:13)