我很不喜歡在 View 頁面裡直接下 Javascript 程式碼,必須要的話,我也一定會將全部的 Javascript 程式碼擺在頁面的最下面,我相當不能夠忍受 Javascript 程式碼穿插出現在 View 的任何一個地方。
View 頁面除了 Html Tag 之外還會有 Razor Syntax,我必須說在複雜的頁面顯示邏輯下,Html Tag 與 Razor Syntax 就有可能會相當混亂,此時如果再加入 Javascript 程式碼的話,這已經不是複雜或是混亂可以來形容,如果要選個適當的形容詞,那麼我會用「惡搞」,尤其是有些開發者為了要控制某些邏輯的情況下才能夠觸發哪些前端功能時,會用 Razor Syntax 來包住 Javascript 程式碼,也就是用後端程式的邏輯來控制前端程式的有無以及能否執行,這樣搞得前後端程式邏輯在頁面裡大亂鬥,這樣的做法就好像回到十多年前開發 ASP 一般。
我在專案裡對於 View 頁面所使用的做法是將 Javascript 程式碼全部抽離,然後放到一個獨立的 Javascript 檔案裡,而且一個頁面對應一個 Javascript 檔案,不會出現 A 頁面去使用到 B 頁面的前端程式,假如有出現共用的程式,則再提取出來放在更上一層的 Javascript 檔案裡,這樣的做法就如同我們在寫後端 C# 程式一樣。
但是有很多開發者對於要將 javascript 程式碼從頁面抽離都會面臨到一個問題,那就是如何取得後端方法的路徑,在 View 頁面上可以直接使用 Url.Action() 來取得路徑,但如果是在 Javascript 檔案裡就無法使用 UrlHelper 來取得路徑,而如果是直接將路徑寫死在 Javascript 程式碼裡,就會面臨到如果網站位置、路徑有改變時所帶來的影響,另外就是有時路徑並不是如我們所想的那樣,也因為無法正確取得路徑或是難以取得正確路徑的緣故,而只能讓 javascript 程式碼繼續留在 View 頁面裡。
接下來就位各位說明如何在網站裡使用 RouteJs,讓我們可以在 Javascript 程式碼裡一樣可以使用類似 Url.Action() 的方法來取得正確的路徑。