顯示廣告
隱藏 ✕
※ 本文轉寄自 ptt.cc 更新時間: 2011-08-01 12:51:12
※ 本文為 angelplume. 轉寄自 ptt.cc 時間: 2011-08-01 12:51:12
看板 Ajax
作者 senser (彷彿曾經一起死過)
標題 Re: [問題] 新手繞不出來的Javascript 問題
時間 Sat Jul 30 18:10:52 2011


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_pere...5-ways-to-call-a-function.aspx

※ 引述《B9 (葉酸酸)》之銘言:
: ※ 引述《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()
:     {
:         用 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)
s25g5d4:幫縮網址 http://tinyurl.com/bmy8aw1F 07/30 18:26
musie:這方法很棒,我們公司的學長也鼓勵用這種方法去做,2F 07/30 18:57
musie:還可以避免掉檢查null等問題。

--
※ 看板: layzer 文章推薦值: 0 目前人氣: 0 累積人氣: 218 
※ 文章分類: JavaScript / AJAX
分享網址: 複製 已複製
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇