作者liaosankai (低溫烘焙)
看板Ajax
標題Re: [問題] 有架構化的Java Script
時間Sat Sep 25 16:37:20 2010
關於這個問題，我也是有相同的經驗。最主要是因為javascript雖然可以單獨
寫成一個js檔，再透過<script>標籤讀入，來達成某個程度上的程式碼管理，
但是你必須清楚的知道每個獨立的js檔案是否有用到其他js檔，如果有則必須
一併為需要的JS檔加上<script>標籤來讀入。而不是像一般的程式語言有匯入
其他檔案的語法，像c++的include或java的import可以使用，所以當一個專案
變得很大的時候，通常最後為了能讓網頁正確執行，都會把所有js檔全部讀入
或全部集中成一個js檔，但日後的如果有更新，勢必要再把所有檔案集中壓縮
一次。
針對這個問題我嘗試用過動態產生<script>來模擬import的方法，但是很遺憾
的，javascript是個直譯式的語言，所以他並不會等待<script>建立完成才繼
續下一段程式碼，以下面為例子，假設Include函式實作了一個功能：
建立<scirpt>，指定參數為url，並將<script>加入<head>的相關程式碼。
global.js 定義了某些變數：
----------------------------------------------------------------
var name = 'Kai';
----------------------------------------------------------------
index.html 的javascript內容：
----------------------------------------------------------------
<script src="
http://localhost/js/Include.js"></script>
<script>
function sayHello()[
alert('hello, ' + name);
}
Include('
http://localhost/js/global.js');
sayHello();
</script>
----------------------------------------------------------------
我們嘗試呼叫位於另一個js檔案所宣告的name變數，你期望應該看到的是
hello, Kai
但是瀏覽器會很殘酷的跟你說沒有這個東東，跑出變數未定義的大錯誤，因為
sayHello()並不會等待 Include()的完成，就會立刻執行，這結果相當令人沮
喪，但是如果你嘗試延遲執行函式：
setTimeout('sayHello()', 1000);
你就能看到與預期相符的結果，表示檔案確實是有被讀入，也有完成程式碼的
執行，但是我們沒辦法限制程式碼的執行順序。
最後透過不同的邏輯方式，我嘗試成功實作了檔案匯入的機制，當然在規則上
有其一定的限制，但在執行上確實能達到檔案組織管理的好處，不妨可以參考
看看或互相交流討論，提供更好的意見
專案位置
http://code.google.com/p/jclassscript/
--
歡迎來我的網誌看看
@
http://liaosankai.pixnet.net/blog
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 124.9.104.124
1F：→ TonyQ:如果說是本站的script ，不一定要script tag 載啊。:~ 09/25 20:23
2F：→ TonyQ:不過這比較建議是純client side 沒有任何 server 可以幫忙時 09/25 20:23
3F：→ TonyQ:不然從server 設定開發環境，設定打包js的程序，會比client 09/25 20:24
4F：→ TonyQ:有效率很多，畢竟省了 request 。 09/25 20:24
5F：→ TonyQ:如果可以把所有檔案壓縮一次變成自動化而且幾秒鐘內就可以解 09/25 20:24
6F：→ TonyQ:決的事情，通常就不會覺得它討厭了。:D 09/25 20:25
7F：→ liaosankai:感謝你的建議，我能了解你的說法。但我只是很單純的想 09/25 22:14
8F：→ liaosankai:嘗試實作出類似的功能，或許等到javascript2.0出來 09/25 22:15
9F：→ liaosankai:這些都已經實作，而且一定會在更好 09/25 22:17
10F：→ liaosankai:但是就目前來說，提出可能解決的方法或許是比較有趣的 09/25 22:24
11F：→ liaosankai:關於效能並不是主要的考量，只要在能接受的範圍就好 09/25 22:25
12F：→ TonyQ:yep 可行解一向都是有趣的，不過描述一個 solution 應該是優 09/25 23:08
13F：→ TonyQ:缺點跟適用情境並提的。因為其實效能是不是在能接受的範圍是 09/25 23:08
14F：→ TonyQ:很難說的一件事情。 09/25 23:09
15F：→ TonyQ:不過話說回來，我倒比較希望 browser 對 connection 的 09/25 23:10
16F：→ TonyQ:support 可以好一點，讓我們可以真的把js的模組化又不傷本XD 09/25 23:10
17F：→ TonyQ:有一些fw有類的功能，像是 rails 因為他是由 rails去產生 09/25 23:13
18F：→ TonyQ:script tag, 所以他可以寫多個 js , debug時執行分開沒壓縮 09/25 23:13
19F：→ TonyQ:的，但是 deploy 時會自動打包成 all.js 而且自動指過去 09/25 23:14
20F：→ TonyQ:另外這方案最大的缺點在於要完全重寫既有的東西，去配合你 09/25 23:18
21F：→ TonyQ:的結構，作為一個玩具可以，不過作為一個solution，我想它給 09/25 23:20
22F：→ TonyQ:的誘因並不大。 09/25 23:20
23F：→ TonyQ:oops , 我發現我在一年半前就對你說過一樣的話了...XD 09/25 23:22
24F：→ TonyQ:好吧 那當我沒說。XD 09/25 23:22
25F：→ TonyQ:想到另一個可行解，using js 這隻plug-in 可以用來管理 09/25 23:44
26F：→ TonyQ:js 的 dependency ，幾年前有在project用過。XD 09/25 23:45