摸了好久才搞清楚是怎麼一回事,原來這與Javascript Intellisense的運作原理有關。狀況不太容易說明清楚,所以用一個簡單的實例示範,待我細細道來...
<input type="button" id="btn" value="Click Me!" />
<script type="text/javascript">
$addHandler($get("btn"), "click", btnClick);function btnClick() { alert("Yo!");}
</script>
$addHandler($get("btn"), "click", btnClick);function btnClick() { alert("Yo!");}
<input type="button" id="btn" value="Click Me!" />
<script type="text/javascript" src="js/inc.js"></script>
這種改法在過去ASP/ASP.NET時代玩過千百回,這次也不例外,實際執行沒發生任何差錯。只是從此以後,只要我一Build網站或企圖Debug,Error List就會跑出Error updating JScript Intellisense的警告,雖然並不影響網站運作,但一來這個警告對有潔癖的我來說頗為礙眼,二來出現這個警告後,VS2008就不會對inc.js裡的其他函數提供Javascript Intellisense功能。逼得我心不甘情不願地花了點時間反覆測試與追查,總算理出一些頭緒:
搞清楚原委,我們要進行的處理便是要確保inc.js可以被"獨立執行"而不出錯,$get("btn")的寫法必須跟網頁一起執行才有意義,單獨跑inc.js時便會出問題。因此我把$addHandler包進一個initJob()函數,再由網頁中呼叫initJob(),這樣便可確保在每次被呼叫的當下,$get("btn")都會傳回正確的物件。
function initJob()
{ $addHandler($get("btn"), "click", btnClick);}
function btnClick() { alert("Yo!");}
<input type="button" id="btn" value="Click Me!" />
<script type="text/javascript" src="js/inc.js"></script>
<script type="text/javascript">
initJob();
</script>